HTML의 유용한 태그 <span>

이 포스트는 HTML의 <span> … </span> 태그에 관한 내용입니다.

이 태그는 인라인 요소를 묶기 위한 태그입니다. 본래 글꼴 모양을 지정하기 위한 태그로 <font> … </font> 태그가 있었으나 크기의 미세한 지정이나 배경 글자색 지정이 불가능한 등 글꼴 모양 설정에 제약이 심하고 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조와도 맞지 않아서 HTML 4.01 이후 권장하지 않는(deprecated) 태그가 되었다가 HTML5에서는 표준에서 제외되었습니다. 따라서 기존 <font> 태그의 역할은 이 <span> 태그가 대신하게 되었습니다.

<font> 태그와는 달리 이 <span> 태그는 별도의 속성값이 없이 인라인 CSS를 지정하거나 ID 또는 클래스를 지정하는 방식으로 CSS를 입혀서 사용합니다. 예를 들자면,

<p>
	일곱 빛깔 무지개:
	<span style="color: #ff0000;">빨강</span>,
	<span style="color: #ff7f00;">주황</span>,
	<span style="color: #ffff00;">노랑</span>,
	<span style="color: #00ff00;">초록</span>,
	<span style="color: #0000ff;">파랑</span>,
	<span style="color: #7f00ff;">남색</span>,
	<span style="color: #ff00ff;">보라</span>
</p>

이런 식으로 사용하는데 결과는 다음과 같습니다.

이렇게 CSS가 적용되어 색깔이 입혀졌음을 알 수 있습니다. 물론 글자색 뿐만 아니라 배경색, 글꼴, 크기 등 여러 종류의 모양을 지정할 수 있습니다. 이 예제와 같이 인라인으로 하는 방법 말고도 외부 CSS 파일 혹은 <style> 태그 안의 CSS로 ID나 클래스를 정의해 놓고 적용하는 방법도 가능합니다.

span.red    { color: #ff0000; }
span.orange { color: #ff7f00; }
span.yellow { color: #ffff00; }
span.green  { color: #00ff00; }
span.blue   { color: #0000ff; }
span.indigo { color: #7f00ff; }
span.purple { color: #ff00ff; }

<p>
	일곱 빛깔 무지개:
	<span class="red">빨강</span>,
	<span class="orange">주황</span>,
	<span class="yellow">노랑</span>,
	<span class="green">초록</span>,
	<span class="blue">파랑</span>,
	<span class="indigo">남색</span>,
	<span class="purple">보라</span>
</p>

이는 클래스를 미리 정의해 놓고 사용한 예제입니다. 이 역시 결과는 앞의 예제와 같습니다.