블록 vs 인라인 요소

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 54번째.

HTML에서 요소는 페이지에 표시되는 방식에 따라 블록 레벨(block-level) 또는 인라인(inline) 요소로 분류됩니다. 이 두 가지 유형의 요소 간의 차이점을 이해하는 것은 구조가 잘 잡히고 시각적으로 매력적인 레이아웃을 만드는 데 매우 중요합니다. 블록 레벨 요소와 인라인 요소의 특징과 동작에 대해 살펴보겠습니다.

블록 레벨 요소

블록 레벨 요소는 항상 새로운 줄에서 시작하며, 가능한 한 왼쪽과 오른쪽으로 길게 늘어나 사용 가능한 전체 너비를 차지합니다. 이는 콘텐츠의 "블록"을 생성합니다.

블록 수준 요소의 예는 다음과 같습니다:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

인라인 요소

인라인 요소는 새로운 줄에서 시작하지 않으며, 콘텐츠를 수용하는 데 필요한 만큼의 너비만 차지합니다. 이를 통해 인라인 요소는 텍스트 줄 내부나 블록 레벨 요소 내부에서 흐르듯 배치될 수 있습니다.

인라인 요소의 예시는 다음과 같습니다:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

챌린지

쉬움

다양한 요소가 포함된 HTML 문서가 주어집니다. 여러분의 작업은 어떤 요소가 블록 레벨(block-level)이고 어떤 요소가 인라인(inline)인지 식별한 다음, 기본적인 CSS를 적용하여 그 차이를 강조하는 것입니다. 아래 단계를 따르세요:

모든 블록 레벨 요소(div, p, h1)를 대상으로 하는 CSS 규칙을 작성하세요. 해당 요소의 background-color를 lightgray로 설정하고 1px solid blue의 border를 추가하세요.
모든 인라인 요소(span, a, img)를 대상으로 하는 CSS 규칙을 작성하세요. 해당 요소의 background-color를 lightyellow로 설정하고 1px solid red의 border를 추가하세요.

블록 레벨 요소가 사용 가능한 전체 너비를 차지하고 새 줄에서 시작하는 반면, 인라인 요소는 필요한 만큼의 공간만 차지하고 줄 내에서 흐르듯 배치되는 방식을 관찰해 보세요.

치트 시트

HTML 요소는 표시 동작에 따라 블록 레벨(block-level) 또는 인라인(inline) 요소로 분류됩니다.

블록 레벨 요소

블록 레벨 요소는 새로운 줄에서 시작하며, 가능한 한 왼쪽과 오른쪽으로 길게 늘어나 사용 가능한 전체 너비를 차지합니다.

예시: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

인라인 요소

인라인 요소는 새로운 줄에서 시작하지 않으며, 콘텐츠를 채우는 데 필요한 만큼의 너비만 차지합니다. 이들은 텍스트 줄 내부나 블록 레벨 요소 내부에서 흐르듯 배치됩니다.

예시: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

직접 해보기

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>