<span> 태그 | HTML et CSS

🔍 <span> 태그란?

✅ <span> 태그는 인라인 요소(inline element)로, 주로 텍스트를 감싸서 스타일을 적용하거나 특정 부분을 강조할 때 사용해!
✅ <div>와 다르게 레이아웃에 영향을 주지 않고, 텍스트 내부에서 작은 부분을 구분할 때 사용하는 태그야.

---

📌 <span>과 <div>의 차이

속성	<span>	<div>
디스플레이 유형	인라인(inline)	블록(block)
한 줄 안에서 사용 가능?	✅ 가능	❌ 안 됨 (새 줄로 감)
레이아웃 조정 가능?	❌ 불가능 (width, height 적용 안 됨)	✅ 가능
주요 용도	텍스트 일부 강조, 스타일 적용	컨테이너 역할 (레이아웃 구성)

---

📌 <span> 태그를 사용해야 하는 경우

✅ 1. 텍스트 일부만 스타일을 변경할 때

✔️ 예를 들어, "Design" 같은 작은 카테고리를 <p> 대신 <span>으로 감싸면 좋음.

<p>Category: <span class="highlight">Design</span></p>

.highlight {
    color: #7C19EE;
    font-weight: bold;
    background-color: #F2EAFD;
    padding: 4px 8px;
    border-radius: 4px;
}

🔹 이렇게 하면 "Design" 부분만 스타일을 따로 적용할 수 있어!

---

✅ 2. 문장 중 일부만 강조할 때

<p>My favorite color is <span style="color: red;">red</span>.</p>

✔️ 결과: "My favorite color is red." (이 부분만 빨간색)

---

✅ 3. 버튼 내부 텍스트 스타일 조정

<button>Click <span style="color: blue;">here</span></button>

✔️ "here" 부분만 파란색으로 강조 가능!

---

📌 <span>을 사용하지 않는 게 좋은 경우

❌ 큰 블록을 감싸는 용도로 사용하면 안 돼!
✔️ 레이아웃을 조정하려면 <div>를 써야 해.

❌ 잘못된 예시:

<span>
    <h1>Title</h1>
    <p>Content goes here...</p>
</span>

✔️ 이 경우 <div> 또는 <section>을 써야 맞아.

---

📌 네 코드에서 <span>을 쓰는 이유

🔹 현재 네 코드에서 "Design"은 작은 카테고리 요소야.

<div class="tag">
    <span>Design</span>
</div>

✔️ 이 부분에서 <span>을 쓰는 이유는:
1️⃣ "Design"은 작은 텍스트 덩어리(한 줄)라서 블록 요소(<div>, <p> 등)보다 <span>이 적합
2️⃣ CSS에서 색상, 배경 등을 쉽게 적용 가능
3️⃣ SEO 측면에서도 더 적절 (검색 엔진이 카테고리로 인식하기 쉽도록 함)

---

📌 결론

✅ <span> 태그는 텍스트 일부를 강조하거나 스타일을 적용할 때 사용
✅ 새 줄을 만들지 않으면서 스타일을 적용하려면 <span>이 적절!
✅ "Design" 같은 작은 카테고리는 <p>보다는 <span>이 더 좋은 선택

이제 이해됐어? 더 궁금한 거 있으면 질문해줘~! 😊🚀