블록 요소 - by. UXKM

요약 설명

블록 요소는 HTML에서 화면을 구성하는 데 중요한 역할을 하는 요소입니다.
블록 요소는 일반적으로 새로운 줄에서 시작하고, 페이지의 너비를 가득 채우는 형태로 표시됩니다. 다른 요소들과 수직으로 쌓이며, 페이지의 레이아웃을 결정하는 데 큰 영향을 미칩니다.

블록 요소는 보통 너비와 높이를 가지며, 블록 요소 내부에는 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.
이러한 특징으로 인해 블록 요소는 주로 섹션을 나누거나 웹 페이지의 레이아웃을 구성하거나 콘텐츠를 그룹화하는 데 사용됩니다.

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

블록 요소의 종류

HTML에서 주로 사용되는 몇 가지 블록 요소의 종류는 다음과 같습니다.

  1. <div>

    가장 일반적으로 사용되는 블록 요소로, 구역을 나누거나 스타일을 적용하는 데 사용됩니다.

  2. <p>

    단락을 나타내는 블록 요소로, 텍스트를 그룹화하여 하나의 단락으로 만듭니다.

  3. <h1> ~ <h6>

    제목을 나타내는 블록 요소로, 숫자가 작을수록 큰 제목을 나타냅니다.

  4. <header>

    문서의 머리말을 나타내는 요소로, 로고나 제목 등을 포함합니다.

  5. <nav>

    네비게이션 링크를 그룹화하는 요소로, 주로 메뉴를 표시합니다.

  6. <section>

    문서의 섹션을 정의하는 요소로, 주제별로 콘텐츠를 그룹화합니다.

  7. <article>

    독립적인 콘텐츠를 포함하는 요소로, 뉴스 기사나 블로그 글 등을 표시합니다.

  8. <aside>

    사이드바 콘텐츠를 정의하는 요소로, 주 콘텐츠와는 별도로 표시됩니다.

  9. <footer>

    문서의 바닥글을 나타내는 요소로, 저작권 정보나 연락처 등을 포함합니다.

  10. <ul>

    순서가 없는 목록을 나타내는 요소입니다. 리스트 아이템들은 점 또는 다른 기호로 표시되며, 주로 메뉴 항목이나 아이콘 리스트 등에 사용됩니다.

  11. <ol>

    순서가 있는 목록을 나타내는 요소입니다. 리스트 아이템들은 숫자 또는 다른 순서 기호로 표시되며. 주로 단계적인 절차나 순서가 있는 항목을 나열할 때 사용됩니다.

  12. <li>

    목록의 각 항목을 나타내는 요소입니다. <ul> 또는 <ol> 요소 내부에서 사용됩니다.

  13. <table>

    표를 나타내는 요소입니다. 행(<tr>)과 열(<td> 또는 <th>)로 구성되며, 주로 데이터를 표 형태로 표시할 때 사용됩니다.

  14. <form>

    사용자 입력을 받는 양식을 나타내는 요소입니다. 텍스트 입력, 체크박스, 라디오 버튼, 드롭다운 메뉴 등의 입력 컨트롤을 포함할 수 있으며, 데이터를 서버로 전송하거나 클라이언트 측에서 처리할 때 사용됩니다.

블록 요소의 특징

블록 요소는 웹 페이지의 구조를 정의하고 레이아웃을 형성하는 데 필수적이며, 다양한 형태의 콘텐츠를 구성하는 데 유용하게 사용됩니다.

한 줄 전체 차지

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

너비와 높이 설정

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

다른 요소 포함

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

시맨틱 구조 정의

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