HTML: Block vs Inline

이번 글에서는  HTML에서 중요한 구분인 'Block 요소'와 'Inline 요소'입니다. 이전 글에서는 HTML의 기본적인 구조와 사용법, 그리고 필요성에 대해 알아봤습니다. 이번 글에서는 HTML의 두 가지 주요 요소 유형, 즉 블록(Block) 요소와 인라인(Inline) 요소를 중점적으로 살펴보며, 그 차이점과 활용 방법을 설명하겠습니다.

---

1. Block 요소와 Inline 요소란?

 

HTML 태그들은 크게 블록(Block) 태그와 인라인(Inline) 태그로 나뉩니다. 이들은 웹 페이지 내에서 어떻게 배치되고 서로 어떻게 상호작용하는지를 결정합니다.

 

• 블록(Block) 요소: 블록 요소는 항상 새로운 줄에서 시작하며, 가능한 한 넓은 영역을 차지합니다. 따라서 주로 페이지의 구조를 만드는 데 사용됩니다.
  블록요소가 사용되면 보통 수직적으로 아래로 쌓이며, 전체 컨테이너의 가로 너비를 차지합니다.
  예시로 `<div>`, `<h1>`부터 `<h6>`, `<p>`, `<form>` 등이 있습니다.

 

• 인라인(Inline) 요소: 인라인 요소는 문서의 텍스트 흐름 내부에 위치하며, 해당 컨텐츠만큼의 공간만 차지합니다. 따라서 주로 텍스트 내부나 문장 사이에 사용됩니다.
  즉 인라인요소들은 자신을 감싼 부모요소 안에서 좌우 방향으로 나열됩니다.
  예시로 `<span>`, `<a>`, `<img>` 등이 있습니다.

---

2. Block과 Inline의 차이

 

블록과 인라인 간 가장 큰 차이점은 배치 방식입니다:

 

블록(Block): 자신을 감싼 컨테이너가 허용하는 최대 넓이를 차지합니다. 자동으로 위아래 줄바꿈을 생성하여 다른 블럭 요소와 분리됩니다.

예시 코드:

<div>This is a block element</div>

<p>This is another block element</p>

위 코드에서 각각의 div와 p 요소는 새로운 줄에서 시작하며, 가능한 한 넓은 영역을 차지합니다.

 

인라인(Inline): 필요한 만큼의 넓이만 차지합니다. 줄바꿈 없이 다른 인라인 요소나 텍스트와 함께 한 줄에 배치됩니다.

 

예시 코드:

<p>This is <span>an inline</span> element.</p>

위 코드에서 span 요소는 문장 내부에 삽입되어 해당 컨텐츠만큼의 공간을 차지합니다.

---

3. CSS 'display' 속성으로 Block과 Inline 조작하기

 

CSS 'display' 속성을 사용하여 HTML 태그가 블록 혹은 인라인으로 동작할 것인지 지정할 수 있습니다:

 

• display:block;: 해당 태그를 블록 요소처럼 동작하게 합니다.

 

• display:inline;: 해당 태그를 인라인 요소처럼 동작하게 합니다.

 

예시 코드:

<span style="display:block;">This is a block element</span>

<div style="display:inline;">This is an inline element</div>

위 코드에서 span은 display:block; 스타일이 적용되어 블록요소처럼 작동하고, div는 display:inline; 스타일이 적용되어 인라인요소처럼 작동합니다.

---

4. 활용 사례

 

블록과 인라인은 HTML 웹 페이지 디자인에서 필수적입니다:

 

• 블로그: 포스트의 제목(`<h1>`), 단락(`<p>`) 등은 블록 요소로, 강조 텍스트(`<strong>`), 링크(`<a>`) 등은 인라인 요소로 사용됩니다.

 

• 쇼핑몰: 상품 설명(`<div>` or `<p>`)은 블록 요소로, 상품 가격 내부의 할인율(`<span>`) 등은 인라인 요소로 사용됩니다.

---

5. 결론

 

HTML에서 'Block'과 'Inline'은 웹 페이지의 구조와 디자인을 결정하는 중요한 개념입니다. 이들을 적절하게 활용함으로써 효과적이고 깔끔한 웹 페이지 레이아웃을 만들 수 있습니다.

 

하지만 이러한 배치와 디자인도 CSS와 함께 사용함으로써 완전히 조절하고 최적화할 수 있습니다. 따라서 HTML에 대한 깊은 이해는 물론 CSS에 대한 지식도 필요합니다.

728x90

반응형