블록 요소 - by. UXKM

  • Publishing
  • HTML
  • 블록 요소 vs 인라인 요소
  • 블록 요소
요약 설명

블록 요소는 HTML 문서에서 콘텐츠를 구조화하고 레이아웃을 구성하는 데 사용되는 시맨틱 요소로, 일반적으로 새로운 줄에서 시작하며 부모 요소의 전체 가로 너비를 차지합니다.
또한 기본적으로 너비뿐 아니라 높이도 가질 수 있어, 시각적인 영역을 명확히 설정할 수 있습니다. 제목, 단락, 목록, 섹션 등과 같은 요소들이 여기에 속하며, 내부에는 다른 블록 요소나 인라인 요소를 자유롭게 포함할 수 있습니다. 이러한 특성 덕분에 블록 요소는 문서의 논리적 구획을 나누고, 웹 페이지의 시각적 흐름과 구조를 정의하는 데 핵심적인 역할을 합니다.

블록 요소의 display 속성 값은 기본적으로 block 입니다.

블록 요소 분류 및 대표 태그

시맨틱 구조 요소

  • <header> : 문서나 섹션의 머리말
  • <nav> : 주요 탐색 링크 그룹
  • <main> : 문서의 주요 콘텐츠 영역
  • <section> : 주제를 가진 구획
  • <article> : 독립적인 콘텐츠 단위 (예: 게시글)
  • <aside> : 보조 콘텐츠 영역 (광고, 관련 링크 등)
  • <footer> : 문서나 섹션의 바닥글

텍스트 구조 요소

  • <h1> ~ <h6> : 제목 요소 (계층적 구조)
  • <p> : 단락
  • <blockquote> : 인용문
  • <pre> : 서식이 유지된 텍스트

목록 관련 요소

  • <ul> : 순서 없는 목록
  • <ol> : 순서 있는 목록
  • <li> : 목록 항목
  • <dl> : 정의 목록
  • <dt> : 정의 용어
  • <dd> : 정의 설명

테이블 관련 요소

  • <table> : 표 전체
  • <caption> : 표 제목
  • <thead> : 표 머리글
  • <tbody> : 표 본문
  • <tfoot> : 표 바닥글
  • <tr> : 행(row)
  • <th> : 제목 셀
  • <td> : 일반 셀

폼 관련 요소

  • <form> : 입력 폼 전체
  • <fieldset> : 관련 입력 그룹
  • <legend> : 필드셋 제목
  • <label> : 입력 필드에 대한 라벨
  • <output> : 계산 결과 출력

미디어 및 기타

  • <figure> : 이미지나 미디어 콘텐츠 묶음
  • <figcaption> : figure의 설명
  • <hr> : 수평 구분선 (의미 단락 구분)
  • <div> : 비시맨틱한 구획 요소

블록 요소의 특징

요약 설명

블록 요소(Block-level element)는 HTML 문서에서 한 줄 전체의 영역을 차지하며, 다른 요소들과 줄바꿈이 자동으로 이루어지는 요소입니다. 일반적으로 구조를 구성하거나 묶는 용도로 사용되며, 내부에는 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.

한 줄 전체 차지

블록 요소는 보통 한 줄 전체를 차지합니다. 따라서 블록 요소 다음에 오는 요소는 항상 새로운 줄에서 시작합니다.

너비와 높이 설정

기본적으로 너비와 높이를 가지며, 요소의 크기를 조절할 수 있습니다.

다른 요소 포함

블록 요소 내부에는 다른 블록 요소나 인라인 요소를 포함하여 복잡한 구조를 형성할 수 있습니다.

시맨틱 구조 정의

블록 요소는 웹 페이지의 시맨틱 구조를 형성하는 데 중요한 역할을 합니다. 예를 들어, <header>, <nav>, <section>, <article>, <footer> 등의 시맨틱 요소들은 모두 블록 요소입니다.