Text-level semantics

텍스트를 사용할 때 쓰는 태그, 인라인 요소로 텍스트 영역만큼만 공간을 차지한다.

br, wbr

• <br>: 줄바꿈 위한 기능적인 태그
• <wbr>: 문장의 길이와 화면의 크기에 맞춰 그 이후 문장부터 붙거나 떨어진다. 반응형 디자인할 때 활용하나 사용률은 낮다.

<p>
  Lorem ipsum dolor sit amet consectetur adip<br>isicing elit. 
  Voluptatem quae deleniti nulla sunt perspiciatis
  magnam perferendis voluptatum,<wbr> sit veritatis ut provident 
  ducimus ipsa quod, corporis eaque pariatur. Suscipit, quis dolor.
</p>

[css] white-space

사용화면의 끝과 공백(white space)가 닿았을 때 어떻게 처리해야하는지에 대한 스타일을 정하는 속성이다.
white-space를 사용하면 <wbr> 태그의 기능적인 부분을 이해하기 수월하다.

• white-space: normal => 화면을 만나면 줄바꿈을 한다.
• white-space: nowrap => 화면을 넘어가도 감싸지않는다.

<p style="white-space: nowrap;">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Voluptatem quae deleniti nulla sunt perspiciatis
  magnam perferendis voluptatum,<wbr> sit veritatis ut provident 
  ducimus ipsa quod, corporis eaque pariatur. Suscipit, quis dolor.
</p>

[참고] 한글 문단일 때 화면 변화

영어와 다르게 CJK언어(중국, 일본, 한국)의 경우 한글자씩 조정된다. 이는 웹브라우저 상에서 한글과 영어의 렌더링 차이이다.
이 경우 style에 word-break: keep-all;의 속성을 주면 영어처럼 단어 단위로 문단이 조정된다.

<p style="word-break: keep-all;">
  풀밭에 같지 전인 노년에게서 청춘의청춘의청춘의<wbr> 방지. 
  전인 열락의 풀이 것이다. 방지. 전인 열락의 풀이 것이다.
</p>

a

• <a>는 html의 핵심적인 요소로 다른 페이지로 이동하기 위한 하이퍼링크(hyperlink) 태그 이다.
• <a href="URL"> href(hyper reference)에 이동할 페이지의 URL을 적는다.
• javascript로 경로를 지정할 수 있지만 웹 접근성에 위배됨으로 href에 적는 것이 좋다.
• <a href="#idName">: href에 현재 HTML문서의 id값(Hash Link)을 넣어 그 위치로 이동하게 할 수 있다.
• <a href="파일.pdf" download>: download 속성을 사용하여 파일을 다운 받을 수 있다.(IE 미지원)
• <a href="파일.pdf" download="파일이름지정.pdf">로 다운받을 때 파일의 이름과 형식을 지정할 수 있다.

<a href="https://www.naver.com" target="_blank">click</a>  
<a href="./index.html">click</a>
<a href="#idName">click</a> 
<a href="./index.html" download>click</a>
<a href="./파일.pdf" download="파일이름지정.pdf">hwp download click</a>

b, strong

• <b>: 단순한 텍스트 굵은 글꼴 표현(잘 사용하지 않는다.)
• <strong>: 굵은 글꼴로 해당 텍스트 강조 표현

i, em

• <i>: 텍스트 기울기 표현, HTML5에서 주위와 구분하기 위해 사용한다.
  -전문용어,문단의 주언어와 다른언어 표기
  -소설 속 등장인물 생각 표기

• <em>: 텍스트 기울기로 해당 텍스트 강조 표현

dfn

• 용어의 정의를 나타내는 태그로 HTML 문서에서 그 용어가 처음 나타날 때 <dfn>를 사용한다.
• <p>, <dt><dd>, <section>의 자식 요소일 경우 그 컨텐츠를 <dfn>의 설명으로 간주한다.

abbr

축약된 단어를 나타내고 싶을 때 사용하는 태그이다.

<p>
	<abbr title="알아서 잘 딱 깔끔하고 센스있게">알잘딱깔센</abbr>하게 하자!
<p>

sup, sub

• <sup>: 윗첨자, <sub>: 아랫첨자
• 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용한다.

<p>H<sub>2</sub>0</p>
<p>x<sup>2</sup>=4</p>

span

• 의미없이 요소들의 영역을 묶는 용도로 사용합니다.
• id와 class를 주어 그룹화한 영역을 컨트롤한다.
• div처럼 자주 사용하지 않는 것이 좋다.