(CSS코딩일기) 블록과 인라인, 인라인 블록, float 속성

1. 블록

디스플레이에는 블록과 인라인이 있습니다. 그 중 블록(block)은 <h1>, <p>, <div> 같은 것들 입니다. 블록은 위에서부터 아래로 배치됩니다. 너비와 높이를 지정할 수 있다는 특징이 있습니다. 

2. 인라인

인라인(inline)은 <a>, <span>, <br>, <img> 같은 것들 입니다. 평소에 글 쓰는 방향과 일치하며 화면에 꽉 차면 다음 줄로 넘어갑니다. 블록과 달리 너비와 높이를 지정할 수 없습니다. (<img>태그는 예외) 그리고 여백은 가로로(글 쓰는 방향)만 가능합니다.

3. 인라인 블록

인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다.

4. float

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

5. 블록, 인라인 블록, 인라인 비교