아래의 사진 처럼 만들 것. 아래의 사진 처럼 만들 것. 위의 사진을 만들기 위해서는 블럭을 몇개 만들어야 하는지 개념이 필요함. 아래의 블럭 참조. 아래의 사진 처럼 만들 것. 1개만 만들면, 복붙 이기 때문에, 1개의 코드만 올림.

이번에는 css 플롯에 대해서 알아 봅시다. 플롯 float 는 띄우다 라는 뜻을 가지고 있습니다. float 는 보통 이미지 or 텍스트 를 정렬하기 위해서 사용합니다. 예를 들어서, 왼쪽으로 정렬하거나 오른쪽으로 정렬할 때 사용하는데, 띄워서 정렬 합니다. 즉. 블럭요소 or 인라인요소 를 같은 줄에 배치할 수 있도록 합니다. 박스를 10개 만들어 봅시다. 이렇게 세로로 쌓여진, 박스를 float 를 사용하면 아래처럼 됩니다. 그런데, 부모요소 인 boxList 를 16.6666% 로 나누면 6 입니다. 즉 박스가 6개씩 정렬되어야 하는데 5개만 쌓였죠? 그 이유는, border 도 박스의 크기에 포함이 되기 때문 입니다. 이를 해결하기 위해서, 부모요소에는 overflow : hidden 속성을, ..

이번에는 css의 윤곽 , 패딩, 마진, 상자크기 에 대해서 알아 봅시다. 윤곽 윤곽은 일정 공간의 마지막 부분에 선을 그어주는 것을 의미 합니다. border : 두께, 선개수, 색상 border 는 top, bottom, left, right 가 합쳐진 것으로, 쪼개서 사용할 수도 있습니다. border-radius -> 모서리 둥글게 border-shadow -> 그림자 수평, 수직, 흐림반경, 확산정도, 색상 패딩 패딩은 윤곽 기준으로, 안쪽여백을 의미 합니다. 박스의 크기에 포함이 되고, 패딩끼리 겹치지 않습니다. padding : 50px -> 상하좌우 ( 전부다 ) padding : 50px 50px 50px 50px -> 위, 오른쪽, 아래, 왼쪽 ( 위쪽 부터 시계방향 ) padding ..

이번에는 css의 background 에 대해서 알아 봅시다. background background 는 뒷 배경 이라고 생각을 하시면 되겠습니다. background-color -> 뒷 배경에 색 넣기 background-image -> 뒷 배경에 이미지 넣기 ※ border : 1px solid #777; 을 적용하고 있습니다. background-repeat -> 이미지 반복 여부 repeat : 반복 ( 기본값 ) no repeat : 반복x repeat-x : x축 반복 repeat-y : y축 반복 background-position -> 뒷배경 시작위치 ( 왼쪽, 위 ) %를 사용해서 위치를 지정할 수도 있습니다. background-size -> 뒷배경 사이즈 조절 auto : 이미지의 원..