과제

로고는 아래의 이미지 주소를 사용하세요.
https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png
CSS position 속성을 이용해서 아이콘들을 위치시켜보세요!
힌트 : input과 아이콘들을 감싸주는 부모태그 용 div를 하나 만들면 아이콘을 위치시키기에 편리하겠네요.
두 회색박스에 같은 클래스이름을 사용해서 css를 한번에 이용해보세요.
English 는 a 태그를 이용해 구현해보세요.

Step

HTML

이미지 링크를 가지고 있으니 img 태그 사용해서 <header> 안에 이미지 삽입하기

<header>
	<img alt="Weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</header>

input 태그 사용해서 검색창 만들기

<input type="text">

input태그랑 안에 아이콘들 한번에 div로 감싸서 레이아웃 하기 쉽게 만들어주기 - div class="search"
검색창안에 들어갈 아이콘들을 Font Awesome 이용해서 가져오기

<!-- head 부분에 추가 -->
  <script src="https://kit.fontawesome.com/e264982194.js" crossorigin="anonymous"></script>
 
<i class="fas fa-search search"></i>
<i class="fas fa-keyboard keyboard"></i>
<i class="fas fa-microphone mic"></i>

검색창 아래 회색 박스들 div로 감싸서 만들어주기

    <div class="tag-boxes">
      <div class="tag-box">Weggle 검색</div>
      <div class="tag_box">I'm feeling</div>
    </div>

a태그를 이용해 English 링크 만들어주기

최종코드

HTML

<!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" />
    <script src="https://kit.fontawesome.com/e264982194.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header>
      <img alt="Weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
    </header>
    <div class="search">
      <input type="text">
      <i class="fas fa-search search"></i>
      <i class="fas fa-keyboard keyboard"></i>
      <i class="fas fa-microphone mic"></i>
    </div>
    <div class="tag-boxes">
      <div class="tag-box">Weegle 검색</div>
      <div class="tag-box">I'm feeling Lucky</div>
    </div>
    <p>Weegle 제공 서비스 : <a>English</a></p>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  padding-top: 50px;
}

.search {
  position: relative;
}

input {
  border-radius: 30px;
  border: 1px solid #dfdfdf;
  height: 50px;
  width: 100%;
  padding: 10px 12px 10px 12px;
}

.fas {
  position: absolute;
  margin: 20px 0 20px 0;
}

.fa-search {
  left: 20px;
}

.fa-keyboard {
  right: 45px;
}

.fa-microphone {
  right: 20px;
  color: #50bcdf;
}

.tag-boxes {
  text-align: center;
  margin: 30px;
}

.tag-box {
  display: inline-block;
  background-color: #ece9e9;
  border-radius: 4px;
  padding: 15px;
  margin-right: 10px;
}

p {
  text-align: center;
  font-weight: bold;
  font-size: small;
}

a {
  color: blue;
  text-decoration: underline;
}

Author And Source

이 문제에 관하여(CSS | Weegle 검색 바 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@celeste/CSS-Weegle-검색-바-만들기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다