[Web/CSS] CSS - 웹 문서의 레이아웃 만들기

✏️ 배치 방법 결정하는 display 속성

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능하고

웹 문서의 네비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치 가능

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 변경
inline	블록 레벨 요소를 인라인 레벨 요소로 변경
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정 가능
none	해당 요소를 화면에서 표시하지 않음

 

✏️ 왼쪽이나 오른쪽으로 배치하는 float 속성

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

그러나 <p>요소는 블록 레벨 요소여서 이미지와 나란히 한 줄에 배치가 불가능, 이럴 때 float 속성 사용

종류	설명
left	해당 요소를 문서의 왼쪽에 배치
right	해당 요소를 문서의 오른쪽에 배치
none	좌우 어느 쪽에도 배치하지 않음, 기본값

✏️ float 속성을 해제하는 clear 속성

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달됨. 이를 방지하고자 clear속성을 통해 해제할 수 있음

종류	설명
left	float : left를 해제
right	float : right를 해제
both	float : left와 float : right를 모두 해제