안녕하세요 lovefield 입니다.
오늘은 CSS layout 에 대해서 설명해드리겠습니다.

CSS layout 에는 float, position, flex 가 있습니다.

Float layout

Float layout 은 원래 layout 을 위한 용도가 아닙니다.
워드 문서 같은 곳에서 다음과 같이 이미지와 텍스트를 정렬하기 위한 용도였죠.

See the Pen EjmGyL by Ha Hyun Yong (@lovefield) on CodePen.

하지만 실무를 비롯한 많은 곳에서 사용되고 있죠.
그 이유는 호환성 때문입니다.
float는 모든 브라우저에서 사용할 수 있기 때문이죠.

instructions

.item{float:left | right | none}

속성은 위와 같으며 각각 왼쪽 정렬 , 오른쪽 정렬 , 정렬 없음 입니다.

See the Pen JEozGj by Ha Hyun Yong (@lovefield) on CodePen.

이 예제에서 보시면 .clearfix 라는 게 보이실 겁니다.
.clearfix가 들어가는 이유는 위에서 쓴 바와 같이 float가 레이아웃을 위한 용도가 아니었기 때문입니다.
그래서 사용시 부모가 사용한 자식의 사이즈를 못 가져오는 현상이 발생하죠.
그렇기에 float 를 사용하셨다면 .clearfix 는 필수입니다.

.clearfix::after{display:block;content:'';clear:both}

Position layout

Position layout은 좌표값이라고 생각하시면 편합니다.
부모로부터 top,left,right,bottom 값을 지정해주는 것 이죠.

instructions

.item{position:relative | absolute | fixed | none}

속성은 위와 같습니다.
여기서 부모속성이 존재하는데.
부모가 될 수 있는 속성은 relative, absolute, fixed 입니다.
자식 속성은 absolute 입니다.

즉 absolute는 relative, absolute, fixed 를 기준으로 top,left,right,bottom 값을 지정 할 수 있습니다.
absolute 는 부모를 기준으로 잡히기 때문에 바로 위의 부모가 부모속성이 아닐 시 그 다음 부모를 찾습니다.
그렇기에 부모속성이 없을 시 최상위 인 body를 기준으로 위치가 잡히게 되지요.

See the Pen rVmQmM by Ha Hyun Yong (@lovefield) on CodePen.

위의 예제를 보면
relative 는 자기 자신을 기준으로
absolute 는 relative을 기준으로
fixed 는 브라우저 창을 기준으로
되는 것을 볼 수 있습니다.

Flex layout

Flex layout 은 CSS3에서 나온 layout 을 위한 요소입니다.
그렇기에 속성도 다양하고 다뤄야 할 것도 많은데요.
Flex layout 은 따로 작성하도록 하겠습니다.