HTML에서 텍스트 조각을 위한 span 태그

예를 들어, 텍스트의 일부를 굵게 만들려면 b 태그를 사용해야 한다는 것을 이미 알고 계실 것입니다. 하지만, 텍스트 일부를 빨간색으로 칠하고 싶다면 어떻게 해야 할까요? 그런 경우를 위해 b 태그와 같은 태그는 존재하지 않습니다.

그 대신 특별한 태그 span가 있습니다. - 이 태그 자체로는 절대 아무것도 하지 않지만, 여기에 CSS 스타일을 적용하면 텍스트 조각에 원하는 효과를 추가할 수 있습니다.

예를 통해 살펴보겠습니다. 다음과 같은 텍스트가 있다고 가정해 봅시다:

<p>
	This is a paragraph with text.
</p>

"text"라는 단어를 빨간색으로 만들고 싶다고 해봅시다. 이 텍스트 조각을 span 태그로 감싸고 이 태그에 어떤 클래스를 부여합시다:

<p>
	This is a paragraph with <span class="red">text</span>.
</p>

이제 해당 클래스를 가진 요소를 빨간색으로 칠해 봅시다:

.red {
	color: red;
}

다음 코드가 주어졌습니다:

<p>
	Lorem ipsum <span class="xxx">dolor sit</span> amet.
</p>
<p>
	<span class="xxx">Lorem ipsum</span> dolor sit amet.
</p>

xxx 클래스를 가진 요소의 크기를 30px로 만드세요.