고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8주 태블릿 pc 레이아웃</title>
<meta name="viewport" content="width=device-width, initial-scale1.0">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
#wrap{
overflow: hidden;
background: #71b1d1;
}
#wrap> #main_lnb{
float: left;
width: 200px;
cursor: pointer;
}
#wrap>#content_wrap{
float: left;
width: 100%;
margin-right: -200px;
}
#wrap>#content_wrap >#content{
padding-right: 200px;
}
#main_header {
height: 60px;
line-height: 60px;
padding-left: 10p;
border-bottom: 1px solid black;
background: rgb(144, 234, 189);
color: rgb(244, 59, 238);
}
#main_lnb>ul>li>a{
display: block;
height: 40px;
line-height: 40px;
padding-left: 15px;
border-top: 1px solid #96d6f6;
border-bottom: 1px solid #6298b2;
color: whitesmoke;
font-weight: bold;
}
#main_gnb {
overflow: hidden;
border-bottom: 1px solid black;
background: #32394a;
}
#main_gnb a {
/* 레이아웃 설정 */
display: block;
padding: 10px 20px;
/* 색상 설정 */
border-left: 1px solid#5f6673;
border-right: 1px solid #242a37;
color: beige;
font-weight: bold;
}
#main_gnb>ul.left {
overflow: hidden;
float: left;
}
#main_gnb>ul.right {
overflow: hidden;
float: right;
}
#main_gnb>ul.left>li {
float: left;
}
#main_gnb>ul.right >li{
overflow: hidden;
float: right;
}
body {
min-width: 760px;
}
#content{
background: wheat;
border-left: 1px solid black;
}
article{
padding: 10px;
}
#main_footer{
padding: 10px;
border-top: 3px solid black;
text-align: center;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Fluid</h1>
</header>
<nav id="main_gnb">
<ul class="left">
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
<ul class="right">
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</nav>
<div id="wrap">
<nav id="main_lnb">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</nav>
<nav id="content_wrap">
<div id="content">
<article>
<h1>Lorem ipsum dolor sit amet consectetur </h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi nisi accusantium alias cum facilis
recusandae earum laborum ipsam numquam omnis rerum architecto nihil sapiente debitis, culpa
provident eaque aliquid nam?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
accusantium nihil molestias. Ducimus corrupti odit eos, consequuntur distinctio nobis quas
dolores
laudantium quos laboriosam quis nam accusamus suscipit in quae.</p>
</article>
<article>
<h1>Lorem ipsum dolor sit amet consectetur </h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi nisi accusantium alias cum facilis
recusandae earum laborum ipsam numquam omnis rerum architecto nihil sapiente debitis, culpa
provident eaque aliquid nam?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
accusantium nihil molestias. Ducimus corrupti odit eos, consequuntur distinctio nobis quas
dolores
laudantium quos laboriosam quis nam accusamus suscipit in quae.</p>
</article>
<article>
<h1>Lorem ipsum dolor sit amet consectetur </h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi nisi accusantium alias cum facilis
recusandae earum laborum ipsam numquam omnis rerum architecto nihil sapiente debitis, culpa
provident eaque aliquid nam?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
accusantium nihil molestias. Ducimus corrupti odit eos, consequuntur distinctio nobis quas
dolores
laudantium quos laboriosam quis nam accusamus suscipit in quae.</p>
</article>
</div>
</nav>
</div>
<footer id="main_footer">
<h3>HTML +CSS3 Basic 김성진교수님 강의중</h3>
<address>서울디지털대학 sdu AI 소프트웨어공학과 </address>
</footer>
</body>
</html>
'html, css' 카테고리의 다른 글
| sdu html 강의 실습 1차 (0) | 2025.04.23 |
|---|---|
| sdu html실습 태블릿 레이아웃 (0) | 2025.04.16 |
| 계산기 (0) | 2025.04.15 |
| sdu 웹표준 수업 실습중 보완 (0) | 2025.04.11 |
| sdu 웹표준 수업 실습중 (0) | 2025.04.11 |
