HTML 블록 요소와 인라인 요소
이 글은 HTML 블록 요소와 인라인 요소에 대해 설명합니다.
이는 블록 레벨 요소와 인라인 요소의 차이점과 주요 블록 레벨 요소 및 인라인 요소에 대해 설명합니다.
YouTube Video
블록 레벨 요소와 인라인 요소
HTML에는 화면에 표시되는 방식을 결정하는 두 가지 주요 요소 범주가 있습니다: '블록 수준 요소'와 '인라인 요소'입니다. 이 요소들은 페이지 레이아웃에서 중요한 역할을 하며, 배치 방식에 직접적인 영향을 미칩니다. 여기에서 각 요소의 특성과 사용 방법에 대해 자세히 설명하겠습니다.
블록 수준 요소란 무엇입니까?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>블록 수준 요소는 일반적으로 페이지의 전체 너비를 차지하며 다른 요소와 별도의 줄에 나타납니다. 이 요소들에는 다른 블록 수준 요소나 인라인 요소를 포함할 수 있으며, 문서의 큰 구조를 정의합니다.
기능:
- 이 요소들은 새 줄에서 시작하며 가능한 한 너비를 확장합니다 (보통 상위 요소의 전체 너비를 차지함).
- 이 요소들은 다른 블록 요소들과 수직으로 분리되며, 요소 사이에 여백이 적용됩니다.
- 그 안에 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.
다음 블록 수준 요소들이 활용됩니다:.
<div>태그는 레이아웃을 구성할 때 흔히 사용됩니다.<p>태그는 단락을 정의하는 데 사용됩니다.<h1>에서<h6>까지는 제목을 정의하는 데 사용되는 요소입니다.<h1>은 가장 큰 제목이고,<h6>은 가장 작은 제목입니다.<ul>태그는 순서 없는 목록을 만듭니다.<ol>태그는 순서가 있는 목록을 만듭니다.<section>태그는 문서 내의 섹션을 정의합니다.
인라인 요소란 무엇입니까?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>인라인 요소는 다른 요소와 동일한 줄에 위치하며 일반적으로 콘텐츠 만큼의 너비만 차지합니다. 이러한 요소는 텍스트의 일부로 처리되며, 블록 수준 요소와 달리 전체 줄을 차지하지 않습니다.
기능:
- 요소는 동일한 줄에 나타나며 다른 인라인 요소와 나란히 놓입니다.
- 폭은 요소의 콘텐츠(텍스트 또는 이미지)에 따라 결정됩니다.
- 블록 수준 요소 안에 포함될 수 있지만 그 반대는 불가능합니다.
다음 인라인 요소들이 활용됩니다:.
<span>태그는 특정 스타일로 텍스트의 일부를 강조하는 데 사용됩니다.<a>태그는 하이퍼링크를 정의합니다.<img>태그는 이미지를 삽입하는 데 사용되는 요소입니다.<strong>은 중요한 텍스트를 강조합니다 (일반적으로 굵게 표시됨).<em>은 강조된 텍스트를 나타냅니다 (일반적으로 이탤릭체로 표시됨).
블록 수준 요소와 인라인 요소의 차이점
- 표시 방식: 블록 수준 요소는 새 줄에 표시되고 페이지의 전체 너비를 차지하며, 인라인 요소는 다른 요소와 동일한 줄에 표시되고 콘텐츠에 의해 너비가 결정됩니다.
- 내부 요소 처리: 블록 수준 요소는 블록 수준 요소와 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록 수준 요소를 포함할 수 없습니다.
- 레이아웃 역할: 블록 수준 요소는 주로 페이지의 레이아웃 구조를 만드는 데 사용되며, 인라인 요소는 텍스트와 링크와 같은 작은 요소를 정의합니다.
구별을 위한 주요 포인트
레이아웃 생성: <div>, <section>, <article>과 같은 블록 수준 요소를 사용하여 큰 섹션과 콘텐츠 블록을 정의합니다.
텍스트 꾸미기와 링크: <span>, <a>, <strong>, <em>과 같은 인라인 요소를 사용하여 텍스트의 일부를 꾸미거나 링크를 추가합니다.
블록 수준 요소와 인라인 요소의 혼합
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html><main>,<header>,<section>과 같은 블록 수준 요소는 사용되며, 일반적으로 새로운 줄에 렌더링되고 부모 요소의 전체 너비를 차지합니다.<a>,<strong>,<span>,<img>와 같은 인라인 요소는 사용되며, 블록 수준 요소 내에서 전체 너비를 차지하지 않고 줄 안에 배치됩니다.
인라인 요소를 블록 수준 요소 내에 포함하는 것은 일반적인 패턴입니다. 예를 들어, 단락(<p>) 내에 링크(<a>) 또는 강조(<strong>)를 포함하는 것이 일반적입니다. 그러나 인라인 요소 내에 블록 수준 요소를 포함할 수 없으므로 적절히 사용하는 것이 중요합니다.
요약
블록 수준 요소와 인라인 요소는 HTML 요소의 두 가지 기본 유형으로, 각각 고유한 역할을 가지고 있습니다. 블록 수준 요소는 페이지 레이아웃의 기초를 형성하며, 인라인 요소는 그 안의 세부 콘텐츠를 꾸미고 조작하는 데 사용됩니다. 이 두 가지 요소 유형을 이해하고 올바르게 활용하면 효율적인 HTML 코딩이 가능합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.