티스토리 뷰

HTML CSS JS

HTML / 요소 - 콘텐츠 구분

Programmers 2021. 6. 3. 09:10
반응형

https://heropy.blog/2019/05/26/html-elements/

 

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online

heropy.blog

Body태그 내의 태그

<header>
☞ 소개나 탐색을 돕는 것의 그룹, 일반적으로 헤더에는 메뉴 검색바 로그아웃 회원가입 같은 것들이 들어가 있다.

<footer>
☞ 가장 가까운 구획화 콘텐츠나 구획화 루트의 푸터를 나타낸다.?
 푸터는 일반적으로 사이트의 가장 아래에 작성자, 구획, 저작권 등이 들어가 있다.

<h1>~<h6>
☞ 6단계의 문서 제목을 구현, 사용 일람? 문서의 목차를 만드는 것처럼 사용할 수 있다.
제목 폰트의 크기를 줄이기 위해서 낮은 단계를 사용하면 안 된다!. css의 font-size속성을 사용
표시의 목적으로 사용하면 안 된다.
<h1>을 중복 사용을 하지 마라.
순서대로 사용해라.
※주제, 소주제, 내용을 구분하기 위한 목적이다.

<main>
☞ 핵심적인 주요 콘텐츠를 나타낸다. 핵심 기능에 대한 부연, 또는 직접적으로 연관된 콘텐츠
메인 태그는 하나만 존재해야 한다. Internet explore에서는 사용할 수없다.

<article>
☞ 독립적으로 구분되거나 재사용 가능한 영역들, 매거진, 신문기사, 블로그
<h1>~<h6> 포함해서 식별
작성 시간 <time>의 datetime속성으로 작성
블록 요소
독립성을 가진다.

<section>
☞ 문서의 일반적인 영역을 설정, 영역, 제목
<h1>~<h6> 포함해서 식별
블록 요소
↔ <div> 별다른 의미가 없음

<aside>
☞ 문서의 별도 콘텐츠를 설정

<nav>
☞ 보통 메뉴를 묶어서 사용한다. ul과 li를 함께 사용한다.
블록 요소

<address>
☞ 연락처 정보를 제공하기 위해 포함하여 사용한다.
블록 요소
한 개 이상의 연락처를 제공한다.
"mailto:메일 주소" 메일로 연결
"tel:전화번호" 전화연결

<div>
☞ 의미 x, 막 사용할 수 있다. 

 

콘텐츠 구분-예제 1 HTML까지
- index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Content 구분 example</title>
    <meta name="author" content="Eunshin Noh">
    <meta name="description" content="Eunshin Noh's Site">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UX-compatible" content="IE=edge">
    <base href="https://heropcode.github.io/GitHub-Responsive/img/">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <header>
       <nav>
           <ul>
               <li>메뉴1</li>
               <li>메뉴2</li>
               <li>메뉴3</li>
           </ul>
       </nav>
    </header>

    <seection>
        <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>
    </seection>

    <adside>
        Aside
    </adside>

    <footer>
        <address>
            <a href="mailto:nes0410@gmail.com">nes0410@gmail.com</a>
            <a href="tel:+821033565548">010-3356-5548</a>
        </address>
    </footer>
</body>
</html>

 

 

콘텐츠 구분-예제 2 HTML ~ CSS까지
- index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Content 구분 example</title>
    <meta name="author" content="Eunshin Noh">
    <meta name="description" content="Eunshin Noh's Site">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UX-compatible" content="IE=edge">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <header>
       <nav>
           <ul>
               <li>메뉴1</li>
               <li>메뉴2</li>
               <li>메뉴3</li>
           </ul>
       </nav>
    </header>
<!--ctrl + shif + p -> emmet약어로래핑 -> main-->
    <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:nes0410@gmail.com">nes0410@gmail.com</a>
            <a href="tel:+821033565548">010-3356-5548</a>
        </address>
    </footer>
</body>
</html>

 

- main.css

header {
    background: 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: tomato;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}
section h1 {

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

}
article h3 {

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

}
footer address a {
    display: block;
}

 

 

vscode에서 태그 랩핑 방법: ctrl+shift+p → emmet약어로래핑 → 태그

section과 aside를 묶기 위해서는 한 태그안에 넣어둬야한다. 여기서는 main
html에서 main태그로 묶고 css에서는 main을 추가하고 display: flex;를 추가.

display:flex; -> css과정에 상세하게 다룰예정

footer address a태그는 inline요소이다. display: block;으로 block요소로 강제 변환

여기까지 컨텐츠 부분의 태그

반응형
저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

HTML / 요소 - 문자 콘텐츠 - DL, DT, DD, P, HR, PRE, BLOCKQUOTE  (0) 2021.06.03
HTML / 요소 - 문자 콘텐츠 - OL, UL, LI  (0) 2021.06.03
HTML - 메타 데이터 META  (0) 2021.06.02
HTML - 블록 레벨(Block level)요소와 인라인(Inline) 요소  (0) 2021.06.02
HTML CSS JS 입문2  (0) 2021.06.02
댓글
공지사항