<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/레이아웃1.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea inventore iste porro, nulla, sint cupiditate ipsam suscipit eligendi quis eos neque commodi officiis harum iusto exercitationem voluptatibus quas, est tempora?</p>
</div>
<div id="sidebar">
<h2>사이드바</h2>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo ex voluptatum animi iste similique a praesentium sit deleniti mollitia autem doloribus magnam, saepe id asperiores labore odio! Doloribus, magni eos!
</li>
</ul>
</div>
<footer id="footer">
<h2>푸터</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero voluptates, praesentium esse officia maiores, possimus nam eos ab, quis eius obcaecati magni repellat alias repudiandae! Ad assumenda mollitia laboriosam libero.</p>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3단 레이아웃</title>
<link rel="stylesheet" href="./css/레이아웃2.css">
</head>
<body>
<div id="container">
<header id="header">
<h2>사이트 제목</h2>
</header>
<div id="left-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, temporibus voluptatibus. Aperiam laboriosam quia sit aliquam molestias enim, omnis minus vitae totam quae magni. Iusto assumenda alias adipisci eligendi deserunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab aliquam explicabo dolor. Tempore mollitia quo in possimus eum nulla debitis ipsum, at consectetur! Debitis nesciunt laudantium omnis impedit voluptatem.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est consequuntur, deleniti, natus molestiae eveniet dolore, similique expedita ipsam sunt eum vitae atque ipsum sint culpa adipisci et repudiandae quam deserunt?</p>
</div>
<div id="right-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<footer id="footer">
<h2>푸터</h2>
<p>저작권 정보</p>
<p>연락처 등</p>
</footer>
</div>
</body>
</html>
