CSS (2) 썸네일형 리스트형 [CSS] float 속성 float는 요소를 왼쪽이나 오른쪽에 이동시킬 때 사용한다. float는 주로 레이아웃을 구성할 때 가로 정렬을 위해 사용된다. See the Pen float 1 by hyeon (@longflash) on CodePen. div는 블록구조이므로, div 태그를 두 번 입력하면 1번과 2번 박스처럼 아래로 쌓인다. 3번과 4번을 보면 왼쪽 정렬한 것을 볼 수 있는데, 이것이 float: left의 힘이다. right값을 주게 되면, 오른쪽으로 정렬한다. 이런 기능을 이용하여, 레이아웃을 짤 수 있다. float 속성은 간편하지만, 문제는 float 속성 이후에 나타나는 요소들의 위치 설정이 곤란해진다는 데 있다. 예를 보자. See the Pen float 2 by hyeon (@longflash) o.. [CSS] 마진 병합 (Margin Collapsing) 마진 병합은 CSS의 margin 값이 서로 병합되는 현상을 말한다. 마진 병합은 형제 태그끼리 발생하는 것과 부모 자식 간에 발생하는 현상으로 나뉜다. 또한 마진 병합은 상하에서만 일어나는 현상이므로 inline구조에선 발생하지 않으며, margin-top과 margin-bottom 사이에서만 발생한다. 형제 태그끼리의 병합 현상 See the Pen Margin Collapsing 1 by hyeon (@longflash) on CodePen. 먼저 box1의 margin-bottom은 50px, box2의 margin-top은 100px을 주었고, box3와 box4의 간격은 정확히 100px을 주었다. 하지만 1과 2의 상하 간격이 3과 4의 상하간격인 100px과 같은 것을 볼 수 있다. box.. 이전 1 다음
