HTML - 콘텐츠 구분 & 문자 콘텐츠

BODY 내 구조 개념

1. HEADER

<header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠
<header>안에 <header>와 <footer>가 올 수 없다, <footer>와 <address>안에 <header>가 올 수 없다.

header { display: block; }

2. FOOTER

<footer>는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서를 담는다.
<footer> 요소는 <address>, <header>, 혹은 다른 <footer>아래에 올 수 없다.

footer { display: block; }

3. H1 ~H6

<h1>~<h6> 요소는 6단계의 구획 제목을 구현.
숫자가 커질 수록 크기가 작아진다.
글씨 크기를 위해 제목 태그를 사용하지 말고 대신 CSS의 font-size 속성을 사용해야한다.
h1 ---> h6대로 순서대로 제목 단계를 써야한다.
h1 레벨의 제목을 되도록이면 한페이지에 한번만 사용

h1, h2, h3, h4, h5, h6 { display: block; }

4. MAIN

<main> 요소는 문서 <body>의 주요 콘텐츠
주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.
브라우저 호환성 - internet explorer 사용 불가
한 문서에 하나의 <main>만 포함 가능

main { display: block; }

5. ARTICLE

독립적으로 구분되거나 재사용 가능한 영역을 설정. (매거진/신문 기사, 블로그 등)
일반적으로 <h1>~<h6>를 포함하여 식별.
작성일자와 시간을 <time>의 datetime 속성으로 작성.
<article>안에 <section>이 들어갈 수 있다.

article { display: block; }

6. SECTION

문서의 일반적인 영역을 설정.
일반적으로 <h1>~<h6>를 포함하여 식별.
<section>안에 <article>이 들어갈 수 있다.

section { display: block; }

7. ASIDE

문서의 별도 콘텐츠를 설정. (보통 광고나 기타 링크 등의 사이드바(Side bar)를 설정)

aside { display: block; }

8. NAV

다른 페이지 링크를 제공하는 영역을 설정. (Navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정)

nav { display: block; }

9. ADDRESS

<body>, <article>, <footer> 등에서 연락처 정보를 제공하기 위해 포함하여 사용

address { display: block; }

10. DIV

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정. (Division, 꾸미는 목적으로 사용)

div { display: block; }

예제

Ctrl+B : side bar 조작

Ctrl + Shift + P : 약어로 래핑

Ctrl + Alt + L : beautify

<!DOCTYPE html>
<html lang="jo">
<head>
    <meta charset="UTF-8">
    <title>콘텐츠 구분 예제</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h1>Section</h1>
            <article>
                <h2>Article1</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>Article2</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>Article3</h2>
                <p>Contents...</p>
            </article>
        </section>
    
        <aside>
            Aside
        </aside>
    </main>

    <footer>
        <address>
            <a href="mailto:ahju0011@gmail.com">ahju0011@gmail.com</a>
            <a href="tel:+8201012345678">010-1234-5678</a>
        </address>
    </footer>

</body>
</html>

header {
    background-color: tomato;
    margin: 10px;
    padding :20px;
}
header nav{

}
header nav ul{
    display : flex;
}
header nav ul li{
    list-style:none;
    margin: 10px;
}
main{
    display:flex;
}
section{
    width:70%;
    background-color: tomato;
    margin:10px;
    padding:10px;
    box-sizing: border-box;
}
section h1{

}
article{
    background-color: yellowgreen;
    margin-bottom: 10px;
    padding:10px;
}
article h2{

}
article p{

}
aside{
    width:30%;
    background-color: tomato;
    margin:10px;
    padding:10px;
    box-sizing: border-box;
}
footer{
    background-color: tomato;
    margin:10px;
    padding:20px;
}
footer address{

}
footer address a{
    display:block; /*inline요소(수평)를 block요소(수직)로 */
}

문자 콘텐츠

1. OL,UL,LI

각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정.

<ol>과 <ul>은 자식으로 <li>만 포함 가능. (즉 ol +li 와 ul +li)
<li>는 단독으로 사용할 수 없으며, <ol>이나 <ul>에 자식으로 포함되어야 함.
정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있음.

ol, ul { display: block; }
li { display: list-item; }

<ol>

속성	의미	값
start	항목에 매겨지는 번호의 시작 값	숫자(Number)
type	항목에 매겨지는 번호의 유형	a, A, i, I, 1
reversed	역순으로 번호	reversed

<li>

속성	의미	값	특징
value	항목의 순서를 설정	숫자(Number)	이하 항목들의 순서가 다시 지정됨

2. DL,DT,DD

영역(<dl>)속에 용어(<dt>)와 정의(<dd>) 쌍

<dl>은 <dd>, <dt>만을 포함해야 함.
키(key)/값(value) 형태를 표시할 때 유용.
디자인할 때 한계가 있어서 (dl은 ul)로 (dt는 dfn)로 (dd는 p)태그로 바꿔서 사용

<dl>
  <dt>Coffee</dt>
  <dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</dd>
  <dt>Milk</dt>
  <dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd>
</dl>

dl, dt, dd { display: block; }

3. P,HR

<p>

하나의 문단을 설정.

일반적으로 정보통신보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함.

p { display: block; }

<hr/>

문단의 분리(주제에 의한)를 위해 설정.

대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로만 사용해야 함.
기본적으로 선을 출력 --> CSS에서 border : none 하면 선이 없음

hr { display: block; }

</br> : 줄바꿈 태그

4. PRE

서식이 미리 지정된 텍스트를 설정.

텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음. (내가 원하는 서식 그대로 입력대로 출력)
<pre>내용</pre> 이런형태로 바로 붙여서 써야지 빈 공백이 출력안된다.
기본적으로 Monospace 글꼴 계열로 표시됨.

pre { display: block; }

5. BLOCKQUOTE

일반적인 인용문을 설정.

속성	의미	값
cite	인용된 정보의 URL	URL

blockquote { display: block; }

Thanks to heropy.blog/2019/05/26/html-elements/

자세한 내용은 '태그이름 + mdn'을 사용해서 검색 (ex. div mdn)

'Front-end > Web' 카테고리의 다른 글

HTML - 멀티미디어 & 내장 콘텐츠 & 스크립트 (0)	2021.02.02
HTML - 인라인 텍스트 & 수정 (0)	2021.02.02
HTML - 주요범위 & 메타데이터 (0)	2021.02.02
CSS (0)	2021.02.01
HTML (0)	2021.02.01

안녕주의 코딩일기

HTML - 콘텐츠 구분 & 문자 콘텐츠

'Front-end > Web' 카테고리의 다른 글

댓글

티스토리툴바

HTML - 콘텐츠 구분 & 문자 콘텐츠

'Front-end > Web' 카테고리의 다른 글

관련글

댓글

티스토리툴바