📌 인라인 태그 vs 블록 태그, 차이가 뭘까..? 🚀

안녕하세요! 😊 HTML에서 중요한 개념인 인라인 태그와 블록 태그의 차이를 아시나요..?

매번 쓸 때마다 아무생각 없이 쓰다보니 CSS 할 때 막히더라구요..ㅠㅠ

이 개념을 잘 이해하면 HTML 구조를 더 효과적으로 설계할 수 있다고 합니다.

그래서 정리를 한번 해보았습니다! 같이 공부해요📖

💡 인라인 태그란?

**인라인 태그(Inline Elements)**는 콘텐츠의 크기만큼만 공간을 차지하는 태그예요.

즉, 한 줄 안에서 다른 요소들과 함께 배치될 수 있어요!

📌 주요 인라인 태그

태그	설명
<span>	텍스트의 일부를 감싸는 태그
<a>	링크를 만드는 태그
<strong>	글씨를 굵게 표시 (중요한 내용 강조)
<em>	기울임꼴(이탤릭)로 표시 (강조 효과)
<label>	폼 요소와 함께 사용되는 설명 태그
<img>	이미지를 삽입하는 태그
<input>	사용자 입력을 받는 태그
<button>	클릭 가능한 버튼 생성

✅ 인라인 태그 특징

✔️ 요소의 내용 크기만큼 공간을 차지함
✔️ 자동으로 줄바꿈되지 않음
✔️ width와 height 값을 적용할 수 없음
✔️ 한 줄에서 여러 개의 인라인 요소가 나란히 배치 가능

📌 인라인 태그 예제

<p>여기서 <span style="color: blue;">파란색 텍스트</span>만 강조됩니다.</p> <a href="#">클릭하세요!</a>

✅ 인라인 태그 <span>과 <a>가 한 줄 안에서 함께 사용됨

💡 블록 태그란?

**블록 태그(Block Elements)**는 한 줄 전체를 차지하는 태그예요.

즉, 다른 요소들과 같은 줄에서 함께 배치되지 않고 자동으로 줄바꿈이 발생해요!

태그	설명
<div>	레이아웃을 나누는 기본 블록 태그
<p>	문단(Paragraph)을 만드는 태그
<h1> ~ <h6>	제목을 표시하는 태그
<ul> / <ol>	목록을 만드는 태그 (순서 없는 목록/순서 있는 목록)
<li>	목록 항목을 나타내는 태그
<section>	특정 주제별 섹션을 나누는 태그
<article>	독립적인 콘텐츠를 나타내는 태그
<header> / <footer>	웹페이지의 헤더 및 푸터 영역을 만드는 태그
<form>	사용자 입력 폼을 만드는 태그

✅ 블록 태그 특징

✔️ 한 줄 전체를 차지하며 자동 줄바꿈 발생
✔️ width, height, margin, padding 속성을 자유롭게 설정 가능
✔️ 내부에 다른 블록 요소 또는 인라인 요소 포함 가능
✔️ 레이아웃을 구성할 때 주로 사용됨

📌 블록 태그 예제

<div style="background-color: lightgray; padding: 10px;">
   <h2>제목입니다</h2>
   <p>이것은 문단입니다. 블록 태그는 한 줄 전체를 차지합니다.</p>
</div>

✅ <div> 블록 요소 안에 <h2>와 <p>가 포함됨 ✅ 블록 요소는 자동으로 줄바꿈이 발생함

🎯 인라인 태그와 블록 태그의 차이점 비교!

비교 항목	인라인 태그	블록 태그
공간 차지	내용 크기만큼만 차지	한 줄 전체 차지
줄바꿈 여부	자동 줄바꿈 없음	자동 줄바꿈 발생
크기 조절	width, height 적용 불가	width, height 적용 가능
사용 용도	텍스트 스타일링, 링크	레이아웃, 콘텐츠 그룹화

📌 예제 코드: 인라인 태그 vs 블록 태그

<div style="background-color: yellow;">나는 블록 요소입니다.</div>
<span style="background-color: lightblue;">나는 인라인 요소입니다.</span>
<span style="background-color: lightgreen;">옆에 배치됩니다.</span>

✅ 블록 요소는 한 줄 전체를 차지하지만, 인라인 요소는 옆에 배치됨!

🎯 정리!

✔️ 인라인 태그 → 콘텐츠 크기만큼 차지하며 줄바꿈 없음 (<span>, <a>, <strong> 등)
✔️ 블록 태그 → 한 줄 전체를 차지하며 자동 줄바꿈 발생 (<div>, <p>, <h1> 등)
✔️ 레이아웃을 구성할 때는 블록 태그, 텍스트 스타일링할 때는 인라인 태그 사용!

📢 이제 인라인 태그와 블록 태그를 활용해 HTML을 더 깔끔하게 작성해보세요! 🚀

추가로 알면 좋은 내용이 있다면 댓글로 알려주세요! 😊