HTML - 그룹관련 요소, 구조관련 요소, Entity Name

Web/HTML CSS JS

HTML - 그룹관련 요소, 구조관련 요소, Entity Name

dev_sr 2020. 10. 23. 16:26

1. 그룹관련 요소

<div>

블록 레벨 요소

요소들을 그룹으로 정의해줌

-> css를 손쉽게 정의하기 위함

텍스트, 인라인, 블록 요소 포함 가능

<div>를 쓰지 않았을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>
        header{
            width: 300px;
            margin: 0 auto;    /*header, section, footer 요소들을 브라우저 가운데 위치하도록 표현*/
            border: 1px solid #000;
        }
        
        section{
            width: 300px;
            margin: 0 auto;
            border: 1px solid #000;
        }
        
        footer{
            width: 300px;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <header>헤더</header>
    <section>본문</section>
    <footer>푸터</footer>
</body>
</html>

<div>를 썼을 때

css 속성을 한번만 정의해도 된다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>
        #wrap{
            width: 300px;
            margin: 0 auto;    /*header, section, footer 요소들을 브라우저 가운데 위치하도록 표현*/
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header>헤더</header>
    </div>
    <div id="wrap">
        <section>본문</section>
    </div>
    <div id="wrap">
        <footer>푸터</footer>
    </div>
</body>
</html>

<span>

인라인 요소

<div>와 같이 css를 쉽게 적용하기 위해 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
    <style>
        .s1{
            background-color: #ccc;
        }
        
        .s2{
            color: #ff6600;
        }
    </style>
</head>
<body>
    <span class="s1">가나다라</span> 
    <span class="s2">abcd</span>
</body>
</html>

2. 구조 관련 요소

HTML 문서의 헤더 영역 의미

제목이나 내비게이션, 검색 등이 위치

<header>, <footer>는 포함 못함

본문 내용이 옴

맥락이 같은 요소들을 주제별로 그룹화 해줌

주제에 대한 제목은 <h2>~<h6>를 써주는 게 좋음

섹션 작성자나 저작권, 관련된 문서의 링크등이 옴

<header>, <footer>는 포함 못함

<nav>

메인 메뉴나 목차가 옴

독립적으로 배포 또는 재사용이 가능한 게시글, 뉴스 기사, 블로그 포스팅 등이 옴

제목<h2~h6> 포함하는게 좋음

<aside>

메인과 직접 관련이 없는 영역

오른쪽이나 왼쪽 사이드 쪽에 광고나 사이드 메뉴가 들어감

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>구조 요소</title>
</head>
<body>
    <header>
        <h1>
            <a href="#">홈페이지 제목</a>
        </h1>
        <nav>
        <ul>
            <li>menu 01</li>
            <li>menu 02</li>
            <li>menu 03</li>
        </ul> 
    </nav>
    </header>
    <div>
        <section>
            <h2>콘텐츠 그룹 01</h2>
        </section>
        <section>
            <h2>콘텐츠 그룹 02</h2>
        </section>
        <article>
            <h2>주요 기사</h2>
        </article>
        <aside>광고</aside>
    </div>   
    <footer>
        <address>abcd@abcd.com 대한민국</address>
        <p>COPYRIGHT ⓒ All rights reserved.</p>
    </footer>
    
</body>
</html>

3. Entity Name

< > 를 이용해서 특수문자를 표시할 수 있음

entity code라고 함

유튜브 영상이나, 다른 HTML문서를 넣을 때 사용함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EntityName 과 iframe</title>
</head>
<body>
    <p><strong>HTML구조 요소</strong></p>
    <p>&lt;header&gt;, &lt;section&gt;, &lt;nav&gt;, &lt;article&gt;, &lt;aside&gt;, &lt;footer&gt;,</p>
    <div>
        <iframe src="cons.html" title="html구조 요소" width="500" height="500"></iframe>
    </div>
</body>
</html>

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

css - 외부 스타일시트 불러오기, 인라인 스타일 시트, 선택자 (2)	2020.10.23
HTML - form, input type 속성, text area, select, 주요 입력 속성 (0)	2020.10.22
html - map, text, list, table (0)	2020.10.21
HTML - 블록 레벨 요소, 인라인 요소, a 태그 관련 (0)	2020.10.19
Java Script - 비동기 프로그래밍 2 (async, await, Promise API (all, race)) (0)	2020.09.28

현재글HTML - 그룹관련 요소, 구조관련 요소, Entity Name

STUDY