[CSS] 인라인(inline) 요소 정의에 쓰이는, span

span 태그

<span> 태그는 HTML에서 인라인(inline) 요소를 정의할 때 사용되며, 스타일을 적용하거나 특정 부분의 내용에 대해 식별을 할 때 유용합니다. <span> 태그 자체는 어떤 시각적 변화도 주지 않지만, CSS를 사용하여 스타일을 추가하거나 JavaScript로 특정 부분을 조작할 때 식별자로 사용할 수 있습니다.

여기 몇 가지 <span> 태그의 주요 특징과 사용 방법을 설명드리겠습니다.

• 인라인 요소: <span> 태그는 인라인 요소로, 문서의 흐름을 방해하지 않고 텍스트 중간에 삽입될 수 있습니다.
• 스타일링: <span> 태그는 특정 텍스트 부분에 스타일을 적용하기 위해 사용됩니다. CSS 클래스나 스타일을 직접 적용하여 글자의 색상을 변경하거나 글꼴을 다르게 설정할 수 있습니다.
• 구분과 강조: <span>은 문서 내에서 특정 부분을 구분하거나 강조하기 위한 목적으로 사용될 수 있습니다. 예를 들어, 특정 단어나 문구에 다른 색상을 적용하거나, 마우스 오버 시 특별한 효과를 주고자 할 때 유용합니다.
• 자바스크립트와의 상호작용: <span> 태그에는 id나 class 속성을 사용하여 식별자를 부여할 수 있습니다. 이를 통해 JavaScript에서 해당 요소를 쉽게 찾아내고, 이벤트를 바인딩하거나 동적으로 스타일을 변경하는 등의 작업을 수행할 수 있습니다.

예를 들어, 다음과 같이 <span> 태그를 사용할 수 있습니다.

<p>
  여기에 <span class="highlight">강조할 텍스트</span>가 있습니다.
</p>

caption: span 적용

 

위 예제에서 class="highlight"는 해당 <span>에 스타일을 적용하기 위한 준비를 하는 것으로, CSS에서 .highlight 클래스에 대한 스타일을 정의하여 강조할 텍스트의 스타일을 변경할 수 있습니다.

 

<span> 태그는 시각적인 표현만을 목적으로 하지 않고, 웹 접근성을 향상시키거나, 검색 엔진 최적화(SEO)를 위해 문서의 중요한 부분을 강조하는 데에도 도움을 줄 수 있습니다. 예를 들어, 특정 단어나 구를 <span>으로 감싸고 aria-label이나 role 속성을 추가하여 스크린 리더가 해당 부분을 다르게 읽도록 할 수도 있습니다.

 

간단히 말해, <span> 태그는 HTML 문서에서 특정 텍스트에 대해 추가적인 스타일이나 의미를 부여하기 위해 사용되는 빈 캔버스와 같습니다. CSS와 JavaScript를 통해 다양한 방식으로 꾸미고 동작을 부여하여 웹 페이지의 특정 부분을 돋보이게 할 수 있습니다.