실행 가능한 HTML 문서: span 태그

Q: div와 span은 무엇이 다른가요?

는 블록이에요. 새 줄에서 시작하고 전체 너비를 차지해요. 은 인라인이에요. 텍스트 줄 안에 머물고 내용만큼만 넓어요. 콘텐츠 블록을 묶을 때는 div를, 텍스트 안의 단어에 표시할 때는 span을 쓰세요.

Q: span에 width가 왜 적용되지 않나요?

인라인 요소는 width, height, 위아래 margin을 무시해요. 줄 안에 두면서 크기를 주려면 span에 display: inline-block을, div처럼 동작하게 하려면 display: block을 주세요.

Q: HTML에서 단어 하나의 색을 바꾸려면 어떻게 하나요?

그 단어를 클래스가 있는 span으로 감싸고 CSS에서 색을 지정하세요. word 와 .accent { color: #2563eb; }처럼요. 한 번만 빠르게 바꿀 때는 word 도 돼요.

HTML span 태그: 텍스트 일부 꾸미기, div와 span 차이

<span> 태그는 범용 인라인 컨테이너예요. 줄 안의 몇 단어를 감싸서 줄을 깨뜨리지 않고 스타일을 입히거나 스크립트로 다룰 수 있게 해요. 사용법, div와의 차이, 더 알맞은 태그가 있는 경우를 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

span 태그가 하는 일

<span>은 줄 안의 텍스트 일부를 감싸서 스타일을 입히거나 JavaScript로 찾을 수 있게 해요. <div>의 인라인 쌍둥이예요. 의미도 기본 모양도 없고, 새 줄을 시작하지 않아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

문장은 한 줄 그대로이고, 감싼 단어만 바뀌어요.

div와 span 차이

두 태그는 목적이 같고(의미 없는 컨테이너), 페이지에 놓이는 방식만 달라요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

div는 문장을 세 줄로 나누고 페이지 너비만큼 늘어나요. span은 문장 안에 머물면서 텍스트에 딱 맞게 감싸요.

	`<div>`	`<span>`
표시 방식	블록	인라인
새 줄에서 시작	예	아니요
너비	사용 가능한 전체 너비	내용만큼
`width`, `height`, 위아래 margin	적용됨	무시됨
담을 수 있는 것	블록을 포함한 모든 것	텍스트와 인라인 요소만
주요 용도	섹션, 카드, 레이아웃 래퍼	텍스트 안의 단어나 구절

차이가 하나 더 있어요. <div>는 <p> 안에 들어갈 수 없고, 넣으면 브라우저가 문단을 일찍 닫아요. 반면 span은 텍스트가 들어가는 곳 어디에나 쓸 수 있어요. 자세한 내용은 div 페이지에 있어요.

span 꾸미기: 되는 것과 안 되는 것

색, 글꼴, 배경, 좌우 padding은 span에서 모두 동작해요. 크기는 안 돼요. 인라인 요소는 width, height, 위아래 margin을 무시해요. 줄 안에 두면서 크기를 주려면 inline-block으로 바꾸세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

첫 번째 span은 단어만큼만 넓어요. 두 번째는 정확히 가로 120, 세로 40픽셀이고 여전히 문장 안에 있어요.

JavaScript와 span

span은 카운터나 사용자 이름처럼 스크립트가 채워 넣는 값의 자리 표시자로 자주 써요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

숫자만 바뀌고 문장의 나머지는 그대로예요.

span보다 특정 태그가 나은 경우

span에는 의미가 없어서 스크린 리더는 일반 텍스트로 읽어요. 단어에 역할이 있다면 그 역할에 맞는 태그를 쓰고 원하는 대로 스타일을 입히세요.

의미	span 대신 쓸 태그
중요한 텍스트	`<strong>`
강세를 둔 강조	`<em>`
하이라이트하거나 표시한 텍스트	`<mark>`
코드, 파일 이름	`<code>`
키보드 키	`<kbd>`
날짜나 시간	`<time datetime="2026-09-24">`
다른 언어로 된 텍스트	`<span lang="fr">`(span에 `lang` 속성)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

<strong>, <b>, <em>, <i>의 차이는 굵게 페이지에서 설명해요.

자주 하는 실수

일반 span에 width를 지정함. 무시돼요. display: inline-block을 쓰세요.
span 안에 div나 문단을 넣음. 줄을 깨뜨리는 올바르지 않은 HTML이에요. 바깥 span을 div로 바꾸세요.
클릭할 수 있는 span. div처럼 onclick이 달린 span도 키보드로 갈 수 없어요. <button>이나 링크를 쓰세요.
스타일마다 span을 씀. 문단이나 섹션 전체에 스타일이 필요하면 텍스트를 span으로 감싸지 말고 <p>나 컨테이너 자체에 클래스를 주세요.

자주 묻는 질문

HTML에서 span이란 무엇인가요?

<span>은 범용 인라인 컨테이너예요. 단어 하나처럼 텍스트 줄의 일부를 감싸서 CSS나 JavaScript가 대상으로 삼을 수 있게 하고, 그 자체로는 모양도 의미도 없어요.

div와 span은 무엇이 다른가요?

<div>는 블록이에요. 새 줄에서 시작하고 전체 너비를 차지해요. <span>은 인라인이에요. 텍스트 줄 안에 머물고 내용만큼만 넓어요. 콘텐츠 블록을 묶을 때는 div를, 텍스트 안의 단어에 표시할 때는 span을 쓰세요.

span에 width가 왜 적용되지 않나요?

인라인 요소는 width, height, 위아래 margin을 무시해요. 줄 안에 두면서 크기를 주려면 span에 display: inline-block을, div처럼 동작하게 하려면 display: block을 주세요.

HTML에서 단어 하나의 색을 바꾸려면 어떻게 하나요?

그 단어를 클래스가 있는 span으로 감싸고 CSS에서 색을 지정하세요. <span class="accent">word</span>와 .accent { color: #2563eb; }처럼요. 한 번만 빠르게 바꿀 때는 <span style="color: #2563eb">word</span>도 돼요.

span 안에 div를 넣을 수 있나요?

안 돼요. span에는 텍스트, 링크, 이미지, 다른 span 같은 인라인 콘텐츠만 들어갈 수 있어요. 브라우저가 span 안의 div를 표시하긴 하지만 올바르지 않은 HTML이고 줄이 깨지니, 바깥 요소를 div로 바꾸세요.