[CSS] Display

블록(block)

<h1>, <p>, <div> 와 같은것

위에서부터 아래로 배치됨

너비와 높이를 지정할 수 있음

 

인라인(inline)

<a>, <span> 같은것

평소에 글 쓰는 방향

화면에 꽉 차면 다음줄로 넘어감

너비나 높이를 지정할 수 없음 (예외로 img 는 가능)

여백은 가로로만(글 쓰는 방향) 가능

 

인라인블록(inline-block)

인라인처럼 배치되나 블록처럼 크기를 가지고 싶을 때 사용하는 속성

블록인라인 블록

	블록	인라인	인라인블록
기본 크기	좌우로 꽉 참	콘텐트에 딱 맞게	콘텐트에 딱 맞게
배치	위에서 아래로	글 쓰는 방향	글 쓰는 방향
width 와 height	O	O	X
margin 과 padding	O	O	▵ 인라인 진행 방향(=가로)만 제대로 사용 가능

 

float : right / left 

요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있음.