요소가 화면에 출력되는 특성 2가지 : 글자와 상자
- 글자=인라인(inline) 요소 : 글자를 만들기 위한 요소들
- 상자=블록(block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
인라인 요소 : 요소가 수평으로 쌓임
<span>Hello</span>
<span>World</span>
- 글자는 가로와 세로 속성을 가질 수 없음
마진(외부여백), 패딩(내부여백)
- 인라인 태그안에는 상자 태그를 쓸수 없음.
- 줄바꿈은 한줄 띄우기
블록 요소 : 요소가 수직으로 쌓임
<div>Hello</div>
<div>World</div>
디비전
- 마진, 패딩 다 먹힘
- 블록 속에 블록, 인라인 모두 추가 가능
인라인 태그와 블록 태그
인라인 | 블록 요소 | 인라인-블록 |
span, img, a(anchor 닻을 건다), br(줄바꿈) | div, h1~6, p, ul, li, ol | <input type=”text” /> |
LABEL
input type= check, radio
TABLE
TR (테이블 로우)
td (테이블 데이터)