HTML에서 특정 텍스트나 인라인 요소에만 스타일을 적용하고 싶다면 <span> 태그를 사용하면 됩니다. span 태그는 문서 흐름을 깨지 않으면서 인라인 요소들을 하나의 그룹으로 묶고, 해당 그룹에 CSS 스타일을 적용할 수 있도록 도와주는 컨테이너 역할을 합니다.
span 태그란 무엇인가?
<span> 태그는 자체적인 의미(시맨틱)를 가지지 않는 범용 인라인 컨테이너입니다. 주로 다음과 같은 목적으로 사용됩니다.
- 문단 내 일부 텍스트만 색상, 크기, 굵기 등으로 강조할 때
- 여러 인라인 요소를 하나로 묶어 동일한 스타일을 적용할 때
- JavaScript로 특정 부분만 조작해야 할 때
블록 단위로 묶고 싶다면 <div> 태그를, 인라인 단위로 묶고 싶다면 <span> 태그를 사용한다는 점을 기억하면 됩니다.
span 태그 사용 예제
아래 예제는 <p> 태그 안에 <span> 태그를 넣어 특정 텍스트에만 서로 다른 색상을 적용한 코드입니다.
예제 코드
<!DOCTYPE html> <html> <head> <title>HTML span Tag</title> </head> <body> <p>Java는 널리 사용되는 프로그래밍 언어입니다. <span style = "color:#FF0000;"> James Gosling이 개발했습니다.</span> 이것은 데모 텍스트입니다.</p> <p> <span style = "color:#8866ff;"> 현재 버전: 1.8</span></p> </body> </html>
코드 설명
- 첫 번째 문단에서는 "James Gosling이 개발했습니다."라는 문장만 빨간색(
#FF0000)으로 표시됩니다. - 두 번째 문단에서는 "현재 버전: 1.8"이라는 텍스트가 보라색(
#8866ff)으로 표시됩니다. - span 태그는 줄바꿈 없이 기존 텍스트 흐름 안에서 스타일이 적용되므로, 문단 전체가 아닌 원하는 부분만 정확하게 꾸밀 수 있습니다.
마무리
span 태그는 HTML 문서에서 가장 많이 쓰이는 인라인 스타일링 도구 중 하나입니다. 인라인 스타일 대신 CSS 클래스와 함께 사용하면 코드의 재사용성과 유지보수성이 더욱 좋아지니, 실무에서는 <span class="highlight">처럼 클래스를 지정해 활용하는 것도 추천합니다.