1. Weegle검색창만들기
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://kit.fontawesome.com/7ab9e78da3.js" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="all"> <!--출력하고 싶은 부분의 전체 레이아웃-->>
<img alt="weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
<div class="icon">
<input type="text"> <!--검색창-->>
<i class="fas fa-search search"></i> <!--검색창에 들어가는 아이콘들-->>
<i class="fas fa-keyboard keyboard"></i>
<i class="fas fa-microphone mic"></i>
<button class="button">Weegle 검색</button><!--버튼 2개-->>
<button class="button">I'm feeling Lucky</button>
<p>Weegle 제공 서비스 : <a>English</a> </p>
</div>
</div>
</body>
</html>CSS
* { box-sizing: border-box; /*width와height padding과 border크기를 포함하도록(margin값제외)*/ } .all { width: 900px; /*모든 content를 가로 900px안에 넣을 것*/ margin: 0 auto; /*좌, 우에 margin auto값을 주어 중앙에 오도록 */ height: 100vh; text-align: center; /*중앙 정렬*/ } .icon { position: relative; /*absolut의 기준이 되는 상대적 포지션*/ } input{ width: 100%; height: 40px; border-radius: 30px; border: 1.5px solid #EDEDED; } .search { position: absolute; /*relative가 되는 부모 div .icon요소를 기준으로 */ top: 12px; /*위에서 12px 왼쪽에서20px*/ left: 20px; color: #AAAAAA; } .keyboard{ position: absolute; top: 12px; right: 47px; } .mic { position: absolute; top: 12px; right: 20px; color: #4F86EC; } .button { padding: 13px; margin: 15px 3px 10px 3px; background-color: #F4F4F4; border: none; color: #6e6a6a; font-weight: 500; } a { color: #4d4fcf; } p { font-weight: bold; font-size: small; }👇🏻 결과
나 다운 것, 가장 아름다운 것