HTML Living Standard(2) | Grouping contents

✨저 그러니까... 누구였더라?

 나름 html 사용에 있어서는 어느정도는 알고있다고 자부했지만, 평소에 잘 안쓰던 태그들이라던가 적확한 용례를 제대로 알아봄에 있어서는 어느정도 아쉬운 부분은 있을 수 있다. 내 기준 평소에 잘 쓰지 않았던 태그들을 한번 정리해 보았다.

---

✨Grouping Contents

 <dl> <dt> <dd>

 <dl>
    <dt>CSS</dt>
    <dd>html에 살을 붙여주는 스타일</dd>
  </dl>

 목록의 대표로 치면 ul(순서가 없는 목록), ol(순서가 있는 목록), li(목록의 요소들)들이 대부분이지만 어떠한 정의할것이 필요할때 쓰이는 목록. 쉽게 목록의 뜻을 풀어서 설명하자면 다음과 같다.

• dl : 정의목록, definition list
• dt : 정의할 용어, definition term
• dd : 용어를 설명, definition description

 주로 쓰이는 용례는 footer공간에서 <address> 태그와 함께 사업자의 주소 및 이름을 작성할때 쓰인다. 또한 그룹화되기 어렵기 때문에 접근성으로 인해 사용을 지양해야하나 <div>태그와 같이 그룹으로 묶어서 작성하기도 한다.

 

 

<pre>, <code>

<pre>
  <code>
    console.log("이 코드가 console글자부터해서 전부 보여요 html은 적용안됌")
  </code>
</pre>

 코드를 html 문서에 적용하기 위해 사용된다. 주로 css나 javascript 표현을 위해 사용될 수 있으며 html은 html 문서라 그런지 그대로 코드가 적용되어버려서 표현이 안된다.

 

 

<blockquote>, <q>, <cite>

<figure>
  <blockquote>
      <p>인용문 blockquote 이에요. <q>q인용문은 양옆에 쌍따옴표 붙여지고</q>표시됨</p>
  </blockquote>
  <cite>여긴 cite코드 부분. 주로 저작물 표시에 쓰임. 이탤릭체 표현</cite> blockquote에 쓰인 인용문의 출처를 적음.
</figure>

 인용문들을 사용하기 위해 사용된다. 인용문은 기본적으로 들여쓰기가 적용되며 <blockquote>,<q>로 사용되어지며 이중 <q>태그 부분에 " "와 같은 쌍따옴표가 붙는다. 그리고 이 인용문들의 출처는 <cite>코드로 적용되며 이탤릭체로 표현된다. 이탤릭체를 제거하려면 css에서 <cite>부분에 font-style {en-US} 속성을 적용하면 된다.

 <cite>코드는 다양하게 저작물을 표시하는데 대표적으로 책, 논문, 음악, 영화, 게임, 그림, 컴퓨터 프로그램, 웹페이지 등의 출처를 표기할때 사용 된다.