HTML 레이아웃 요소 (header, sidebar, section, footer)

FrontEnd/HTML

by H_Develop 2022. 6. 22. 16:20

Header 페이지 상단 로고, 상단 메뉴, 메인 메뉴 등 헤더 정의

Sidebar 메인 콘텐츠 좌측 또는 우측, 사이트 링크, 공지 글 목록 등

Section 메인 콘텐츠와 같이 독립적인 구획(section), 독립적인 영역에 사용

Footer 하단 끝에 위치, 하단 메뉴, 회사나 기관의 주소, 연락처, 저작권 표시 등

출처 : http://tcpschool.com/html/html_space_layouts

의미 요소설명

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서의 탐색 링크를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	#wrap {width : 800px;
    		margin :0 auto;}
	header {height : 60px;
    		background-color : #dddddd;}
	aside {width : 200px;
    		height : 300px;
            float : left;
            background-color : pink;}
	section {width : 600px;
    		height : 300px;
            float : right;
            background-color : yellow;}
	footer {clear : both;
    		height : 60px;
            background-color : #dddddd;}
            
	header, aside, section, footer {font-size : 20px; text-align : center; padding-top : 30px;}

</style>
</head>
<body>

	<div id="wrap">
    	<h2></h2>
        <header>
        	상단 헤더(&lt;header&gt;태그)
        </header>
    	<aside>
        	사이드 바<br>(&lt;aside&gt;태그)
        </aside>
        <section>
        	메인 콘텐츠(&lt;section&gt;태그)
        </section>
        <footer>
        	하단 푸터(&lt;footer&gt;태그)
        </footer>
    </div>

</body>
</html>

'FrontEnd > HTML' 카테고리의 다른 글

레이아웃(layout) 활용 및 예제 (0)	2022.06.22
float, position (relative, absolute, fixed) (0)	2022.06.22
레이아웃 (배치),(margin:0 auto;),(float),(clear),(layout) (0)	2022.06.21
예제 (0)	2022.06.21
Table, Display, 목록 꾸미기 (0)	2022.06.20