HTML <span> 태그 – 올바른 이해와 사용 방법

`<span>` 태그의 정의 및 사용법

<span> 태그는
자체적으로 특별한 의미가 전혀 없는 인라인 컨테이너로
단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그입니다.

<span>의 "span"이라는 단어는 영어로 "범위" 또는 "간격"을 의미합니다.

<span>태그는 자체적으로 특별한 의미가 전혀 없지만, 다음의 목적으로 사용됩니다.

스타일을 적용하기 위한 CSS 선택자로 사용하거나,
HTML 속성을 적용하기 위한 범위를 나타내기 위해 주로 사용되거나
자바스크립트에서 특정 부분을 선택하거나 조작하는 데 사용하거나,
오직 시각적 스타일을 위한 장식용 태그로 사용됩니다.

의미가 있는 텍스트에 관련된 마크업(예를 들어, <del>이나 <ins>)를 사용할 수 없는 상황에서만 <span> 태그를 사용하세요.

`<span>`과 `<div>` 태그와의 차이점

<div> 태그는
레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그입니다.

HTML <div> 태그

<div> 태그도 <span> 태그와 마찬가지로 자체적으로는 특별한 의미가 전혀 없습니다.
하지만 서로 다른 용도로 사용됩니다.

div 태그와 span 태그의 차이점 비교
`<div>`	레이아웃(블록이나 구획)을 구성하거나 그룹화된 마크업이나 콘텐츠에 스타일이나 자바스크립트를 적용하기 위한 컨테이너나, HTML 속성을 적용하기 위한 범위를 나타내기 위한 컨테이너로 사용합니다.
`<span>`	단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 자바스크립트를 적용하기 위한 범위를 감싸주거나, HTML 속성을 적용하기 위한 범위를 감싸주기 위해 사용됩니다.

<span> 태그를 레이아웃(블록이나 구획)을 구성하는데 사용하지 마세요!
<div> 태그가 더 적당합니다.

활용 예제

<span> 태그는 웹사이트를 제작할 때 가장 많아 사용하는 태그들 가운데 하나입니다.
다양한 활용 예제를 통해서 <span> 태그의 사용 방법에 대해 알아보겠습니다.

단순 텍스트에 스타일을 적용하기

다음은 단순 텍스트에 스타일을 적용하기 위한 범위를 나타내기 위해 <span> 태그를 사용한 예제입니다.

HTML

<p>
    빛의 삼원색은
    <span style="color: red;">빨강</span>,
    <span style="color: green;">초록</span>,
    <span style="color: blue;">파랑</span>으로
    구성되어 있습니다.
</p>

HTML 속성을 적용하기

다음은 HTML 속성을 적용하기 위한 범위를 나타내기 위해 <span> 태그를 사용한 예제입니다.

HTML lang 속성

위 예제는 웹 페이지에 다른 언어로 된 내용이 포함되어 있으면 해당 내용을 둘러싼 요소에 lang 속성을 추가하는 것을 보여줍니다.

자바스크립트에서 특정 부분을 선택하거나 조작하기

자바스크립트를 사용해서 HTML의 특정 부분을 선택하거나 조작해야 할 경우가 있습니다.
<span> 태그는 특별한 의미가 없기 때문에 스크립트를 위한 범위를 위해 감싸주기에 적절합니다.

HTML

<p>
    자바스크립트로 선택하거나 조작할 수 있는
    <span id="target-span" style="background-color: gold;">특정 부분이</span>
    있습니다.
</p>
<button type="button" id="target-span-btn">텍스트 변경하기</button>

<script>
  // 자바스크립트를 사용하여 버튼을 클릭하면 특정 span 요소의 텍스트를 변경합니다.
    const btn = document.getElementById("target-span-btn");
    
    btn.addEventListener("click", () => {
        const targetSpan = document.getElementById("targets-pan");
        targetSpan.innerText = "변경된 텍스트가";
  });
</script>

오직 시각적 스타일을 위한 장식용 태그

<span> 태그는 자체적으로 특별한 의미가 전혀 없기 때문에 오직 스타일을 위한 시각적 장식용 태그로 사용하기에 적합니다.

다음은 <span> 태그로 오직 스타일을 위한 시각적 장식용 태그로 활용한 예제입니다.
<button> 태그의 텍스트 옆에 시각적 장식용으로 화살표를 표시합니다. 이 화살표는 자체적으로는 특별한 의미가 없는 화살표입니다. 이럴 경우 스타일을 위한 장식용으로 <span> 태그를 사용하는 것이 적절합니다.

HTML

<button type="button" id="toggle-button">
    <!-- 단순 텍스트에 스타일을 적용하기 위해 사용 -->
    <span class="toggle-button-text">클릭하기</span>
    <!-- 오직 시각적 스타일을 위한 장식용 태그로 사용: 화살표를 표시 -->
    <span aria-hidden="true" class="toggle-button-arrow"></span>  
</button>

aria-hidden="true"는 스크린 리더 및 보조 기술을 사용하는 것으로, aria-hidden 속성의 값이 true로 설정되면 해당 요소와 그 안에 포함된 콘텐츠는 접근성 기술을 통해 감지되지 않습니다. 위 예제에서는 <span> 태그가 오직 시각적 장식으로만 활용되었기 때문에 웹접근성 향상을 위해 사용되었습니다.

CSS

#toggle-button {
    padding: 0.5em 1em;
    background: none;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-button-text {
    margin-right: 1em;
}
.toggle-button-arrow { /* 화살표를 표시 */
    display: inline-flex;
    width: 0.7em;
    height: 0.7em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(-45deg) translateY(-0.3em);
}