HTML Span 태그 사용법 | 웹 개발 튜토리얼

소개

HTML  태그는 스타일링 목적으로 요소를 그룹화하는 데 사용됩니다. 구문 콘텐츠 (phrasing content) 를 위한 일반적인 컨테이너로 생각할 수 있습니다.  태그는 <div> 태그와 매우 유사하지만, 블록 레벨 요소인 <div>와 달리 인라인 요소입니다.  태그는 본질적으로 아무것도 나타내지 않습니다. 이 Lab 에서는  태그를 사용하여 스타일링 목적으로 요소를 그룹화하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 코드 추가하기

index.html 파일에서 <body> 태그 안에 다음 코드를 추가합니다.

<p>This is a <span>simple</span> example of using the span tag.</p>

여기서는 "simple"이라는 단어를  태그로 감싼 단락을 만들었습니다. 이는 이 태그의 사용법을 실제로 이해하는 데 도움이 될 것입니다.

Span 요소 스타일링

이제  태그 안에 감싸진 콘텐츠를 스타일링하는 방법을 살펴보겠습니다. 예를 들어, "simple"이라는 단어에 색상을 추가하려면 CSS 에서 color 속성을 사용할 수 있습니다.

<head> 태그 안에 다음 CSS 코드를 추가합니다.

<style>
  span {
    color: red;
  }
</style>

이 CSS 코드는  태그 안에 감싸진 모든 콘텐츠의 색상을 빨간색으로 변경합니다. "simple"이라는 단어를  태그로 감쌌으므로 빨간색으로 표시됩니다.

Span 태그와 다른 HTML 태그 사용하기

 태그는 다른 HTML 요소와 함께 사용할 수도 있습니다. <a> 태그와 함께 사용하는 방법을 살펴보겠습니다.

<body> 태그 안에 다음 HTML 코드를 추가합니다.

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

이 코드는 "link"라는 단어가  태그로 감싸져 있고 # URL 에 연결된 단락을 생성합니다.

링크 텍스트 스타일링

이제 링크된 텍스트를 스타일링하는 방법을 살펴보겠습니다. <head> 태그 안에 다음 CSS 코드를 추가합니다.

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

이 CSS 코드는 <a> 태그 안의 텍스트 색상을 녹색으로 설정하고 밑줄을 제거합니다.

이벤트 속성 추가하기

 태그는 전역 속성 (global attributes) 과 이벤트 속성 (event attributes) 을 모두 지원합니다. class 전역 속성을 사용하여 스타일을 적용하는 방법을 살펴보겠습니다.

아래와 같이 "simple" 단어를 감싸는  태그에 class 속성을 추가합니다.

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

<head> 태그 안에 다음 CSS 코드를 추가합니다.

<style>
  .example {
    font-size: 20px;
  }
</style>

이 CSS 코드는 example 클래스를 가진  태그 안의 내용의 글꼴 크기를 증가시킵니다.

시맨틱 (Semantic) 을 위한 Span 태그 사용

 태그는 자체적인 의미를 가지지 않지만, 감싸는 텍스트의 의미론을 전달하는 데 사용될 수 있습니다. 예를 들어, 날짜나 백분율을 감싸서 내부 텍스트가 특별한 의미를 가지고 있음을 나타낼 수 있습니다.

예를 들어, index.html 파일에 다음 코드를 추가합니다.

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

이 예제에서 90은  태그 안에 감싸져 있으며 score라는 클래스 이름을 갖습니다. 이렇게 함으로써  태그 안의 텍스트가 특별한 의미를 가지고 있음을 전달했습니다. 또한, 스크린 리더 (screen reader) 에 접근성 정보를 제공하기 위해 aria-label 속성을 추가했습니다.

요약

이 랩 (lab) 에서는 스타일링 (styling) 목적으로 HTML  태그를 사용하여 요소를 그룹화하는 방법을 배웠습니다. 또한  태그 내의 콘텐츠를 스타일링하는 방법, 다른 HTML 태그와 함께 사용하는 방법, 전역 속성 (global attributes) 및 이벤트 속성 (event attributes) 을 사용하는 방법, 그리고  태그를 사용하여 의미론 (semantics) 을 전달하는 방법을 배웠습니다.

HTML Span 태그로 요소 스타일링하기

소개