[style] HTML - <span> 태그 ★★★ - 인라인요소그룹 (= span태그 = 스팬태그 = 스판태그)</span>

1. <span> 예제 - 텍스트 묶기 + 인라인요소 묶기
2. <span> 정의
3. <span> 구문
4. <span> 태그 vs. <font>태그

<span> 예제 - 텍스트 묶기 + 인라인요소 묶기

[예제1 - 텍스트 묶기]

 

<p>홈짱닷컴 <span style="color:red">Homzzang.com</span></p>

 

결과보기

---

[예제2 - 인라인요소 묶기]

 

<span>

    <span>홈짱닷컴</span>

    <span>Homzzang.com</span>

</span> 

 

결과보기 

<span> 정의

 

텍스트나 인라인요소를 묶어 그룹화 하거나 스타일 주고자 할 때 사용.    

 

PS. 블럭(block) 요소 vs 인라인 (inline) 요소

---

 

1.

• 인라인요소의 그룹이기 때문에, 레이아웃(=기본틀)엔 영향 안 미침.
• 인라인요소에 스타일을 주거나 자바스크립트를 걸 때 자주 사용됨.
• span은 인라인박스요소라서 안에 텍스트 없으면 브라우저에 표시 X. 예제보기
• span은 인라인요소라서 width, height 줘도 인식하지 못함. 예제보기
• 이미지를 span 태그로 묶는 것은 비추천.
• 시작태그와 종료태그로 구성. (예) <span> ... </span>

 

2. span 요소에 width, height 값 스타일 주는 방법 ★★★★★

• display:inline-block : (인라인블럭요소화) - 해당 요소 너비만 차지. (= 가로 나열) 예제보기
• display:block : (블럭요소화) - 한 행 전체 차지. (= 세로 나열) 예제 보기

 

3.

거의 모든 브라우저 지원.

 

4. MDN <span> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

 

<span> 구문

 

<span style="속성:속성값; 속성:속성값;"> 내용 </span>    

<span> 태그 vs. <font>태그