HTML 블록 요소와 인라인 요소 완벽 이해하기

HTML 블록 요소(Block Elements)란?

블록 요소는 화면에 표시될 때 요소 앞뒤로 자동으로 줄바꿈이 적용되는 요소입니다. 또한 사용 가능한 전체 너비를 차지하는 특징이 있습니다. 대표적인 블록 요소로는 <h1>부터 <h6>까지의 제목 태그, <article>, <aside>, <p>, <pre>, <ul>, <ol>, <address> 등이 있습니다.

블록 요소 예제

<address>, <p>, <h3> 등 블록 요소를 활용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<p>Click on the individual links to work on online compilers:</p>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have complier for <acronym title="JavaScript">JS</acronym> libraries.</p>
<address>
Contact us at <a href="mailto:contact@tutorialspoint.com">admin</a>.<br>
4th Floor,<br>
Incor9 Building, <br>
Kavuri Hills, <br>
Madhapur, Hyderabad,<br>
Telangana 500081
</address>
</body>
</html>

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

HTML 블록 요소와 인라인 요소 완벽 이해하기

HTML 인라인 요소(Inline Elements)란?

인라인 요소는 블록 요소와 달리 줄바꿈 없이 문장 안에서 자연스럽게 표시되는 요소입니다. 즉, 인라인 요소는 필요한 만큼의 너비만 차지하며, 같은 줄에서 다른 인라인 요소들과 나란히 배치될 수 있습니다. 대표적인 인라인 요소로는 <a>, <abbr>, <button>, <code>, <em>, <i>, <textarea>, <time> 등이 있습니다.

인라인 요소 예제

이번에는 인라인 요소인 <a>와 <acronym>을 HTML에서 구현한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have complier for <acronym title="JavaScript">JS</acronym> libraries.</p>
</body>
</html>

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

실행 결과

HTML 블록 요소와 인라인 요소 완벽 이해하기

마우스 커서를 JS 위에 올리면 <acronym> 태그의 title 속성으로 지정된 제목이 표시됩니다.

HTML 블록 요소와 인라인 요소 완벽 이해하기

정리

HTML 요소는 크게 두 가지 방식으로 화면에 배치됩니다. 블록 요소는 항상 새로운 줄에서 시작하고 전체 너비를 차지하는 반면, 인라인 요소는 줄바꿈 없이 콘텐츠 흐름 속에서 필요한 공간만 차지합니다. 이 두 가지 요소의 차이를 정확히 이해하면 웹 페이지 레이아웃을 더욱 효과적으로 설계할 수 있습니다.