본문 바로가기

Webstoryboy

Category

Explanation

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)

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

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기