- slide 1 of 23, currently active
- slide 2 of 23
- slide 3 of 23
- slide 4 of 23
- slide 5 of 23
- slide 6 of 23
- slide 7 of 23
- slide 8 of 23
- slide 9 of 23
- slide 10 of 23
- slide 11 of 23
- slide 12 of 23
- slide 13 of 23
- slide 14 of 23
- slide 15 of 23
- slide 16 of 23
- slide 17 of 23
- slide 18 of 23
- slide 19 of 23
- slide 20 of 23
- slide 21 of 23
- slide 22 of 23
- slide 23 of 23
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>