2022.03.29 Today I Learned📚

Grouping Content의 주요 tag들

<ol> <ul> <li>
<dl> <dt> <dd>
<div>
<figure> <figcaption>
<p>
<pre>
<blockquote>
<main>
<hr>

1. ol, ul, li

<ol> ordered list. 숫서 있는 목차

<ul> unordered list. 숫서 없는 목차

<li> list. 목차. 각 항목들을 나열하는 태그. <ol> 과 <ul> 의 자식요소

<h2>초콜릿</h2>
<ol>   
  <li>역사</li>
  <li>지역</li>
  <li>종류</li>
</ol>

<h2>파베초콜릿 재료</h2>
<ul> 
  <li>커버춰 초콜릿</li>
  <li>버터</li>
  <li>생크림</li>
</ul>

2. dl, dt, dd

dl definition list. 정의 목록

dt definition term. 정의할 용어. dl의 자식요소

dd definition desciption. 용어를 설명. dl안에서 dt에 대해 설명하는 태그

<dl>
    <dt>초콜릿</dt>
    <dd>카카오를 가공한 식품입니다.</dd>
</dl>

3. div

div division. 레이아웃을 나눌 때 사용하는 태그. css로 꾸미지 않으면 콘텐츠나 레이아웃에 영향을 주지 않음. 대용할 태그가 없을 때만 사용 권장

<div>hello</div>

4. figure, figcaption

figure 이미지와 캡션(자막, 설명)을 연결해주는 태그

figcaption 이미지에 캡션을 추가해주는 태그

<figure>
	<img src="images/chocolate.png" 
         alt="초코 시럽이 뿌려진 초콜릿 조각들">
	<figcaption>
		접시에 담긴 초콜릿 조각들
	</figcaption>
</figure>

5. p

<p> paragraph. 단락을 표시하는 태그. 하나의 완결된 문단을 의미. <p> 안에 자식으로 <p> 넣을 수 없음. 줄바꿈의 용도로 사용하지 않아야.

<h1>hello world</h1>
<p>hello world</p>

6. pre

<pre> HTML에 작성한 내용 그대로 화면에 표현. 주로 컴퓨터 코드를 표현할 때 사용

<pre>
  <code>
    let val= 1;
    function myFunc(value){
      return value;
    }
    myFunc(val);
  </code>
</pre>

7. blockquote

<blockquote> 인용블록. q는 인용구. 주로 문장 안에서 사용

<blockquote>
    <p>나는 내 삶의 모든 시간을 살아갈거야!</p>
    <cite>영화 소울 Joe</cite>
</blockquote>

<p><q>나는 내 삶의 모든 시간을 살아갈거야!</q>라고 Joe가 소리쳤습니다.<p>

8. main

<main> 문서의 주요 콘텐츠를 나타내는 태그. 문서의 핵심 주제나 웹어플리케이션의 핵심 기능에 직접적으로 연결되어 있는 부분. 사이트 로고, 검색 폼, 저작권 정보 등 다른 페이지나 섹션에서 반복적으로 표시될 수 있는 정보는 포함하지 않음

* IE 에서는 지원하지 않는 비교적 최근에 등장한 요소이기 때문에 사용에 주의가 필요

9. hr

<hr> 원래는 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생김.
이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용. 단락을 구분할 때 사용하므로 <p>태그 내 사용은 웹 표준에 어긋남.

<h1>hello world</h1>
<hr>
<p>hello <br> world</p>
<hr width="300px" align="center" size="3" color="red" noshade>