[TIL] Grouping Content
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> <ul> <li>
<dl> <dt> <dd>
<div>
<figure> <figcaption>
<p>
<pre>
<blockquote>
<main>
<hr>
<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>
Author And Source
이 문제에 관하여([TIL] Grouping Content), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@florence_y/TIL-Grouping-Content저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)