https://ninefloor.github.io/web-practice/work/14/
https://ninefloor.github.io/web-practice/work/14/
ninefloor.github.io
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div id="wrap">
<header id="header">
<div id="logo">
<a href="#">
<img src="./images/image__logo.png" alt="logo">
</a>
</div>
<div id="search">
<span id="search_input">
<input type="text" name="search" id="input_s">
</span>
<a href="#"><img src="./images/image__header-search.png" alt="search"></a>
</div>
<div id="ad">
<a href="#">
<img src="./images/f24e4c750a9b4ae9.jpg" alt="ad">
</a>
</div>
<div id="menu">
<a href="#">
<img src="./images/image__header-mypage.svg" alt="mypage">
</a>
<a href="#">
<img src="./images/image__header-recent.svg" alt="recent">
</a>
<a href="#">
<img src="./images/image__header-cart.svg" alt="cart">
</a>
</div>
</header>
</div>
</body>
</html>
/* 예제용 기본 속성 시작 */
* {
margin: 0;
padding: 0;
font-family: "kolight";
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
/* 예제용 기본 속성 끝 */
#wrap{
width: 100%;
min-width: 1250px;
height: 1000px;
}
#header{
width: 1250px;
height: 113px;
margin: 0 auto;
}
#logo, #search, #ad, #menu{
float: left;
}
#logo{
width: 240px;
height: 113px;
}
#logo>a>img{
width: 240px;
height: 113px;
}
#search{
width: auto;
height: 53px;
position: relative;
margin-top: 40px;
padding: 4px 0;
box-sizing: border-box;
}
#search>#search_input{
width: 549px;
height: 44px;
display: block;
background-color: white;
border: 2px solid rgb(6, 125, 253);
border-radius: 30px;
padding: 5px 15px;
box-sizing: border-box;
}
#search>#search_input>input{
width: 100%;
height: 29px;
outline: 0;
border: none;
display: block;
font-size: 20px;
}
#search>a>img{
width: 22px;
height: 22px;
position: absolute;
top: 14px;
left: 508px;
}
#ad{
width: 182px;
height: 73px;
margin: 30px 0 0 30px;
}
#menu{
width: auto;
height: 63px;
margin: 45px 0 0 25px;
}
#menu>a>img{
margin: 0 15px;
}