더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin: auto;
text-align: center;
padding: 0px;
z-index: 1;
}
body{
margin: 0;
padding: 0;
}
.wrapper{
width: 1000px;
height: 600px;
}
.sidemenu{
width: 200px;
height: 200px;
position: fixed;
top: 300px;
left: -180px;
z-index: 1;
}
.sidemenu:hover{
position: fixed;
top: 300px;
left: 0px;
transition-duration: 0.5s;
}
.topmenu{
width: 100px;
height: 100px;
position: fixed;
top: -200px;
right: 50px;
z-index: 1;
}
.topmenu:hover{
position: fixed;
top: 0px;
right: 50px;
transition-duration: 0.5s;
}
.menu>li{
list-style: none;
background-color: black;
line-height: 50px;
}
li>a{
color: white;
text-decoration: none;
}
.navi{
position: fixed;
width: 100%;
position:absolute;
opacity: 0.6;
}
.navi>li{
float:left;
list-style: none;
width:25%;
text-align: center;
background-color: black;
line-height: 28px;
/* px 말고 %로는?*/
}
.navi>li>a{
color: white;
text-decoration: none;
/*width: 100%;*/
/*인라인 속성이라 넓이 조절 불가*/
display: block;
}
.menu-item:hover{
background-color: dimgray;
font-weight: bold;
}
.menu{
float: left;
width: 150px;
}
.arrow{
line-height: 200px;
text-align: center;
background-color: black;
color: white;
width: 100%;
height: 100%;
}
.header{height: 15%;}
.naviline{height: 5%;}
.navi{
height: 100%;
}
.contents{height: 70%;}
.footer{
height: 10%;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
.left{
width: 70%;
}
.right{
width: 30%;
}
.header>.layout{
height: 100%;
float: left;
}
.logo{width: 15%;}
.title{
width: 70%;
line-height: 90px;
}
.reserve{width: 15%;}
.contents>.layout{
height: 100%;
float: left;
}
.idpw{
float: left;
height: 100%;
width:65%;
}
.idpw>.idbox{
height: 50%;
}
.idpw>.pwbox{
height: 50%;
}
.id{
width:100%;
height: 100%;
font-size: 100%;
border: none;
border-bottom: 1px solid black;
}
.pw{
width:100%;
height: 100%;
font-size: 100%;
border: none;
border-bottom: 1px solid black;
}
.login{
float: left;
width:35%;
height: 100%;
padding: 8px 8px;
}
.button{
border: 1px solid black;
background-color: white;
color: black;
border-radius: 5px;
padding: 8px 15px;
font-size: 15px;
}
.loginbox{
width: 100%;
height: 50px;
}
.banner{
padding: 150px
}
.dropdown{
}
.dropdown-menu{
display: none;
}
.portfolio:hover .dropdown-menu{
display: block;
background-color: black;
}
</style>
</head>
<body>
<div class="naviline">
<ul class="navi">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">AboutUs</a></li>
<li class="menu-item portfolio"><a href="#">
<div class="dropdown">
Portfolio
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Web</a></li>
<li class="menu-item"><a href="#">Native</a></li>
<li class="menu-item"><a href="#">Moblie</a></li>
<li class="menu-item"><a href="#">Security</a></li>
</ul>
</div>
</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</div>
<div class="wrapper">
<div class="header">
<div class="logo layout">Logo</div>
<div class="title layout">
<img src="car2.jpg" width=100% height=100%>
</div>
<div class="reserve layout">Reserved</div>
</div>
<div class="contents">
<div class="left layout">Left</div>
<div class="right layout">
<div class="loginbox">
<div class="idpw">
<div class="idbox">
<input type="text" class="id" placeholder="ID를 입력하세요">
</div>
<div class="pwbox">
<input type="password" class="pw" placeholder="PW를 입력하세요">
</div>
</div>
<div class="login">
<input type="button" value="Login" class="button">
</div>
</div>
<div class="banner">
banner
</div>
</div>
</div>
<div class="footer">Footer
</div>
</div>
<div class="sidemenu">
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">AboutUs</a></li>
<li class="menu-item"><a href="#">Portfolio</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
<div class="arrow"> ▷</div>
</div>
<div class="topmenu">
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">AboutUs</a></li>
<li class="menu-item"><a href="#">Portfolio</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
<li class="arrow"><a href="#">▽</a></li>
</ul>
</div>
</body>
</html>
position:absolute; 적용 위치
코드 지저분
강사님코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
Result
Source map
Restructure
Beautify
* {
box-sizing: border-box;
text-align: center;
font-size: 20px
}
body {
padding: 0;
margin: 0
}
.wrapper {
width: 1000px;
height: 600px;
margin: auto;
position: relative;
top: 100px
}
.header {
height: 15%
}
.logo {
width: 15%
}
.title {
width: 70%
}
.reserved {
width: 15%
}
.navi {
height: 5%
}
.contents,.footer {
height: 70%;
border-bottom: 1px solid #000
}
.footer {
height: 800px
}
.left {
width: 70%
}
.right {
width: 30%
}
#input-area,.hlayout,.navi-bar>li {
float: left;
height: 100%
}
.navi-bar {
padding: 0;
margin: 0;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .5
}
.navi-bar>li {
position: relative;
list-style-type: none;
text-align: center;
width: 25%;
background-color: #000;
overflow: hidden
}
.navi-bar>li:hover .pop-menu {
opacity: 1;
display: block
}
.navi-bar>li>a {
color: gray;
text-decoration: none;
display: block;
width: 100%;
height: 100%
}
.navi-bar>li:hover {
background-color: #696969;
overflow: visible
}
.navi-bar>li:hover>a {
color: #fff
}
.login-area {
width: 100%;
height: 20%
}
#input-area {
width: 70%
}
#input-area input::placeholder {
color: gray
}
#input-area input {
color: #000;
box-sizing: border-box;
border: 0;
width: 100%;
height: 100%;
border-bottom: 1px dotted #000
}
#input-area #div-id,#input-area #div-pw {
width: 100%;
height: 50%
}
#button-area {
width: 30%;
height: 100%;
float: left;
padding-top: 12px
}
#button-area button {
width: 80%;
height: 80%;
background-color: #fff;
color: #000;
border-radius: 5px;
border: 1px solid #000;
transition-duration: .2s
}
#button-area button:hover {
cursor: pointer;
background-color: #000;
color: #fff
}
.banner-area {
height: 80%;
padding-top: 120px
}
.side-menu {
border: 1px solid #000;
width: 180px;
height: 200px;
position: absolute;
top: 150px;
left: 0;
transform: translate(-90%);
transition-duration: 1s
}
.side-menu>.trigger {
position: absolute;
z-index: 5;
color: #fff;
top: 50%;
left: 90%;
transform: translateY(-50%)
}
.side-menu:hover {
transform: translate(0)
}
.menu-item {
height: 25%;
line-height: 45px;
background-color: #000;
color: gray;
cursor: pointer
}
.menu-item:hover {
background-color: #696969;
color: #fff
}
.top-menu {
width: 200px;
position: absolute;
right: 50px;
transform: translateY(-85%);
transition-duration: 1s
}
.top-menu:hover {
transform: translateY(0);
z-index: 10
}
.pop-menu {
position: absolute;
width: 100%;
opacity: 0;
transition-duration: 1.5s
}
</style>
</head>
<body>
<div class="side-menu">
<div class="menu-item">Home</div>
<div class="menu-item">About Us</div>
<div class="menu-item">Portfolio</div>
<div class="menu-item">Contact</div>
<div class="trigger">▷</div>
</div>
<div class="wrapper">
<div class="header">
<div class="logo hlayout">Logo</div>
<div class="title hlayout">
<img src="title.png">
</div>
<div class="reserved hlayout">Reserved</div>
</div>
<div class="navi">
<ul class="navi-bar">
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Portfolio</a>
<div class="pop-menu">
<div class="menu-item">Web</div>
<div class="menu-item">Native</div>
<div class="menu-item">Mobile</div>
<div class="menu-item">Security</div>
</div>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="contents">
<div class="left hlayout">Left</div>
<div class="right hlayout">
<div class="login-area">
<div id=input-area>
<div id=div-id>
<input type=text placeholder="ID를 입력하세요.">
</div>
<div id=div-pw>
<input type=password placeholder="PW를 입력하세요.">
</div>
</div>
<div id=button-area>
<button>Login</button>
</div>
</div>
<div class="banner-area">
Banner
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] 과제 - 비반응형 웹페이지 (0) | 2020.04.08 |
|---|---|
| [CSS] animated css (0) | 2020.04.07 |
| [CSS] hover (0) | 2020.04.07 |
| [CSS] 예제 - 사이드바 트리거 (0) | 2020.04.07 |
| [CSS] 예제 (z-index , transform) - 위로 오는 사진 (0) | 2020.04.07 |