더보기
이전 코드
<!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;
}
.wrapper{
width: 1000px;
height: 600px;
}
.sidemenu{
width: 200px;
height: 200px;
position: fixed;
top: 300px;
left: -150px;
z-index: 1;
}
.sidemenu:hover{
position: fixed;
top: 300px;
left: 0px;
transition-duration: 0.5s;
}
.smenu>li{
list-style: none;
background-color: black;
line-height: 50px;
}
.smenu>li>a{
color: white;
text-decoration: none;
}
.smenu>li:hover{
background-color: dimgray;
font-weight: bold;
}
.smenu{
float: left;
width: 90%;
}
.arrow{
height: 200px;
line-height: 200px;
text-align: center;
background-color: black;
color: red;
}
.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;
}
.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;
}
.navi>li:hover{
background-color: dimgray;
font-weight: bold;
}
.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
}
</style>
</head>
<body>
<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="naviline">
<ul class="navi">
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</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="smenu">
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="arrow">▷</div>
</div>
</body>
</html>화살표 부분을 별도로 구성하는 방식?
<!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;
}
.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: 200px;
height: 200px;
position: fixed;
top: -200px;
right: 0px;
z-index: 1;
}
.topmenu:hover{
position: fixed;
top: 0px;
right: 0px;
transition-duration: 0.5s;
}
.smenu>li{
list-style: none;
background-color: black;
line-height: 50px;
}
.smenu>li>a{
color: white;
text-decoration: none;
}
.smenu>li:hover{
background-color: dimgray;
font-weight: bold;
}
.smenu{
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;
}
.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;
}
.navi>li:hover{
background-color: dimgray;
font-weight: bold;
}
.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
}
</style>
</head>
<body>
<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="naviline">
<ul class="navi">
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</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="smenu">
<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="smenu">
<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>
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] 예제 - 팝업 리스트 만들기 (0) | 2020.04.07 |
|---|---|
| [CSS] hover (0) | 2020.04.07 |
| [CSS] 예제 (z-index , transform) - 위로 오는 사진 (0) | 2020.04.07 |
| [CSS] 수직 정렬 - transform:translate() (0) | 2020.04.07 |
| [CSS] Transform (0) | 2020.04.07 |