티스토리 뷰

HTML

[HTML] <span>

<span>

<span> 태그는 콘텐츠 요소를 표현하기 위한 인라인 요소이며, 의미가 없는 그룹화 요소입니다. 적절한 의미에 맞는 요소가 없거나 그룹화할 때 사용하며 <div> 요소와 비교가 됩니다. <div> 태그는 블록구조이며 <span> 태그는 인라인 구조입니다.


<span>

<span> 태그는 인라인 요소 그룹화를 정의합니다.

정의(Definition)

  • <span> 태그는 인라인 요소 그룹화를 정의합니다.
  • <span> 태그는 주변 요소와 구별하기 위하거나 다른 적절한 태그가 없는 경우에 사용합니다.
  • <span> 태그는 CSS 스타일링 사용을 위해 설정하는 경우가 많습니다.

비교(Compare)

  • 블록 요소를 그룹화한다면 <div> 태그를 사용합니다.
  • 인라인 요소를 그룹화한다면 <inline> 태그를 사용합니다.

Sample1

적절하게 사용할 태그가 없다면 <span> 태그를 사용하는 예제입니다.

결과

span 태그는 주변 요소와 구별하기 위하거나 다른 적절한 태그가 없는 경우에 사용합니다

html
<p><span>span 태그는 주변 요소와 구별하기 위하거나 다른 적절한 태그가 없는 경우에 사용합니다</span></p>

Sample2

<span> 태그는 CSS 스타일링 사용을 위해 사용하는 예제입니다.

결과

span 태그는 CSS 스타일링 사용을 위해 설정하는 경우가 많습니다.

html
<p>span 태그는 CSS 스타일링 사용을 위해 <span class="yellow">설정</span>하는 경우가 많습니다.</p>
css
.yellow {color: #ff6a00;}

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<span> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼