메뉴 닫기

[HTML/CSS] 태그의 정의 및 사용법

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

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

<span> 태그는 HTML에서 인라인(inline) 요소들을 그룹화하기 위한 특별한 의미가 없는(non-semantic) 컨테이너(container)입니다. 즉, <span> 자체만으로는 시각적인 변화나 특별한 의미를 가지지 않지만, 주로 CSS로 스타일을 적용하거나 JavaScript로 특정 부분을 제어하기 위해 사용됩니다.

주요 특징

  1. 인라인 요소 (Inline Element)

    • 줄 바꿈 없이 다른 인라인 요소들과 같은 줄에 배치됩니다.

    • 내용(content)의 너비만큼만 공간을 차지합니다. (<div> 같은 블록 레벨 요소와 대비됩니다.)

  2. 의미 없음 (Non-semantic)

    • <h1>(제목), <p>(문단), <strong>(중요) 태그처럼 내용의 의미를 나타내지 않습니다.

    • 단순히 스타일링이나 스크립트 적용을 위한 ‘갈고리(hook)’ 역할을 합니다.

사용법 및 목적

<span> 태그는 주로 다음과 같은 목적을 위해 사용됩니다.

  1. CSS 스타일링: 텍스트의 특정 부분(단어, 구절 등)에만 다른 스타일(색상, 폰트 크기, 배경색 등)을 적용하고 싶을 때 사용합니다.

  2. JavaScript 제어: 특정 텍스트나 인라인 요소 그룹을 JavaScript로 선택하여 내용을 변경하거나 이벤트를 추가하는 등의 조작을 할 때 사용합니다.

기본 구문

<span>내용(텍스트 또는 다른 인라인 요소)</span>
  1. 텍스트 일부 스타일링:

    <p>이 문장에서 <span style="color: red; font-weight: bold;">이 부분</span>만 강조하고 싶습니다.</p>

    결과: 문장 내에서 “이 부분” 텍스트만 빨간색과 굵은 글씨로 표시됩니다.

  2. CSS 클래스(Class) 또는 ID와 함께 사용: (더 일반적이고 권장되는 방식)

    <style>
      .highlight {
        background-color: yellow;
        font-style: italic;
      }
      #special-word {
        text-decoration: underline;
      }
    </style>
    <p>문서의 <span class="highlight">중요한 부분</span>을 강조하고, <span id="special-word">특별한 단어</span>에는 밑줄을 긋습니다.</p>

    결과: “중요한 부분”은 노란색 배경과 이탤릭체로, “특별한 단어”는 밑줄이 적용됩니다.

  3. JavaScript와 함께 사용:

    <p>카운트: <span id="counter">0</span></p>
    <script>
      let count = 0;
      const counterElement = document.getElementById('counter');
    
      setInterval(() => {
        count++;
        counterElement.textContent = count; // span 태그 안의 텍스트를 업데이트
      }, 1000);
    </script>

    결과: 1초마다 <span> 태그 안의 숫자가 1씩 증가합니다.

<div> 태그와의 차이점:

특징 <span> 태그 <div> 태그
요소 유형 인라인(Inline) 요소 블록(Block) 레벨 요소
줄 바꿈 없음 (다른 요소와 같은 줄에 배치) 있음 (기본적으로 너비 전체를 차지하고 줄 바꿈)
주요 용도 텍스트 일부 등 작은 범위 그룹화, 스타일링 큰 영역 구분, 레이아웃 구조화, 스타일링
기본 너비 내용(content) 만큼 부모 요소의 100%

주의사항 및 권장사항:

  • 시맨틱 태그 우선 사용: 강조는 <strong>이나 <em>, 하이라이트는 <mark> 등 의미에 맞는 시맨틱 태그가 있다면 먼저 사용하는 것이 웹 접근성과 SEO에 좋습니다. <span>은 적절한 시맨틱 태그가 없을 때 스타일링이나 스크립팅 목적으로 사용하는 것이 좋습니다.

  • 남용 금지: 꼭 필요한 경우가 아니면 <span> 태그를 과도하게 사용하는 것은 코드 가독성을 해칠 수 있습니다.

  • class 또는 id 사용: style 속성을 직접 사용하는 것보다 class나 id를 부여하고 CSS 파일에서 스타일을 관리하는 것이 유지보수에 더 효율적입니다.

요약하자면, <span> 태그는 문장 내의 특정 단어나 구절처럼 작은 인라인 부분을 묶어서 스타일을 적용하거나 스크립트로 제어하고 싶을 때 사용하는 유용한 도구입니다.

- - 관련 글 - -
MPV 사용법, mpv.conf 설정

개요(사용법) mpv [옵션] [파일 | URL | 재생 목록 | -]mpv [options] 파일 mpv.conf 설정 --ontop 설정을 사용하면 창을 항상 ...More...

아치 / 만자로 리눅스 미러사이트 빠른 순으로 정리

모든 저장소를 다운로드하고 가장 빠른 저장소 순으로 입력하려면 sudo pacman-mirrors --fasttrack && sudo pacman -Syyu 위의 명령으로 /etc/pacman.d/mirrorlist 파일에 저장됩니다.

mc 사용법

기본 조작 Enter 화살표를 이용해서 파일을 선택할 수 있으며 파일 위에서 Enter를 누르면 바로 실행된다.압축파일에서 Enter를 치면 디렉토리를 바꾸 듯 ...More...

리눅스 콘솔 프로그램

리눅스 콘솔 프로그램 종류 화일 관리 range, mc mc 사용법기본 조작 Enter 화살표를 이용해서 파일을 선택할 수 있으며 파일 위에서 ...More...

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다