블록(Block) 요소와 인라인(inline)요소

css에서 가장 중요한것은 블록요소와 인라인 요소의 차이점이라고 아는 것이라고 생각한다.

이 개념이 흔들린다면 css를 사용함에 있어 혼란이 올 수 있으니 꼭 정립하고 가자.

1. 블록 요소

- div, h1, p 등

- 기본적으로 사용가능한 최대 가로 너비를 사용한다

- 크기를 지정 할 수 있다

- width: 100%; height: 0;으로 시작

- 수직으로 쌓임

- margin, padding 위 아래 좌 우 사용 가능

- 주로 레이아웃을 잡을 때 사용

2. 인라인 요소

- span, img, a 등

- 자신의 안에 포함된 내용 만큼의 너비를 사용한다

- 크기를 지정 할 수 없다

- width: 0; height: 0;으로 시작

- 수평으로 쌓임

- html 상에서 span태그 뒤에 줄바꿈이 있으면 띄어 쓰기가 들어간다

- margin, padding 위 아래 사용 불가 (padding의 경우 backgound는 들어가지만 영역을 잡지는 못함)

- 주로 텍스트를 다룰 때 사용

3. display 속성

- 요소의 속성을 inline, block, inline-block으로 변경 할 수 있다.

- inline-block은 inline과 block의 속성을 모두 가짐