HTML 레퍼런스 북
블록 레벨 요소와 인라인 요소
요소의 유형은 '블록 레벨 요소'와 '인라인 요소'로 나누어집니다. 이 두 가지 요소에 대해 자세히 설명하겠습니다.
1. 블록 레벨 요소(Block-level Elements)
div, p, h1~h6, ul, li, ol, table, form, section, footer 등이 있다.
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 갖고 있습니다. 아래의 예시에서 마크업 했던 <h1>, <h2>, <p> 요소들은 블록의 성질을 갖고 있어 화면상 줄 바꿈 현상이 일어납니다. 즉, 나열될 수 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소</title>
</head>
<body>
<h1>블록 레벨 요소</h1>
<h2>블록 레벨 요소 성질</h2>
<p>줄 바꿈이 생깁니다.</p>
</body>
</html>
2. 인라인 요소(Inline Element)
span, a, em, i, strong, b, del, ins, sub, sup, textarea 등이 있다.
인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없어 행이 바뀌지 않고 한 줄로 나란히 출력됩니다. 아래의 예시에서 마크업 했던 <strong>, <span> 요소들이 인라인 성질을 갖고 있으며 행이 바뀌지 않고 한 줄로 나란히 출력됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 요소</title>
</head>
<body>
<strong>인라인 요소</strong>
<span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>