본문 바로가기

Python_WEB/HTML

HTML5 - 190622 Basic Study 52(유동형 레이아웃 구조)

반응형

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 파일

ex08.html
0.00MB
ex08.css
0.00MB

반응형