텍스트 레벨 요소의 특징
- 요소 안의 컨텐츠의 크기만큼만 영역을 점유한다.
- 자식으로 Section, Grouping Contents를 배치할 수 없다.
br, wbr
br 태그는 줄바꿈을 위한 태그이다. wbr 태그도 간혹 사용한다. wbr은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 역할을 한다.
<p> <!-- 공백병합 --> Lorem ipsum <br> <br> <br> dolor sit amet </p> <p style="word-break:keep-all">풀밭에같지전인노년에게서<wbr>노년에게서청춘의청춘의청춘의</p> <!-- CJK언어의 word-break 속성은 기본적으로 break-all로 되어 있습니다. 영어와 차이를 비교해 보세요 :) --> <p style="word-break:break-all">Lorem ipsum, dolor sit amet <wbr>consecteturadipisicing elit</p>
a href="경로"
a 요소는 HTML의 핵심적인 용소로써 하이퍼 텍스트 즉, 링크를 만들 때 사용한다.
herf 속성을 통해 경로를 지정할 수 있다. href 속성을 사용하지 않고 자바스크립트로 경로를 지정할 수도 있지만 이는 웹 접근성에 위배됨으로 href 속성을 사용해주는게 좋다.
html 문법상 section, grouping content 요소들은 텏스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 하는 것이 허용된다.
또한 a요소 안의 자식으로는 a요소나 button과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요하다.<a href="https://www.naver.com">click</a> <a href="https://www.naver.com" target="_blank">click</a> <a href="./index.html">click</a> <a href="#three">click</a> <!-- 해쉬 링크 --> <a href="./index.html" download>click</a> <br> <a href="./hello.hwp">hwp click</a> <br> <a href="./hello.hwp" download="a.hwp">hwp download click</a> <br> <a href="./hello.pdf">pdf click</a> <br> <a href="./hello.pdf" download="a.pdf">pdf download click</a> <a href="tel:+82027777777">(02)777-7777</a> / <a href="mailto:hello@gmail.com">hello@gmail.com</a>
b, strong
b 태그는 굵은 글꼴을 표현하고 싶을 때 사용한다. 시맨틱 태그의 등장 이전의 스타일을 위한 태그이다. 별 다른 의미는 없으며 오직 텍스트를 굵은 글씨로 표현하기 위한 용도이기 때문에 더 이상 사용하지 않는 요소이다.
strong 태그는 굵은 글꼴을 중요도를 더해 강조할 때 사용한다. 중요도를 더 강조하고 싶을 때에는 strong을 중첩하기도 한다.<p> <strong>공지사항</strong> adipisicing <b>elit</b>. </p>
i, em
i 태그는 기울임 글꼴을 나타낸다. HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주 언어가 한글이지만 영어로 표기되었을 경우), 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용한다.
em 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있다.<p>시장안은 사람들의 활기로 가득차 있었다.</p> <p> 상인 : 이 상품은 현재 <em>30%</em> 할인중입니다! 나 : 아하 그렇군요! <i> '흠.. 왜 하필 지금 할인하는걸까?!' </i> 좀 더 구경하고 올게요! </p> <p>나는 상인의 의도를 의심할 수 밖에 없었다.</p>
dfn
현재 문맥에서 정의하고 있는 용어를 나타낸다. dfn의 가장 가까운 부모가 p 혹은 dt dd 쌍, section 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주한다. 문서에서 최초로 나타났을 때 사용한다.
<dl> <dt>WWW</dt> <dd> <dfn>WWW</dfn>는 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. - 위키백과 </dd> </dl>
abbr
abbr 태그는 준말, 약자를 나타내고 싶을 때 사용한다. 보통은 홀로 쓰이고 dfn 태그로 감싸주기도 한다.
<dl> <dt>WWW</dt> <dd> <dfn><abbr title="World Wide Web">WWW</abbr></dfn>는 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. - 위키백과 </dd> </dl>
sup, sub
sup 태그는 윗첨자, sub 태그는 아랫첨자를 나타낸다. 작은 글자를 표현하는 요도로는 사용하지 않으며 화학기호나 수학공식등 첨자 기호를 이용해야 하는 곳에서만 사용한다.
<p>H<sub>2</sub>0</p> <p>x<sup>2</sup>=4</p>
span
별다른 의미가 없다. 보통 줄 바꿈 없이 영역을 묶는 용도로 사용한다.
여러 요소를 묶어 컨트롤하기 위한 영역으로 id를 주거나 클래스를 사용하기도 한다.
div와 마찬가지로 최후 수단으로 사용하라....중략... <style> #명언 { color:red; } </style> ...중략... <p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>
