TIL#14 Weegle 검색바 구현

15834 단어 TILCSShtmlCSS

🔥 Assignment

  1. 로고는 아래의 이미지 주소를 사용할 것.
    https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png

  2. CSS position 속성을 이용해서 아이콘들을 위치시켜라.
    💡 input과 아이콘들을 감싸주는 부모태그 용 div를 하나 만들면 아이콘을 위치시키기에 편리.

  3. 두 회색 박스에 같은 클래스 이름을 사용해서 css를 한번에 이용하라.

  4. English 는 a 태그를 이용해 구현하라.


🏁 My Code

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

[CSS]

* {
  box-sizing: border-box;
}

.wrap {
  width: 700px;
  margin: 0 auto;
  height: 100vh; 
  text-align: center;
}

img {
  width: 500px;
}

.icon {
  position: relative;    // 부모 속성 relative로 설정
}

input {
  width: 100%;
  height: 40px;
  border-radius: 30px;
  border: 1.5px solid #EDEDED;
}

.search {
  position: absolute;      // 자식 속성 absolute로 설정
  top: 12px;
  left: 25px;
  color: #AAAAAA;
}

.keyboard {
  position: absolute;     // 자식 속성 absolute로 설정
  top: 12px;
  right: 50px;
}

.mic {
  position: absolute;     // 자식 속성 absolute로 설정
  top: 12px;
  right: 25px;
  color: #4F86EC;
}

.button {
  padding: 13px;
  margin: 15px 3px 10px 3px;
  background-color: #F4F4F4;
  border: none;
  border-radius: 5px;
  color: #6e6a6a;
  font-weight: 500;
}

a {
  color: #4d4fcf;
}

p {
  font-size: small;
}

✔️ Result


What I Learned

  • weegle 검색바를 구현하면서 position 속성에 대해서 다시 한 번 공부하게 되었다.
  • 아이콘 이용 : font Awesome을 이용했는데 개인마다 고유 링크를 스크립트에 넣어줘야 사용이 가능하다.
[TIL]Python. Modules 2
Spring Security 여러명의 사용자 추가하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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