● 블록 수준 요소는 컨테이너의 전체 너비를 차지하고 요소 앞뒤에 새 줄을 만듭니다.
HTML에서 블록 수준 요소는 웹 페이지에서 단락, 제목 및 목록과 같은 더 큰 구조를 만드는 데 사용됩니다. 블록 수준 요소는 요소 뒤에 새 줄을 만들고 기본적으로 부모 컨테이너의 전체 너비를 차지하는 요소로 정의됩니다.
블록 수준 요소의 몇 가지 예는 다음과 같습니다.
- <div>: 스타일 또는 기능 목적을 위해 다른 요소를 함께 그룹화하는 데 사용됩니다.
- <p>: 텍스트의 단락을 정의하는 데 사용됩니다.
- <h1> ~ <h6>: 다양한 수준의 제목을 정의하는 데 사용됩니다.
- <ul> 및 <ol>: 순서가 없는 목록과 순서가 있는 목록을 각각 정의하는 데 사용됩니다.
- <table>: 테이블을 정의할 때 사용합니다.
블록 수준 요소는 다른 블록 수준 요소 내에 중첩될 수도 있으며 블록 수준 요소와 인라인 수준 요소를 모두 포함할 수 있습니다.
블록 수준 요소를 사용할 때 웹 페이지의 레이아웃과 흐름에 영향을 미칠 수 있다는 점을 기억하는 것이 중요합니다. 예를 들어 여러 <div> 요소를 사용하여 웹 페이지에 열을 만들면 응답성과 접근성에 문제가 발생할 수 있으므로 신중하게 사용하는 것이 중요합니다.
● 인라인 요소는 콘텐츠에 필요한 공간만 차지하며 전후에 줄 바꿈을 만들지 않습니다.
HTML에서 인라인 수준 요소는 웹 페이지에서 더 작은 구조를 만드는 데 사용되며 일반적으로 더 큰 블록 수준 요소 내에서 텍스트의 스타일을 지정하거나 서식을 지정하는 데 사용됩니다. 블록 수준 요소와 달리 인라인 수준 요소는 요소 뒤에 새 줄을 만들지 않고 콘텐츠를 표시하는 데 필요한 만큼의 너비만 차지합니다.
인라인 수준 요소의 몇 가지 예는 다음과 같습니다.
- <a>: 하이퍼링크를 생성하기 위해 사용합니다.
- <span>: 스타일 또는 기능 목적을 위해 다른 요소를 함께 그룹화하는 데 사용됩니다.
- <strong> 및 <em>: 각각 볼드체 및 이탤릭체 텍스트를 정의하는 데 사용됩니다.
- <img>: 웹 페이지에 이미지를 표시하기 위해 사용합니다.
- <입력>: 양식에 대한 입력 필드를 생성하는 데 사용됩니다.
인라인 수준 요소는 블록 수준 요소를 포함할 수 없지만 다른 인라인 수준 요소 내에 중첩될 수 있습니다. 또한 <div> 및 <p>와 같은 일부 블록 수준 요소는 인라인 수준 요소를 포함할 수 있습니다.
인라인 수준 요소를 사용할 때 더 작고 더 구체적인 용도를 위한 것이며 더 큰 구조를 만들거나 웹 페이지의 레이아웃을 수정하는 데 사용해서는 안 된다는 점을 기억하는 것이 중요합니다. 대신 이러한 목적을 위해 블록 수준 요소를 사용해야 합니다.
● 블록 요소와 인라인 요소의 차이점 비교
HTML에서 인라인 요소와 블록 수준 요소의 주요 차이점은 페이지에 표시되는 방식입니다. 인라인 요소는 문서의 텍스트 내에 표시되는 반면 블록 수준 요소는 페이지에서 사용 가능한 전체 너비를 차지하고 요소 뒤에 새 줄을 만듭니다.
다음은 인라인 요소와 블록 수준 요소의 차이점을 보여주는 예제 코드 스니펫입니다.
<!DOCTYPE html>
<html>
<head>
<title>Inline vs Block Elements</title>
<style>
.inline {
display: inline;
border: 1px solid red;
padding: 10px;
}
.block {
display: block;
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<p>Here are some <span class="inline">inline elements</span> and some <div class="block">block-level elements</div>.</p>
<p>The inline elements are displayed within the text of the paragraph, while the block-level elements take up the full width of the page and create a new line after the element.</p>
</body>
</html>이 코드에서는 .inline 및 .block이라는 두 개의 CSS 클래스를 정의했습니다. .inline 클래스는 display 속성을 inline으로 설정하고 .block 클래스는 display 속성을 block으로 설정합니다. 또한 각 요소에 보더와 패딩을 추가하여 더 잘 보이도록 했습니다.
HTML에서 inline 클래스가 있는 <span> 요소와 block 클래스가 있는 <div> 요소를 포함했습니다. <span> 요소는 인라인이므로 단락의 텍스트 내에 표시되는 반면 <div> 요소는 블록 수준이므로 페이지의 전체 너비를 차지하고 단락 다음에 새 줄을 만듭니다.
웹 브라우저에서 이 코드를 보면 단락의 텍스트 내에 인라인 요소가 표시되는 반면 블록 수준 요소는 페이지의 전체 너비를 차지하고 요소 뒤에 새 줄을 생성하는 것을 볼 수 있습니다.
'HTML, CSS, JavaScript' 카테고리의 다른 글
| 01 HTML 개요, 기본 구문 및 구조_5. 입력 요소로 간단한 양식 만들기 (0) | 2023.05.21 |
|---|---|
| 01 HTML 개요, 기본 구문 및 구조_4. 이미지 작업 (0) | 2023.05.20 |
| 01 HTML 개요, 기본 구문 및 구조_2. HTML 요소 (0) | 2023.05.13 |
| 01 HTML 개요, 기본 구문 및 구조_1. HTML 문서의 기본 구조 이해 (0) | 2023.05.11 |
| [HTML, CSS, JavaScript] 학습 로드맵_by ChatGPT (0) | 2023.05.08 |