[STUDY] 블록 레벨 요소(Block-level Elements) 정리

1. <p> 태그 (Paragraph)

• 문단을 나타내는 블록 레벨 요소이다.
• 브라우저 기본 스타일이 적용되어, 문단과 문단 사이는 한 줄 간격으로 분리된다.

2. <hr> 태그 (Horizontal Rule)

• 이야기의 장면 전환이나 구획 내 주제 변경 등, 문단 레벨 요소에서 주제가 분리됨을 나타낸다.
• 블록 레벨 요소이며 브라우저에서는 가로줄로 표시된다.

3. <pre> 태그 (Preformatted)

• 미리 서식을 지정한 텍스트를 나타내는 블록 레벨 요소이다.
• HTML 코드에 작성한 내용과 공백 문자가 그대로 유지되며, 브라우저에는 고정폭 글꼴로 표시된다.
• 접근성 고려: <pre> 태그로 이미지나 도표를 만들 경우, 분명하고 간결한 대체 설명을 제공해야 한다. <figure>, <figcaption> 요소와 id, ARIA 속성을 조합하면 이미지처럼 표현하면서 대체 설명을 제공할 수 있다.

4. <blockquote> 태그

• 다른 곳의 내용을 인용한 인용문임을 나타내는 블록 레벨 요소이다.
• cite 속성을 사용해 인용문의 출처 URL을 지정할 수 있다.

5. <figure> 및 <figcaption> 태그

• <figure>: 사진, 일러스트, 도표, 코드 목록 등 독립적인 콘텐츠를 표시할 때 사용하는 블록 레벨 요소이다.
• <figcaption>: 부모 요소인 <figure> 내에 포함된 콘텐츠에 대한 설명 또는 범례를 나타낸다. 블록 레벨 요소이며, 반드시 <figure> 태그 안에 작성해야 한다.

6. <main> 태그

• 문서 내 주요 콘텐츠를 나타내는 블록 레벨 요소이다.
• 문서의 핵심 주제나 앱의 핵심 기능이 담긴 유일한 내용이어야 한다.
• 사이드바, 네비게이션, 저작권 정보, 로고 등 여러 문서에 걸쳐 반복되는 콘텐츠는 제외한다. (단, 검색 폼이 페이지의 주요 기능인 경우는 예외적으로 포함 가능하다.)
• 페이지의 개념적 구조를 바꾸지 않는 정보 제공용 태그이다.

7. <div> 태그 (Division)

• 콘텐츠를 분할하는 컨테이너로 사용되는 블록 레벨 요소이다.
• CSS로 스타일을 지정하기 전까지는 콘텐츠나 레이아웃에 아무런 영향을 주지 않는다.
• <article>, <section>, <nav> 등 의미를 가지는 시맨틱 요소가 적절하지 않을 때만 사용하는 것이 좋다.

8. 목록 관련 태그 (<ol>, <ul>, <li>)

• <ol> (Ordered List): 순서가 중요한 목록을 나타내는 블록 레벨 요소이다.
• <ul> (Unordered List): 순서가 중요하지 않은 목록을 나타내는 블록 레벨 요소이다. 브라우저에서는 글머리 기호(블릿)로 표현된다.
• <li> (List Item): <ol>이나 <ul>의 자식 요소로 들어가며 목록의 각 항목을 나타낸다.
• 참고: 목록 마커의 모양이나 순서 표기법은 HTML 속성(type)보다 CSS의 list-style-type으로 정의하는 것을 권장한다. 항목의 들여쓰기 역시 CSS margin 속성을 사용하는 것이 좋다. 목록은 필요한 만큼 중첩할 수 있다.

9. 설명 목록 관련 태그 (<dl>, <dt>, <dd>)

• <dl> (Description List): 설명 목록을 나타낸다. 주로 용어 사전이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.
• <dt> (Definition Term): 설명 목록에서 용어 또는 이름을 정의한다. 반드시 <dl> 태그 내에 위치해야 한다.
• <dd> (Definition Description): 앞선 <dt> 태그에 대한 설명, 정의, 또는 값을 제공한다.
• 구조: 하나의 <dt>에 여러 개의 <dd>를 연결하거나, 연속되는 여러 개의 <dt>에 하나의 <dd>로 묶어서 설명하는 것도 가능하다.