08-4 웹 문서의 레이아웃 만들기

박스 모델의 블록 레벨 특성과 인라인 레벨 특성을 이해했다면 웹 문서의 레이아웃을 만들 때 크게 도움을 받을 수 있음.

웹 브라우저가 지정하는 기본 위치에서 벗어나 왼쪽이나 오른쪽으로 배치할 수도 있음.

 

>>> 배치 방법 결정하는 display 속성

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있음.

display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있음

 

>>> 왼쪽이나 오른쪽으로 배치하는 float 속성(떠 있다는 의미)

웹 문서를 만들다 보면 <p>태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있음

그런데 <p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없음.

이럴 때는 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있음.

 

>>> float 속성을 해제하는 clear 속성(더 이상 떠있지 않게 함)

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달됨.

따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성임.