Text | abbreviation, pre-formatted, code etc

abbr | abbreviation(줄임말)

줄임말을 감싸는 태그로, title 속성과 함께 사용된다. 태그로 감싼 텍스트에 마우스를 hover하면, title에 입력한 값을 보여준다.

 

<p>
  My favorite song from her 7th album is <abbr title="death by a thousand cuts">DBATC</abbr>.
</p>

 

address

연락처 정보(지도상의 주소, URL, 이메일 주소, 전화번호 등)를 나타낼 때 사용하는 태그이다.

 

<address>
  <h1>Jurassic</h1>
  <a href="https://hyeonju-frontend-study.tistory.com/"> 티스토리 블로그 </a>
</address>

 

pre | preformatted text

형식(포맷)이 미리 정해져 있는 텍스트라는 뜻으로, 이 태그 내부에 작성된 형식(indentation, line break...) 그대로 화면에 표기할 수 있다.

• HTML <pre>
• CSS { white-space }
  • pre 태그는 줄바꿈이 안되어 있는 텍스트를 wrapping 하지 않아서, 좌우로 길게 텍스트가 늘어지는 문제가 발생한다. pre 태그의 css white space 속성을 이용하면 이런 문제점을 해결할 수 있다. 

+) indentation | 들여쓰기

 

<pre>
  This love is good.
   This love is bad.
    This love is alive back from the death.
</pre>

 

code

코드를 감싸는 태그로, 여러 줄의 코드를 작성할 때에는 pre 태그 내부에 code 태그를 사용하는 것이 좋다.

 

<pre>
  <code>
    console.log('hello world');
    console.log('this is whole new world')
  </code>
</pre>

 

etc

• hr | horizontal rule, 수평선 요소를 만들어서 p태그와 p태그 사이에서 문단을 나누는 역할을 한다. 
• br | line break, 줄바꿈 요소
• sup & sub | superscript(위첨자), subscript(아래첨자)