[HTML] Chapter 03. 콘텐츠

블록(Block)과 인라인(Inline)

1. 블록
   • 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
   • 상자를 아래로 쌓는 것
2. 인라인(Inline)
   • 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
   • 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다.

차이점

블록은 자기가 차지할 수 있는 가로를 죄다 차지하는 반면, 인라인은 컨텐츠가 가지고 있는 공간 만큼만 차지한다.

 

포함 규칙
- 같은 형태의 다른 요소를 안에 포함할 수 있다.
  (블록 > 블록, 인라인 > 인라인)
- 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
- 인라인 요소는 블록 요소를 포함 할 수 없다. ("자식이 부모를 가질 수 없다". 포함관계 성립X)

 

---

 

콘텐츠 카테고리

• HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
• 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다.

메타데이터 콘텐츠 (Metadata Content)	문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
플로우 콘텐츠 (Flow Content)	웹 페이지상에 메타데이터를 제외하고, 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함
섹션 콘텐츠 (Section Content)	웹 문서의 구획(Section)을 나눌 때, 사용
헤딩 콘텐츠 (Heading Content)	섹션의 제목(Heading)과 관련된 요소
프레이징 콘텐츠 (Phrasing Content)	문단에서 텍스트를 마크업 할 때, 사용
임베디드 콘텐츠 (Embedded Content)	이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때, 사용되는 요소
인터렉티브 콘텐츠 (Interactive Content)	사용자와의 상호작용을 위한 컨텐츠 요소