[HTML] 블럭요소(Block) VS 인라인요소(Inline)

 

안녕하세요, 김데이 입니다!

웹을 구성하는 태그는 지난 "시맨틱 태그(Semantic Tags)"처럼 각 기능별 특징이 있는 태그들이 있는가 하면, 태그의 성질에 따라서 "블럭 요소 (Block Element)"와 "인라인 요소 (Inline Element)"로도 구분이 가능합니다. 오늘은 이 부분에 대해 알아보도록 하겠습니다! 

 

시맨틱 태그 알아보기 : https://theday365.tistory.com/92

[HTML 기초] 시맨틱 태그(Semantic Tags)의 종류와 역할

 

[대표사진] 블럭 요소 vs 인라인 요소 비교

 

 

---

 

1. 블록 요소 (Block Element)

우선 "블럭 요소 (Block Element)"의 경우 이름에서 느껴지는 바와 같이 태그를 사용하면 하나의 덩어리 표현되는 태그들을 말합니다. 이 덩어리는 코드로 작업 했을 때, 한 줄 전체를 차지하기 때문에 이어지는 태그들은 자동 줄 바꿈 되어 다음 줄(새로운 줄)에서 시작하게 됩니다. "블럭 요소 (Block Element)"안에는 성질이 동일한 "블럭 요소 (Block Element)"와 성질이 다른 "인라인 요소 (Inline Element)" 모두를 포함하여 작성이 가능합니다. 

 

📌 블럭 요소의 대표적인 특징

• 한 줄을 통째로 차지 (가로 전체를 사용)
• 기본적으로 width: 100%을 차지함
• 내부에 다른 블록 요소나 인라인 요소 포함 가능
• 일반적으로 페이지의 레이아웃을 구성하는 태그들이 블록 요소

📌블럭 요소인 태그 목록

태그 명	태그 설명
<div>	레이아웃을 위한 기본 컨테이너
<p>	문단(Paragraph)
<h1> ~ <h6>	제목(Heading)
<section>	콘텐츠 섹션
<article>	독립적인 콘텐츠 블록
<header>	머리글(헤더) 영역
<footer>	바닥글(푸터) 영역
<nav>	내비게이션 메뉴
<aside>	사이드바 영역
<table>	표(Table)
<ul>, <ol>	순서 없는 리스트, 순서 있는 리스트
<li>	리스트 항목(Item)
<form>	입력 폼

 

 

 

2. 인라인 요소 (Inline Element)

"인라인 요소 (Inline Element)"는 "블럭 요소"와는 정반대로 사용한 만큼의 공간만 차지하는 태그입니다. 그래서 "인라인 요소"를 사용하여 글씨를 쓰거나, 컨텐츠를 삽입해도 줄 바꿈 없이 사용되며 해당 콘텐츠만큼의 공간을 차지 한 뒤 다음 태그가 이어서 오게 됩니다. "인라인 요소" 안에는 "인라인 요소"만 사용할 수 있고, "블록 요소"는 사용하면 안됩니다!

 

📌 인라인 요소의 대표적인 특징

• 줄 바꿈 없이 한 줄 안에서 다른 요소와 함께 사용 가능
• 콘텐츠 크기만큼만 공간을 차지
• 블록 요소 안에서만 사용 가능 (블록 요소 안에 배치됨)
• 텍스트 관련 태그들이 주로 인라인 요소

📌인라인 요소인 태그 목록

태그 명	태그 설명
<span>	텍스트 일부를 감싸는 컨테이너
<a>	하이퍼링크 (링크)
<strong>, <b>	굵은 글씨  -  중요 강조 / 시각적 강조
<em>, <i>	기울임   -  중요 강조 / 시각적 강조
<u>	밑줄
<mark>	하이라이트 (배경색 강조)
<code>	코드 블록 (프로그래밍 코드)
<img>	이미지 삽입
<br>	줄 바꿈 (새 줄 추가)
<input>	사용자 입력 필드
<button>	버튼
<label>	폼 요소의 라벨

 

 

 

3. 블록 요소 vs 인라인 요소 차이점

그럼 지금까지 설명드린 내용을 바탕으로 각각 어떠한 차이점이 있는지 한눈에 알아보겠습니다!

비교 항목	블록 요소 (Block Element)	인라인 요소 (Inline Element)
주 사용 목적	레이아웃 구성 (섹션, 문단, 컨테이너)	텍스트 스타일링, 링크, 이미지 삽입 등
사용 공간	기본적으로 부모 컨테이너의 100% 차지	콘텐츠 크기만큼만 공간 차지
줄 바꿈	자동으로 줄 바꿈 발생 (한 줄 전체 차지)	줄 바꿈 없음 (현재 줄 안에서만 배치)
사용 방법	블록 요소 + 인라인 요소 포함하여 사용 가능	블록 요소 포함 불가, 인라인 요소만 포함하여 사용 가능

 

블럭 요소와 인라인 요소 조합하여 사용하기

 

---

 

코딩을 하다보면 태그를 중첩하여 쓰는 일이 다반사인데, 이처럼 "블럭 요소 (Block Element)"와 "인라인 요소 (Inline Element)"의 특징을 잘 지켜가며 작성하는 것이 올바른 코딩이라고 할 수 있겠습니다. 

 

궁금한 점 있으면 편하게 댓글 주세요.

감사합니다 :)