반응형
1. 단위 %
2. 유동형 레이아웃 구조
3. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>유동형 레이아웃</title>
<link href="css/ex08.css" rel="stylesheet">
</head>
<body>
<h1>유동형 레이아웃 방식(와이어프레임)</h1>
<div id="wrap"> <!-- wrap start -->
<header>
<h1>회사로고</h1>
<nav>
<ul>
<li><a href="#">Menu-1</a>
<ol>
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ol>
</li>
<li><a href="#">Menu-2</a>
<ol>
<li>SubMenu-1</li>
<li>SubMenu-2</li>
</ol>
</li>
<li><a href="#">Menu-3</a>
<ol>
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ol>
</li>
<li><a href="#">Menu-4</a>
<ol>
<li>SubMenu-1</li>
</ol>
</li>
</ul>
</nav>
</header>
<section>
<article>사이드메뉴(200px)</article>
<article>내용2</article>
</section>
<footer>푸터</footer>
</div> <!-- wrap end -->
</body>
</html>
4. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0 auto;
padding:0;
}
ul, li{
list-style:none;
}
/* 데스크탑은 960px 이상 */
#wrap{
width:900px;
border:1px solid black;
}
header{
width:95%;
border:1px solid black;
height:100px;
}
section{
width:95%;
border:1px solid black;
overflow:hidden;
/* display:flex; */
}
section article{
width:33.3333%;
float:left;
box-sizing:border-box;
height:300px;
border:1px solid black;
}
footer{
width:95%;
border:1px solid black;
}
/* 와이어프레임, 프로토타입, 스토리보드, 목업 */
header{
position:relative;
}
header h1{
background:pink;
position:absolute;
left:10px;
top:10px;
}
header nav{
background:orange;
position:absolute;
right:15px;
top:10px;
}
nav>ul{
/* overflow:hidden; */
background:pink;
border:3px solid red;
/* 확대형 */
position:relative;
}
nav>ul:after{
content:'';
display:block;
clear:both;
}
nav>ul>li{
float:left;
padding:5px;
border:1px solid blue;
width:100px;
height:30px;
text-align:center;
line-height:30px;
/* 축소형 */
/* position:relative; */
}
nav ol{
display:none;
position:absolute;
}
nav>ul>li:hover>ol{
display:block;
background:snow;
left:0;
top:41px;
width:100%;
border:1px solid red;
}
/* 유동형 레이아웃 */
div#wrap{
width:95%;
/* 1) 최소 가로 크기, 최대 가로크기 */
min-width:650px;
max-width:1300px;
}
section{
display:flex;
}
section article:nth-child(1){
width:200px;
background:gold;
}
section article:nth-child(2){
width:100%;
background:silver;
margin-right:-200px;
}
5. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 54(Transform 2차원) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190622 Basic Study 53(고정형 네비게이션 바) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 51(고정형 레이아웃 구조) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 50(이미지 슬라이드 - 상하좌우) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 49(이미지 슬라이드 구현 - 액자형) (0) | 2019.06.22 |
