목차
<span> 예제 - 텍스트 묶기 + 인라인요소 묶기 <span> 정의 <span> 구문 <span> 태그 vs. <font>태그
<span> 예제 - 텍스트 묶기 + 인라인요소 묶기
[예제1 - 텍스트 묶기]
<p>홈짱닷컴 <span style="color:red">Homzzang.com</span> </p>
결과보기
[예제2 - 인라인요소 묶기]
<span>
<span>홈짱닷컴</span>
<span>Homzzang.com</span>
</span>
결과보기
<span> 정의
텍스트나 인라인요소를 묶어 그룹화 하거나 스타일 주고자 할 때 사용.
1.
인라인요소의 그룹이기 때문에, 레이아웃(=기본틀)엔 영향 안 미침.
인라인요소에 스타일을 주거나 자바스크립트를 걸 때 자주 사용됨.
span은 인라인박스요소 라서 안에 텍스트 없으면 브라우저에 표시 X. 예제보기 span은 인라인요소 라서 width, height 줘도 인식하지 못함. 예제보기 이미지를 span 태그로 묶는 것은 비추천.
시작태그와 종료태그로 구성. (예) <span> ... </span>
2. span 요소에 width, height 값 스타일 주는 방법 ★★★★★
3.
4. MDN <span> 예제보기
<span> 구문
<span style="속성:속성값; 속성:속성값;"> 내용 </span>
<span> 태그는 전역속성과 이벤트속성 지원.
<span> 태그 vs. <font>태그
<span> 태그
color 속성 존재 X (∴ CSS color 속성 사용 필요.)
HTML5 지원 O
<font> 태그
color 속성 존재 O
HTML5 지원 X (∴ 비권장)
[예제]
<span color=red>1. 적용 안 됨</span>
<span style="color:red">2. 적용 됨. (권장 방식)</span>
<font color=red>3. 적용 됨</font>
<font style="color:red">4. 적용 됨</font>
예제보기
