Assignment

지금까지 배운 html, css를 이용해 아래와 같이 구현해 보세요.

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

어렵지 않게 Weegle 검색바를 구현했지만 멘토님의 강의를 듣고 아직 부족함을 느끼게 되었다. 이런...

HTML

  <div class="wiggle">
    <div class="container">

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

      <div class="input-box">
        <i class="fa-solid i1 fa-magnifying-glass"></i>
        <input type="text">
        <i class="fa-solid fa-keyboard"></i>
        <i class="fa-solid fa-microphone"></i>
      </div>

      <div class="btn-box">
        <button>Weegle 검색</button>
        <button>I'm feeling Lucky</button>
      </div>

      <p>Weegle 제공 서비스 : <a href="">Elglish</a></p>

    </div>
  </div>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
img{
    width: 300px;
}
.wiggle{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}
.container{
    padding: 100px 50px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.input-box{
    display: flex;
    margin: 15px;
    width: 400px;
    padding: 6px;
    border-radius: 15px;
    border: 1px solid #e2e2e2;
}
.input-box i{
    flex: 1;
}
.input-box input{
    flex: 7;
    border: none;
    outline: none;
}

button{
    margin-bottom: 15px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

결과

수정한 후의 결과이다. 물론 전의 결과랑 차이는 없지만 CSS 작성 부분에서 더욱 깔끔하고 쉽게 적용하는 것에 배울점이 많았다.

바로 input-box 작성 부분이다. 처음에 그냥 아무생각없이 position: relative;를 input-box에 주고 아이콘들한테 position: absolute;주어 top,bottom,left,right를 조정했다. 이렇게 멍청할 수가 없다. flex를 이용할 생각을 하지 못했다.

input-box자체를 <input>태그처럼 보이게 하는 방법도 신기하다고 느꼈고 평소에 사용해보지 않은 flex를 주어 크기를 나누는 부분도 확실하게 머리에 박히는 강의였다.