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의 속성을 모두 가짐