공부하고 또 공부하는

[float + clear 속성으로 수평 레이아웃 구성하기] 먼저 수평으로 배치되어야 할 요소들에게 float:left 를 줍니다. 만약 특정 요소만 오른쪽에 고정되어야 한다면 right를 줄 수도 있습니다. 그리고 이들을 감싸는 컨테이너를 하나 만들고, :after 가상 선택자에서 clear를 하도록 하면 됩니다. [예시] [결과] 아래와 같이 작성을 하게 되면 복잡한 형태의 레이아웃도 만들 수 있습니다. main이 수평 컨테이너 역할을 하는 것과 같습니다. [예시] [결과] [종합] 컨테이너는 고유하지 않습니다. 컨테이너 안에 다른 컨테이너가 들어갈 수도 있고, 컨테이너가 수직으로 여러 개 배치될 수도 있습니다. [예시] [결과]

[개요] float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다. 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다. [예시] [결과]

[개요] float 라는 단어는 원래 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit : 부모 요소에서 상속 left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display 속성은 무시된다. none : 요소를 부유시키지 않음 left 와 right 를 통해 부유속성을 지정시 display 는 무시됩니다.(none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라..