<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
display: flex;
flex-direction: column;
}
header{
border-bottom: 1px solid gray;
padding-left: 20px;
}
footer{
border-top: 1px solid gray;
padding: 20px;
text-align: center;
}
.content{
display: flex;
}
.content nav{
border-right: 1px solid gray;
}
.content aside{
border-left: 1px solid gray;
}
nav, aside{
flex-basis: 150px;
flex-shrink: 0;
}
main{
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
생활코딩은 일반인을 위한 코딩 수업입니다.
</main>
<aside class="">
AD
</aside>
</section>
<footer>
<a href="http://opentutorials.org/">http://opentutorials.org/</a>
</footer>
</div>
</body>
</html>
'개발속이야기 > html_css_javascript' 카테고리의 다른 글
| web grid 예제 (0) | 2018.03.06 |
|---|---|
| jquery mobile menu sample (0) | 2018.03.03 |
| float-Holy Grail Layout (0) | 2018.03.02 |
| css flex 테스트 페이지 (0) | 2018.03.01 |
| cafe24 쇼핑몰 슬라이드 스킨변경.. (0) | 2016.04.06 |