TIL5-HTML&CSS_5_검색바

이동하·2020년 12월 16일

htmlcss

HTML, CSS

목록 보기

5/7

문제 : 검색바를 만들자 !

조건

CSS position 속성을 이용해서 아이콘들을 위치
두 회색박스에 같은 클래스이름을 사용해서 css를 한번에 이용
Enligh 는 a 태그를 이용해 구현
width, heigth, border-radius, font-size 등은 주

문제풀이

접근

Weegle 이미지, 검색바와 회색박스, 제공 서비스로 3등분
CSS position 속성에서 relative와 absolute를 활용
a 태그에서 underline 제거
'구글 검색바'와 유사하기 때문에 필요한 부분은 구글 페이지 '검색' 후 활용

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" />
  </head>
  <body>
    <div class="wee">
    <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" class="one">
    </div>

    <div class="sec">
      <div class="relative ser">
       <input class="key" type="text" placeholder="">
       <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png" class="absolute cir">

       <img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile25.uf.tistory.com%2Fimage%2F995172345A54CB4B334526" class="absolute kbd">

       <img src="https://www.searchpng.com/wp-content/uploads/2019/02/Voice-Search-Icon-PNG-715x715.png" class="absolute mic">
      </div>

      <center>
       <input type="submit" value="Google 검색">
       <input type="submit" value="I'm feeling Lucky">
      </center>
    </div>

    <div class="three">
      <p>Weegle 제공 서비스 <a href="" style="text-decoration:none">: English</a></p>
    </div>
  </body>
</html>

CSS

* {
    box-sizing: border-box;
  }
  
  .wee {
    width: 300px;
    margin: 5px auto;
  }
  
  .one {
    margin: auto;
    width: 280px;
  }
  
  .relative {
    position: relative;
  }
  
  .absolute {
    position: absolute;
  }
  
  .key {
    width: 100%;
    border: solid 1px #bbb;
    border-radius: 8px;
    padding: 10px 12px 10px 12px;
    font-size: 14px;
  }
  
  img {
    margin: 0;
    width: 17px;
  }
  
  .sec {
    position: relative;
    margin: 0 auto;
    padding-top: 6px;
    width: auto;
    max-width: 484px;
  }
  
  .cir {
    top: 10px;
    left: 12px;
  }
  
  .kbd {
    top: 15px;
    right: 36px;
  }
  
  .mic {
    top: 10px;
    right: 12px;
  }
  
  center input {
    background-image: -webkit-linear-gradient(top,#f8f9fa,#f8f9fa);
      background-color: #f8f9fa;
      border: 1px solid #f8f9fa;
      border-radius: 4px;
      color: #3c4043;
      ont-family: 'Apple SD Gothic Neo',arial,sans-serif;
      font-size: 14px;
      margin: 11px 4px;
      padding: 0 16px;
      line-height: 27px;
      height: 36px;
      min-width: 54px;
      text-align: center;
      cursor: pointer;
      user-select: none;
  }
  
  .three {
    font-size: 10px;
    width: 150px;
    margin: auto;
  }