위코드에서 첫 주 html/css replit로 주신 검색 바를 지금까지 배운 html,css를 이용해 스스로 토대를 짜보고 스타일을 적용시켜 보자😆
- 로고는 아래의 이미지 주소를 사용하세요.
https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png- CSS position 속성을 이용해서 아이콘들을 위치시켜보세요!
힌트 :input
과 아이콘들을 감싸주는 부모태그 용div
를 하나 만들면 아이콘을 위치시키기에 편리하겠네요.- 두 회색박스에 같은 클래스이름을 사용해서 css를 한번에 이용해보세요.
- English 는
a
태그를 이용해 구현해보세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
</head>
<body>
<header>
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="logo" class="logo">
</header>
<div class="search">
<input type="text">
<img class="search-dodbogi" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
<i class="fas fa-search></i>
<i class="fas fa-microphone"></i>
<i class="fas fa-keyboard"></i>
</div>
<div class ="weggle-container">
<div class="box">
weggle 검색
</span>
<div class="box">
I'm feeling Lucky
</span>
</div>
<p>weggle 제공 서비스 : <a style="#">English</a></p>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
text-align: center;
padding-top: 80px;
}
.search {
width: 800px;
margin: 0 auto;
position: relative;
}
input {
border-radius: 30px;
border: 1px solid #dfdfdf;
height: 60px;
width: 100%;
padding: 10px 12px 10px 12px;
}
.fas {
position: absolute;
margin: 20px 0 20px 0;
}
.fa-microphone {
right: 30px;
color: #50bcdf;
}
.fa-keyboard {
right: 60px;
}
.fa-search {
left: 30px;
color: #808080;
}
.boxz {
text-align: center;
margin: 30px;
}
.box{
display: inline-block;
background-color: #ece9e9;
border-radius: 5px;
padding: 20px;
margin-right: 30px;
}
p {
text-align: center;
}
display : inline-block을 적용시켜 속성을 바꿔주고 text-align : center로 가운데 정렬을 하는 방법에 대해 제대로 이해할 수 있었고 추후에 position을 사용하면 margin이 필요 없다는 걸 깨달았다. 스스로 짜본 css라 아직 허점도 많고 불필요한 코드가 많은데 더 연습하고 공부해서 간결하고 깔끔한 코드를 짤 수 있게 해야겠다.