Adobe xe 디자인 가이드를 보고 html/css로 홈페이지 만들기
(배경화면, 검색창, nav)
home.html
<!DOCTYPE html>
<html lang="kor">
<head>
<!-- 구글폰트 link -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="intro_bg">
<div class="header">
<div class="searchArea">
<form>
<input type="search" placeholer="Search">
<span>검색</span>
</form>
</div>
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>style.css
* {
/* 구글폰트 css */
font-family: 'Noto Sans KR', sans-serif;
/* 기본속성 제거 */
list-style: none;
text-decoration: none;
border-collapse: collapse;
margin: 0px;
padding: 0px;
color: #000;
}
.intro_bg {
background-image: url("image/intro.png");
width: 100%;
height: 718px;
}
.header {
display: flex;
width: 1280px;
margin: auto;
height: 86px;
}
.searchArea {
width: 300px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
margin-top: 24px;
}
.searchArea>form>input {
border: none;
width: 250px;
height: 40px;
background: rgba(0, 0, 0, 0);
color: #fff;
padding-left: 10px;
}
.searchArea>form>span {
width: 50px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.nav {
display: flex;
justify-content: flex-end;
line-height: 86px;
width: calc(1280px - 300px);
}
.nav>li {
margin-left: 84px;
}
.nav>li>a {
color: #fff;
}
안녕하세요!!