[CSS] Inline 요소와 Block 요소

글자와 상자

우리가 보는 웹사이트는 이미지를 제외하고 모두 글자와 상자로 이루어져 있다고 볼 수 있다.

요소가 화면에 출력되는 특성은 크게 2가지로 구분된다.

 

Inline 요소

글자를 만들기 위한 요소들을 말한다.

대표적으로 span 태그가 있다.

 

- width: 자신이 포함하고 있는 콘텐츠의 크기만큼 자동으로 줄어든다.

- height: 자신이 포함하고 있는 콘텐츠의 크기만큼 자동으로 줄어든다.

 

- 요소가 수평으로 쌓인다.

- width, height 를 지정해도 무시된다.

- margin, padding 의 왼쪽/오른쪽 여백은 적용이 되지만 위/아래 여백은 정상적으로 적용되지 않는다.

- 자식 요소로 Block 요소를 사용할 수 없다.

 

Block 요소

상자(레이아웃) 을 만들기 위한 요소들을 말한다.

대표적으로 div 태그가 있다.

 

- width: 부모 요소의 크기만큼 자동으로 늘어난다.

- height: 자신이 포함하고 있는 콘텐츠의 크기만큼 자동으로 줄어든다.

 

- 요소가 수직으로 쌓인다.

- width, height 가 지정한대로 적용된다.

- margin, padding 이 정상적으로 적용된다.

- 자식 요소로 Block, Inline 요소 모두 사용할 수 있다.