3.2.2 span 태그
span 태그는 인라인 요소를 그룹으로 묶을 때 사용합니다.
형식
<span></span>
다음 코드를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>span</title>
</head>
<body>
<p>영화 소개</p>
<p>이번 영화의 하이라이트 장면은 바로 여기입니다.</p>
</body>
</html>
코드의 p 태그에서 ‘하이라이트’ 텍스트 부분만 디자인을 다르게 적용하고 싶다면 어떻게 해야 할까요? 하나의 태그 안에 작성된 텍스트 일부만 디자인을 다르게 적용하려면 태그 안에서 공간을 분할해야 합니다. 이럴 때 span 태그를 사용합니다. 텍스트도 인라인 요소이기 때문에 다음 코드처럼 내부 콘텐츠를 span 태그로 그룹 지을 수 있습니다. 이렇게 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일을 적용할 수 있습니다. 참고로 현재는 스타일을 적용하기 전이므로 이대로 실행하면 ‘하이라이트’ 텍스트 부분에 변화가 없습니다.
03/02/span.html
<p>영화 소개</p>
<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>