글자와 상자
요소가 화면에 출력되는 특성은 크게 2가지가 있다.
- 인라인 요소 : 글자를 만들기 위한 요소들
- 블록 요소 : 상자(레이아웃)를 만들기 위한 요소들
인라인 요소
- 인라인 요소는 기본적으로 요소가 수평으로 쌓인다.
- 인라인 요소는 마치 하나의 글자처럼 취급된다.
- 인라인 요소의 사이즈는 포함한 콘텐츠 크기만큼 자동으로 줄어든다 - 줄어들려고 한다가 핵심
- 글자처럼 취급된다고 했는데, 글자 자체는 사이즈가 없다. 그러므로 인라인 요소에 사이즈 (width, height) 변경은 당연히 안 먹힌다.
- margin, padding 을 지정하면 위,아래는 추가할 수 없음. 좌우만 취급함.애초에 인라인에서 위아래 여백, 마진은 없다.
- 자식 요소로 블록요소를 취급할 수 없다 - 글자 안에는 상자를 집어넣을 수 없다. 글자 안에는 글자만 넣어라
- 대표적인 인라인 요소 span
본질적으로는 아무 것도 나타내지 않음
콘텐츠 영역을 설정하는 용도
블록요소
- 블록 요소는 기본적으로 수직으로 쌓인다.
- 부모요소의 크기만큼 자동으로 늘어남! - 가로너비는 최대한 늘어나려고 한다. 세로너비는 자동으로 줄어들려고 한다.
- 대표적인 블록요소는 div가 있음
- 사이즈를 사용할 수 있음 - 시각적인 조작이 편하다.
- 블록요소 안에는 인라인 요소를 넣을 수 있다.
