한 줄 전체 차지
블록 요소는 보통 한 줄 전체를 차지합니다. 따라서 블록 요소 다음에 오는 요소는 항상 새로운 줄에서 시작합니다.
블록 요소 vs 인라인 요소 요약 설명
- HTML에는 블록 요소(block level element)와 인라인 요소(inline level element)라는 두 가지 종류의 요소가 있습니다.
- HTML의 대부분의 요소는 웹 브라우저에서 어떻게 보이는지를 결정하는 display 속성을 가지며, 주로 block 또는 inline 두 가지 값 중 하나를 가집니다.
- 단, 테이블(table)은 블록 요소로 간주되지만, display 속성은 table 입니다.
요약 설명블록 요소는 HTML에서 화면을 구성하는 데 중요한 역할을 하는 요소입니다.
블록 요소는 일반적으로 새로운 줄에서 시작하고, 페이지의 너비를 가득 채우는 형태로 표시됩니다. 다른 요소들과 수직으로 쌓이며, 페이지의 레이아웃을 결정하는 데 큰 영향을 미칩니다.블록 요소는 보통 너비와 높이를 가지며, 블록 요소 내부에는 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.
이러한 특징으로 인해 블록 요소는 주로 섹션을 나누거나 웹 페이지의 레이아웃을 구성하거나 콘텐츠를 그룹화하는 데 사용됩니다.블록 요소의
display
속성 값은 기본적으로block
입니다.
HTML에서 주로 사용되는 몇 가지 블록 요소의 종류는 다음과 같습니다.
가장 일반적으로 사용되는 블록 요소로, 구역을 나누거나 스타일을 적용하는 데 사용됩니다.
단락을 나타내는 블록 요소로, 텍스트를 그룹화하여 하나의 단락으로 만듭니다.
제목을 나타내는 블록 요소로, 숫자가 작을수록 큰 제목을 나타냅니다.
문서의 머리말을 나타내는 요소로, 로고나 제목 등을 포함합니다.
네비게이션 링크를 그룹화하는 요소로, 주로 메뉴를 표시합니다.
문서의 섹션을 정의하는 요소로, 주제별로 콘텐츠를 그룹화합니다.
독립적인 콘텐츠를 포함하는 요소로, 뉴스 기사나 블로그 글 등을 표시합니다.
사이드바 콘텐츠를 정의하는 요소로, 주 콘텐츠와는 별도로 표시됩니다.
문서의 바닥글을 나타내는 요소로, 저작권 정보나 연락처 등을 포함합니다.
순서가 없는 목록을 나타내는 요소입니다. 리스트 아이템들은 점 또는 다른 기호로 표시되며, 주로 메뉴 항목이나 아이콘 리스트 등에 사용됩니다.
순서가 있는 목록을 나타내는 요소입니다. 리스트 아이템들은 숫자 또는 다른 순서 기호로 표시되며. 주로 단계적인 절차나 순서가 있는 항목을 나열할 때 사용됩니다.
목록의 각 항목을 나타내는 요소입니다.
<ul>
또는 <ol>
요소 내부에서 사용됩니다.
표를 나타내는 요소입니다.
행(<tr>
)과 열(<td> 또는 <th>
)로 구성되며,
주로 데이터를 표 형태로 표시할 때 사용됩니다.
사용자 입력을 받는 양식을 나타내는 요소입니다. 텍스트 입력, 체크박스, 라디오 버튼, 드롭다운 메뉴 등의 입력 컨트롤을 포함할 수 있으며, 데이터를 서버로 전송하거나 클라이언트 측에서 처리할 때 사용됩니다.
블록 요소는 웹 페이지의 구조를 정의하고 레이아웃을 형성하는 데 필수적이며, 다양한 형태의 콘텐츠를 구성하는 데 유용하게 사용됩니다.
블록 요소는 보통 한 줄 전체를 차지합니다. 따라서 블록 요소 다음에 오는 요소는 항상 새로운 줄에서 시작합니다.
기본적으로 너비와 높이를 가지며, 요소의 크기를 조절할 수 있습니다.
블록 요소 내부에는 다른 블록 요소나 인라인 요소를 포함하여 복잡한 구조를 형성할 수 있습니다.
블록 요소는 웹 페이지의 시맨틱 구조를 형성하는 데 중요한 역할을 합니다.
예를 들어,
<header>
,
<nav>
,
<section>
,
<article>
,
<footer>
등의 시맨틱 요소들은 모두 블록 요소입니다.