5.15 span, br, wbr 요소(Element)
span 요소는 요소들에 스타일을 적용하거나 그룹핑하는데 사용되는 요소로 이와 비슷한 기능을 하는 div 요소가 있는데 둘의 차이점은 span 요소는 인라인에 div 요소는 다수의 라인으로 이루어진 블록 수준의 컨텐츠에 대해서 스타일 및 그룹핑을 한다는 것입니다.
이러한 span 요소는 다음과 같은 형식을 이용하게 됩니다.
<span>텍스트</span>
span 요소는 그 자체로는 시각적으로 특별한 변화가 없으며 따라서 보통 style 속성을 이용하여 span 요소에 의해 시각적으로 변화를
주게 됩니다.
br 요소는 특별하게 설명할 것이 없으므로 생생략하고 wbr 요소는 공백없이 매우 긴 단어나
문자열은 자동 줄바꿈(wrap)이 발생하는데 이와 같은 줄바꿈이 되지 않고 한 줄에 나타낼 때 사용하는
요소로 사용자에 의해서 줄바꿈(line break) 기능 정도로 이해하면 좋을 것 같습니다.
이번 예제에서는 span 요소와 wbr 요소를
포함하는 형태로 다음과 같이 작성해봅니다.
<body>
<p>지리산 천왕봉에서 내려다 본 하늘은 마치 <span
style="color:blue">파란</span>
해수면 위에 떠있는 안개처럼 보인다.
</p>
<hr>
우리나라에서 긴 이름을 가진 사람은 박하늘<wbr>별님구름<wbr>햇님보다사랑스러우리
라는 사람이 있습니다.
</body>
“spanandwbrEx.html”로 저장하고 IE9로 열어보면 다음과 같이 span 요소에 의해 설정된 인라인 텍스트 영역에 글자색이 설정한대로 파란색으로 나타내고 wbr 요소를 이용하여 긴 문자열에 적용할 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.2 del 요소(Element) (0) | 2013.07.31 |
|---|---|
| 6. Edit Elements (0) | 2013.07.31 |
| 5.14 bdi, bdo 요소(Element) (2) | 2013.07.31 |
| 5.13 ruby, rt, rp 요소(Element) (0) | 2013.07.31 |
| 5.12 i, b, u, mark 요소(Element) (0) | 2013.07.31 |