| 파일:Devicon-html5-plain-wordmark.svg | |||||
| HTML의 주요 태그 목록 | |||||
|---|---|---|---|---|---|
| 분류 | 관련 태그 | ||||
| 문서 기본 구조 | <html> | <head> | <body> | <main> | <footer> |
| 메타데이터 | <title> | <meta> | <base> | <link> | |
| 콘텐츠 구획 | <header> | <nav> | <section> | <article> | <aside> |
| 텍스트 콘텐츠 | <h1>-<h6> | <p> | <div> | <span> | <pre> |
| 텍스트 형식 | <b> / <strong> | <i> / <em> | <small> | <sub> / <sup> | <mark> |
| 수정 표시 | <ins> | <del> | <s> | <u> | |
| 목록 | <ul> | <ol> | <li> | <dl> | <dt> / <dd> |
| 표 | <table> | <thead> / <tbody> | <tr> | <th> | <td> |
| 멀티미디어 | <img> | <audio> | <video> | <canvas> | <svg> |
| 임베드 | <iframe> | <embed> | <object> | <param> | |
| 스크립트 | <script> | <noscript> | <template> | <slot> | |
| 양식 | <form> | <input> | <button> | <select> / <option> | <textarea> |
| 구분선 | <br> | <hr> | |||
개요[편집 / 원본 편집]
<span> 태그는 HTML에서 가장 많이 쓰이는 태그 중 하나다. 특별한 의미는 없고 그냥 텍스트를 감싸서 스타일 먹이는 용도로 쓴다. div 태그의 인라인 버전이라고 생각하면 된다.
특징[편집 / 원본 편집]
기본 특징[편집 / 원본 편집]
아무런 스타일도 안 먹이면 그냥 평범한 텍스트처럼 보인다. 하지만 style 속성이나 class를 먹이면 엄청나게 다양한 효과를 낼 수 있다.
주요 특징을 정리하면 이렇다:
- 인라인 요소라서 줄바꿈이 안 된다.
- 열고 닫는 태그가 다 필요하다. (<span></span>)
- 자체적인 스타일이나 의미가 전혀 없다. 진짜 아무것도 없다.
- style, class, id 같은 속성으로 꾸밀 수 있다.
이럴 때 쓴다[편집 / 원본 편집]
span 태그는 보통 이런 용도로 쓴다:
- 텍스트 일부분만 색깔 바꾸기
- 특정 부분만 폰트 크기 키우기
- 마우스 올리면 뭔가 되게 하기
- 자바스크립트로 조작할 부분 지정하기
- 다국어 텍스트 구분하기
사용법[편집 / 원본 편집]
기초 공략[편집 / 원본 편집]
가장 기본적인 사용법은 이렇다:
그냥 이렇게 <span>감싸기만</span> 하면 아무 일도 안 일어난다.
근데 <span style="color: red;">이렇게 스타일 먹이면</span> 뭔가 달라진다!스타일 먹이기[편집 / 원본 편집]
style 속성으로 직접 꾸미기:
<!-- 색깔 바꾸기 -->
<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>class로 꾸미기[편집 / 원본 편집]
CSS 클래스를 만들어서 재사용하기:
<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>겹쳐서 쓰기[편집 / 원본 편집]
span 태그는 이렇게 겹쳐서 쓸 수도 있다:
<span style="color: blue;">
파란색 문장인데
<span style="font-weight: bold;">이 부분만 굵게</span>
썼다!
</span>꿀팁과 주의사항[편집 / 원본 편집]
이런 건 하지 말자[편집 / 원본 편집]
- 큰 덩어리를 감쌀 때는 div를 써라. span은 작은 텍스트용이다.
- 의미를 강조하고 싶을 땐 em이나 strong 태그를 쓰자.
- span 태그 안에 또 span 태그 넣는 걸 너무 남발하지 말자. 나중에 수정하기 개고생이다.
- 너무 많이 쓰면 HTML이 지저분해진다. 적당히 쓰자.
이런 건 알아두면 좋다[편집 / 원본 편집]
- 클래스 여러 개를 한번에 적용할 수 있다:
- 자바스크립트랑 같이 쓸 때는 id를 붙여주면 좋다.
- 스크린 리더 사용자를 위해서 필요하면 aria-label 속성도 써주자.
실전 예제[편집 / 원본 편집]
hover 효과 만들기[편집 / 원본 편집]
마우스 올리면 반응하는 텍스트:
<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>그라데이션 텍스트[편집 / 원본 편집]
화려한 그라데이션 효과:
<style>
.gradient-text {
background: linear-gradient(45deg, #ff0000, #00ff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<span class="gradient-text">엄청 화려한 텍스트!</span>관련 항목[편집 / 원본 편집]
브라우저 호환성[편집 / 원본 편집]
| 기능 | Chrome Chrome | Edge Edge | Firefox Firefox | Internet Explorer IE | Opera Opera | Safari Safari | Chrome Android Chrome Android | Firefox Android Firefox Android | Opera Android Opera Android | Safari iOS Safari iOS | Samsung Internet Samsung Internet | WebView Android WebView Android |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
span 태그
|
예 | 예 | 예 | 예 | 예 | 예 | 예 | 예 | 예 | 예 | 예 | 예 |
.svg){kind=link}
.svg){kind=link}
