HTML 개요

1. 요소(Element)

• <태그>내용</태그> 로 구성

2. 부모와 자식 관계

• 부모요소와 자식요소는 들여쓰기(Tab)와 내어쓰기(Shift+Tab)로 구분
• 나를 감싸는 모든 부모요소는 '상위(조상)요소', 나의 모든 자식요소는 '하위(후손)요소'

3. 빈 태그

• 빈 태그 : 내용과 종료태그가 없는 태그
• HTML4까지는 <태그>로, XHTML에서는 <태그/>로, HTML5에서는 둘 다 사용 가능
  • <태그/>의 형태로 사용하는 것이 안전
• 빈 태그는 대부분 속성이 필요

4. 글자와 상자

1) 글자 -> 인라인(inline) 요소

• 요소가 수평으로 쌓임, 포함한 콘텐츠의 크기만큼 가로세로의 길이가 자동으로 줄어듬
• ⭐인라인 요소의 자식 요소로 블록 요소는 사용할 수 없음 (글자 안에 상자X, 글자 안에 글자O)
• style 속성 내에서 width, height, margin 사용 불가 / padding 위아래 불가 좌우는 가능
  • span 태그 : 대표적인 인라인 요소로, 본질적으로는 아무것도 나타내지 않으며 콘텐츠 영역을 설정하는 용도로 사용

2) 상자 -> 블록(Block) 요소

• 요소가 수직으로 쌓임, 가로 사이즈는 부모 요소의 크기만큼 자동으로 늘어남, 세로 사이즈는 포함한 콘텐츠의 크기만큼 자동으로 줄어듬
• 블록 요소의 자식 요소는 인라인 및 블록 전부 가능 -> 전체적으로 제약이 별로 없음(width, height, margin, padding 전부 사용 가능)
  • div 태그 : 대표적인 블록 요소로, span태그와 같은 용도로 사용