HTML/태그/span 편집하기

{{틀:html_태그}}
== 개요 ==
<code><nowiki><span></nowiki></code> 태그는 HTML에서 가장 많이 쓰이는 태그 중 하나다. 특별한 의미는 없고 그냥 텍스트를 감싸서 스타일 먹이는 용도로 쓴다. div 태그의 인라인 버전이라고 생각하면 된다.

== 특징 ==
=== 기본 특징 ===
아무런 스타일도 안 먹이면 그냥 평범한 텍스트처럼 보인다. 하지만 style 속성이나 class를 먹이면 엄청나게 다양한 효과를 낼 수 있다. 

주요 특징을 정리하면 이렇다:
* 인라인 요소라서 줄바꿈이 안 된다.
* 열고 닫는 태그가 다 필요하다. (<nowiki><span></span></nowiki>)
* 자체적인 스타일이나 의미가 전혀 없다. 진짜 아무것도 없다.
* style, class, id 같은 속성으로 꾸밀 수 있다.

=== 이럴 때 쓴다 ===
span 태그는 보통 이런 용도로 쓴다:
* 텍스트 일부분만 색깔 바꾸기
* 특정 부분만 폰트 크기 키우기
* 마우스 올리면 뭔가 되게 하기
* 자바스크립트로 조작할 부분 지정하기
* 다국어 텍스트 구분하기

== 사용법 ==
=== 기초 공략 ===
가장 기본적인 사용법은 이렇다:
<syntaxhighlight lang="HTML">
그냥 이렇게 <span>감싸기만</span> 하면 아무 일도 안 일어난다.
근데 <span style="color: red;">이렇게 스타일 먹이면</span> 뭔가 달라진다!
</syntaxhighlight>

=== 스타일 먹이기 ===
style 속성으로 직접 꾸미기:
<syntaxhighlight lang="HTML">
<!-- 색깔 바꾸기 -->
<span style="color: red;">빨간색</span>
<span style="color: #FF5733;">이상한 주황색</span>

<!-- 크기 바꾸기 -->
<span style="font-size: 20px;">큰 글씨</span>
<span style="font-size: 8px;">아주 작은 글씨</span>

<!-- 배경색 넣기 -->
<span style="background-color: yellow;">형광펜 효과</span>

<!-- 여러 개 한번에 적용 -->
<span style="color: blue; font-size: 24px; font-weight: bold;">
   완전 튀는 글씨
</span>
</syntaxhighlight>

=== class로 꾸미기 ===
CSS 클래스를 만들어서 재사용하기:
<syntaxhighlight lang="HTML">
<style>
.highlight { background-color: yellow; }
.big-red { color: red; font-size: 24px; }
.fancy {
   color: purple;
   text-shadow: 2px 2px 2px gray;
   font-style: italic;
}
</style>

<span class="highlight">형광펜</span>
<span class="big-red">큰 빨간 글씨</span>
<span class="fancy">뭔가 멋있어 보이는 글씨</span>
</syntaxhighlight>

=== 겹쳐서 쓰기 ===
span 태그는 이렇게 겹쳐서 쓸 수도 있다:
<syntaxhighlight lang="HTML">
<span style="color: blue;">
   파란색 문장인데
   <span style="font-weight: bold;">이 부분만 굵게</span>
   썼다!
</span>
</syntaxhighlight>

== 꿀팁과 주의사항 ==
=== 이런 건 하지 말자 ===
* 큰 덩어리를 감쌀 때는 div를 써라. span은 작은 텍스트용이다.
* 의미를 강조하고 싶을 땐 em이나 strong 태그를 쓰자.
* span 태그 안에 또 span 태그 넣는 걸 너무 남발하지 말자. 나중에 수정하기 개고생이다.
* 너무 많이 쓰면 HTML이 지저분해진다. 적당히 쓰자.

=== 이런 건 알아두면 좋다 ===
* 클래스 여러 개를 한번에 적용할 수 있다: <code><span class="highlight big-text fancy"></code>
* 자바스크립트랑 같이 쓸 때는 id를 붙여주면 좋다.
* 스크린 리더 사용자를 위해서 필요하면 aria-label 속성도 써주자.

== 실전 예제 ==
=== hover 효과 만들기 ===
마우스 올리면 반응하는 텍스트:
<syntaxhighlight lang="HTML">
<style>
.hover-me {
   cursor: pointer;
   transition: all 0.3s;
}
.hover-me:hover {
   background-color: yellow;
   font-size: 1.2em;
}
</style>

<span class="hover-me">여기에 마우스를 올려보세요!</span>
</syntaxhighlight>

=== 그라데이션 텍스트 ===
화려한 그라데이션 효과:
<syntaxhighlight lang="HTML">
<style>
.gradient-text {
   background: linear-gradient(45deg, #ff0000, #00ff00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
</style>

<span class="gradient-text">엄청 화려한 텍스트!</span>
</syntaxhighlight>

== 관련 항목 ==
* [[HTML]]
* [[CSS]]
* [[div 태그]]
* [[인라인 요소]]

== 브라우저 호환성 ==
{{브라우저 호환
|기능=<code>span</code> 태그
|chrome=예
|edge=예
|firefox=예
|ie=예
|opera=예
|safari=예
|chrome_android=예
|firefox_android=예
|opera_android=예
|safari_ios=예
|samsung_internet=예
|webview_android=예
}}

== 각주 ==
<references/>

[[분류:HTML]]
[[분류:웹 개발]]
[[분류:인라인 요소]]