--- title: <span> slug: Web/HTML/Element/span tags: - Element - HTML - HTML text-level semantics - 'HTML:Flow content' - Reference - Web translation_of: Web/HTML/Element/span --- <div>{{HTMLRef}}</div> <p><span class="seoSummary"><strong>HTML <code><span></code> 요소</strong>는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 {{htmlattrxref("lang")}} 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.</span> 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <code><span></code>은 {{htmlelement("div")}}와 매우 유사하지만, {{htmlelement("div")}}는 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a>인 반면 <code><span></code>은 <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>입니다.</p> <div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-standard")}}</div> <table class="properties"> <tbody> <tr> <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_컨텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a>.</td> </tr> <tr> <th scope="row">가능한 콘텐츠</th> <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a>.</td> </tr> <tr> <th scope="row">태그 생략</th> <td>{{no_tag_omission}}</td> </tr> <tr> <th scope="row">가능한 부모 요소</th> <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_컨텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> </tr> <tr> <th scope="row">가능한 ARIA 역할</th> <td>모두</td> </tr> <tr> <th scope="row">DOM 인터페이스</th> <td>{{domxref("HTMLSpanElement")}}</td> </tr> </tbody> </table> <h2 id="특성">특성</h2> <p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> <h2 id="예제">예제</h2> <h3 id="예제_1">예제 1</h3> <h4 id="HTML">HTML</h4> <pre class="brush:html gutter:false"><p><span>Some text</span></p></pre> <h4 id="결과">결과</h4> <p>{{EmbedLiveSample('예제_1')}}</p> <h3 id="예제_2">예제 2</h3> <h4 id="HTML_2">HTML</h4> <pre class="brush:html gutter:false"><li><span> <a href="portfolio.html" target="_blank">See my portfolio</a> </span></li> </pre> <h4 id="CSS">CSS</h4> <pre class="brush: css">li span { background: gold; } </pre> <h4 id="Result">Result</h4> <p>{{EmbedLiveSample('예제_2')}}</p> <h2 id="명세">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">명세</th> <th scope="col">상태</th> <th scope="col">코멘트</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td></td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '<span>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td>The {{glossary("DOM")}} interface is now {{domxref("HTMLSpanElement")}}.</td> </tr> <tr> <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> <td>{{Spec2('HTML4.01')}}</td> <td></td> </tr> </tbody> </table> <h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("html.elements.span")}}</p> <h2 id="같이_보기">같이 보기</h2> <ul> <li>HTML {{HTMLElement("div")}} 요소</li> </ul>