9장. 요소 정렬

[ 목차 ]

1. float 프로퍼티

2. 정렬

3. width

4. float 프로퍼티가 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 문제

5. float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상반영 되지 않는 문제

 

1. float 프로퍼티

1) 주로 레이아웃을 구성할 대 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법

2) flexbox 레이아웃을 사용한다면 더 간단히 정렬 가능하지만 이를 지원하지 않는 IE를 고려한다면 float 프로퍼티 사용

3) float 프로퍼티는 본래 이미지 주위를 텍스트로 감싸기 위해 만들어진 것

4) 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것

5) 요소의 위치를 고정시키는 position, absolute를 사용하면 안 됨

 

2. 정렬

1) float 프로퍼티를 사용하지 않은 블록 요소들을 수직으로 정렬

2) float: left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬

3) float: right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬

4) 오른쪽 가로 정렬의 경우 먼저 기술된 요소가 가장 오른족에 출력되므로 출력 순서가 역순

5) float 프로퍼티는 좌측, 우측 가로 정렬만 가능하기에 중앙 가로 정렬은 margin 프로퍼티를 사용

 

3. width

1) width 프로퍼티의 기본값은 100%이기에 값은 지정하지 않은 요소는 부모 요소의 가로폭을 가득 채움

2) width 프로퍼티를 선언하지 않은 block 레벨 요소에 float 프로퍼티가 선언되면 width가 inline 요소와 같이 content 에 맞게 최소화되고 다음 요소 위에 부유하게 됨

 

4. float 프로퍼티가 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 문제

1) 3은 float 프로퍼티가 선언된 요소가 다음 요소 위에 떠 있는 상태로, 두 요소간의 margin이 제대로 표현되지 않음

2) 두번째 요소에 float 프로퍼티를 선언하지 않아서 발생하는 박스 모델 상의 문제

3) float 프로퍼티를 선언하지 않은 요소에 overflow: hidden 프로퍼티를 선언하여 해결 가능

4) 자식 요소가 부모 요소의 역역보다 클 경우 넘치는 부분을 안보이게 해주는 역할

 

5. float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상반영 되지 않는 문제

1) float 요소는 일반적인 흐름 상에 존재하지 않아 flaot 요소의 높이를 알 수 없기 때문에 부모 요소 이후에 위치하는 요소의 정렬에 문제를 유발

2) float 프로퍼티가 선언된 자식 요소의 부모 요소에 overflow : hidden 프로퍼티를 선언해 해결 가능

3) :after 가상 요소 선택자를 사용(부모 요소에 clearfix 클래스를 추가)하여 해결 가능

4) float 프로퍼티 대신 display: inline-blcok;을 선언하여 해결 가능

5) d1과 d2 사이에 의도치 않은 공백이 자동 지정되기 때문에 부모 요소에 font-size: 0을 선언하여 공백을 제거