HTML <span> 태그는 웹 페이지의 특정 부분 또는 문단 일부에 스타일을 적용할 수 있게 해주는 인라인 요소입니다. 주로 문단 안의 텍스트를 꾸미는 데 활용되며, 예를 들어 문장 속 한 단어의 색상만 바꾸고 싶을 때 유용합니다. <span> 태그는 기본적으로 아무런 스타일을 갖지 않습니다.
HTML로 웹 페이지를 만들다 보면 특정 요소만 골라서 스타일링하고 싶은 순간이 옵니다. 문장에서 특정 단어를 강조하거나, 링크 목록 중 하나만 눈에 띄게 만들고 싶은 경우가 대표적입니다.
바로 이럴 때 <span> 태그가 필요합니다. <span>은 웹 문서에서 특정 콘텐츠를 감싸는 범용 인라인 컨테이너로, 주로 스타일링 목적으로—특히 텍스트 스타일링에—널리 사용됩니다.
이 글에서는 예제와 함께 HTML <span> 태그를 활용해 웹 페이지 요소에 스타일을 적용하는 방법을 단계별로 살펴보겠습니다. 끝까지 읽으면 <span> 태그를 능숙하게 다룰 수 있게 될 것입니다.
HTML span 태그란?
<span> 태그는 웹 페이지의 일부분을 조작하는 데 사용됩니다. 주로 <p> 요소 내부에서 문단의 특정 부분에만 스타일을 적용할 때 쓰이며, 예를 들어 문단 속 단어 하나의 색상을 변경하는 데 활용할 수 있습니다.
<span> 태그 자체에는 기본 렌더링 방식이나 기본값이 없습니다. 즉, 어떤 속성도 지정하지 않고 사용하면 화면에 아무런 변화도 일으키지 않습니다.
따라서 <span> 태그는 CSS와 함께 사용되어 웹 페이지의 특정 요소 또는 여러 요소에 원하는 스타일을 적용하는 역할을 합니다. 여러 요소에 동일한 스타일을 한 번에 적용할 때도 매우 편리합니다.
HTML span 태그 문법
<span> 태그는 시작 태그(<span>)와 종료 태그(</span>)로 구성됩니다. 기본 문법은 다음과 같습니다.
<span></span>
<span> 태그에는 고유 속성이 없습니다. 예를 들어 <img> 태그에는 height, width 같은 전용 속성이 있지만, <span>은 스타일링을 CSS에 의존하기 때문에 그런 속성이 필요 없습니다. 대신 class, id, style 등 모든 HTML 전역 속성을 지원합니다.
<span> 태그는 자체적인 스타일이 없다는 점에서 <div> 태그와 비슷합니다. 하지만 <div>는 블록 요소로서 텍스트의 섹션이나 블록을 정의하는 데 사용되는 반면, <span>은 인라인 요소로서 문단처럼 문서의 특정 부분에 스타일을 적용하는 데 사용됩니다.
다음 섹션에서는 <span> 태그가 HTML에서 실제로 어떻게 작동하는지 몇 가지 예제를 통해 확인해 보겠습니다.
span 태그 활용 예제
이제 <span> 태그를 사용해 인라인 요소에 스타일을 적용하는 실제 코드 예제를 살펴보겠습니다. 첫 번째 예제는 문단에서, 두 번째 예제는 목록에서 활용하는 방법입니다.
문단에서 span 태그 사용하기
인디애나주 오크브리지에 있는 '프린글 앤 선스 베이커리'를 위한 웹 페이지를 디자인한다고 가정해 보겠습니다. 이 페이지는 빵집의 역사를 소개하는 내용을 담고 있으며, 사장님인 프린글 씨는 핵심 정보를 빨간색 텍스트로 강조해 달라고 요청했습니다.
다음 코드로 이 작업을 수행할 수 있습니다.
index.html
<p>프린글 앤 선스 베이커리는 1975년 제임스 프린글이 설립한 이래, <span class="redText">맛있는 구운 빵</span>과 커피를 오크브리지 지역에 제공해 왔습니다. 창업 이후 <span class="redText">수천 명</span>의 고객에게 사랑받고 있습니다.</p>
styles.css
.redText {
color: red;
}
위 코드의 실행 결과는 다음과 같습니다.
예제에서는 '맛있는 구운 빵'과 '수천 명'이라는 두 구절을 강조했습니다. 프린글 씨가 이 부분이 중요하다고 말씀하셔서, 해당 텍스트가 빨간색으로 표시되도록 처리한 것입니다.
먼저 <p> 태그로 문단 전체를 감싸 빵집의 역사를 담았습니다. 그다음, 빨간색으로 표시하고 싶은 구절만 <span> 태그로 감쌌습니다.
CSS 파일에서는 redText 클래스가 적용된 모든 요소의 글자색을 빨간색으로 지정했습니다. 덕분에 <span class="redText"> 태그를 사용할 때마다 해당 텍스트가 빨간색으로 바뀝니다.
이 경우 <span> 태그가 유용한 이유는 텍스트 중 특정 단어만 강조하고 싶었기 때문입니다. <p> 태그 자체에 빨간색 스타일을 적용할 수도 있지만, 그렇게 하면 문단 전체가 빨간색으로 표시되어 의도와 다른 결과가 됩니다.
목록에서 span 태그 사용하기
이번에는 프린글 앤 선스 베이커리가 웹사이트에 소셜 미디어 페이지 링크 목록을 추가해 달라고 요청했다고 가정해 보겠습니다.
빵집 측은 팀이 트위터와 페이스북에서 가장 활발하게 활동하고 있기 때문에 이 두 링크가 특히 중요하다고 강조했습니다. 따라서 해당 링크들을 연한 파란색으로 하이라이트해 달라는 요청을 받았습니다.
다음 코드로 이 작업을 수행할 수 있습니다.
index.html
<ul>
<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
<li><a href="instagram.com">Instagram</a></li>
</ul>
styles.css
.blue {
background: lightblue;
}
위 코드의 실행 결과는 다음과 같습니다.
HTML 코드에서는 <ul> 태그로 순서 없는 목록을 만들었습니다. 이 목록에는 세 개의 항목이 있으며, 각 항목은 <li> 태그로 감싸져 있습니다.
트위터와 페이스북 항목은 <span class="blue">와 </span>으로 감쌌습니다. 각 시작 태그에는 class 속성이 지정되어 있으며, 그 값은 'blue'입니다.
CSS에서는 .blue 클래스를 정의해, 이 클래스가 적용된 요소의 배경색을 연한 파란색(lightblue)으로 변경하도록 했습니다. 그 결과 HTML 코드에서 .blue 클래스를 가진 모든 링크의 배경색이 연한 파란색으로 바뀌었습니다.
인스타그램 링크는 <span> 태그로 감싸지 않았기 때문에 배경색이 변경되지 않았습니다.
마무리
HTML <span> 태그는 웹 페이지의 특정 요소에 스타일을 적용하기 위한 범용 컨테이너입니다. 기본적으로는 아무런 효과가 없지만, CSS와 함께 사용하면 원하는 요소에 다양한 스타일을 손쉽게 적용할 수 있습니다.
연습 삼아, 문장 속 한 단어를 모두 대문자로 표시하는 <span> 태그를 직접 만들어 보세요. CSS의 text-transform 속성을 활용하면 <span> 태그로 텍스트를 대문자로 변환할 수 있습니다.
이 글에서는 예제와 함께 HTML <span> 태그의 사용법을 살펴봤습니다. 이제 여러분도 프로 웹 개발자처럼 <span> 태그를 자유롭게 활용할 준비가 되었습니다!