Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠

Develop/HTML & CSS

Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠

마크투비 2021. 7. 10. 22:22

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS

강의자료: 한 눈에 보는 HTML 요소 총정리

강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/

1. BODY 태그/ 콘텐츠 구분

◽️ <header> 태그 header tag mdn

- 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있음

- <header> 태그 안에 <header>, <footer>를 넣을 수 없음

◽️ <footer> 태그 footer tag mdn

- 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냄

- 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담고 있음

- 보통 페이지 하단에 구성

- <header>와 다른 <footer>는 자손이 될 수 없음

◽️ <h1>~<h6> 태그 <h1>~<h6> tag mdn

- 6단계의 구획 제목을 나타냄. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮음

✔️ 글씨 크기를 위해 제목 태그를 사용하지 말 것! 대신 CSS의 font-size 속성을 사용 할 것! - html은 구조를 나타내는 용도로만 사용하는 것을 권장함. h 태그는 주제를 구분하기 위해 사용됨.

- 제목 단계를 건너뛰지 말 것! 언제나 <h1>로 시작해서, <h2>, 순차적으로 기입하기

- 페이지 당 하나의 <h1>만 사용할 것

◽️ <main> 태그 main tag mdn

- <main> 요소는 문서 <body>의 주요 콘텐츠를 나타냄

- 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐

- 문서에 <main> 요소 단 하나만 존재해야 함

- internet explorer에서 지원하지 않음

- main 태그는 block 요소

◽️ <article> 태그

- 독립적으로 구분되거나 재사용 가능한 영역을 설정 (매거진/신문 기사, 블로그 등)

- 일반적으로 <h1>~<h6>를 포함하여 식별

- 작성일자와 시간을 <time>의 datetime 속성으로 작성

◽️ <section> 태그

- 문서의 일반적인 영역을 설정

- 일반적으로 <h1>~<h6>를 포함하여 식별

- <section> 태그 내에 <article> 태그 작성 가능. 반대로도 가능

◽️ <aside> 태그

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

◽️ <nav> 태그

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

◽️ <address> 태그

- <body>, <article>, <footer> 등에서 연락처 정보(이메일, 전화번호, 주소)를 제공하기 위해 포함하여 사용

◽️ <div> 태그

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

- 의미가 없어서 막 사용할 수 있는 태그

<!DOCTYPE html>
<html lang="en">
<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:koomijin@gmail.com">koomijin@gmail.com</a>
            <a href="tel:+8201012345678">010-1234-5678</a>
        </address>
    </footer>
</body>
</html>

header{
    background: turquoise;
    margin: 10px;
    padding: 10px;
}
header nav {

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

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

}
article p{

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

}
footer address a{
    display: block;
}

2. BODY 태그/ 문자 콘텐츠

◽️ <ol>, <ul>, <li>

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

- Ordered List, Unordered List, List Item, 순서가 필요하거나<ol> 순서가 필요하지 않은<ul> 목록을 정의

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

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

- <ol>의 속성

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

- <li>의 속성

속성	의미	값
value	항목의 순서를 설정	숫자(Number)

◽️ <dl>, <dt>, <dd>

- 용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정

- Description List, Definition Details, Definition Term

<dl>은 <dd>, <dt>만을 포함해야 함.
키(key)/값(value) 형태를 표시할 때 유용.

- 스타일링의 한계를 가지기 때문에, 주로 <li> 태그로 대체해서 많이 사용함

◽️ <p>

- 하나의 문단을 설정 (Paragraph)

- 문장이나 문단을 만들 때 사용

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

- 코드 상에서 줄바꿈을 한다고 해서 브라우저에서도 줄바꿈이 적용되지는 않음

- 코드 상에서 띄어쓰기를 여러 번 해도 브라우저에서는 띄어쓰기 한 번으로 적용

◽️ <hr/>

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

- 빈 태그

대부분의 경우 수평선(border)으로 표시(시각적 관점)되나 의미적 관점으로만 사용해야 함.

◽️ <pre>

- 서식이 미리 지정된 텍스트를 설정 (Preformatted Text)

- 태그 안에 작성한 모든 공백들도 출력됨

텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음.
기본적으로 Monospace 글꼴 계열로 표시됨. ~> 대부분의 코드 에디터에서 사용하는 글꼴

◽️ <blockquote>

- 일반적인 인용문을 설정 (Block Quotation)

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

저작자표시

'Develop > HTML & CSS' 카테고리의 다른 글

Part7. HTML 요소 - 멀티미디어 & 내장콘텐츠 & 스크립트 (0)	2021.07.16
Part6. HTML 요소 - 인라인 텍스트 & 수정 (0)	2021.07.10
Part4. HTML 요소 - 주요범위 & 메타데이터 (0)	2021.07.10
Part3. HTML & CSS 첫걸음/CSS (0)	2021.07.04
Part2. HTML&CSS첫걸음/HTML (0)	2021.07.03

현재글Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠

마크투비의 고 GO