<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>
*{
/* border width 계산 안함 */
box-sizing: border-box;
}
.container{
width: 540px;
border: 1px solid gray;
/* 화면가운데 공평하게 나뉨 */
margin: auto;
}
header{
border-bottom: 1px solid gray;
}
nav{
float: left;
width: 120px;
border-right: 1px solid gray;
}
article{
float: left;
width: 300px;
border-left: 1px solid gray;
border-right: 1px solid gray;
/* 선 두개로 안나오게 */
margin-left: -1px;
}
aside{
float: left;
width: 120px;
border-left: 1px solid gray;
margin-left: -1px;
}
footer{
/* float 효과없애기 */
clear: both;
border-top: 1px solid gray;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article class="">
<h2>float</h2>
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.
</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>
</div>
</body>
</html>
'개발속이야기 > html_css_javascript' 카테고리의 다른 글
| web grid 예제 (0) | 2018.03.06 |
|---|---|
| jquery mobile menu sample (0) | 2018.03.03 |
| flex - holy grail layout (0) | 2018.03.02 |
| css flex 테스트 페이지 (0) | 2018.03.01 |
| cafe24 쇼핑몰 슬라이드 스킨변경.. (0) | 2016.04.06 |