TIL 13 - Weegle 검색 바

crystalee·2021년 7월 7일
0

wecode

목록 보기
1/3
post-thumbnail

📖 Weegle 검색 바

위코드에서 첫 주 html/css replit로 주신 검색 바를 지금까지 배운 html,css를 이용해 스스로 토대를 짜보고 스타일을 적용시켜 보자😆

👉 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 태그를 이용해 구현해보세요.

🤓 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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
  </head>
  <body>
      <header>
        <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="logo" class="logo">
      </header>
      <div class="search">
        <input type="text"> 
        <img class="search-dodbogi" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png"> 
        <i class="fas fa-search></i>
        <i class="fas fa-microphone"></i>
        <i class="fas fa-keyboard"></i>
      </div>
      <div class ="weggle-container">
        <div class="box">
        weggle 검색
        </span>
        <div class="box">
        I'm feeling Lucky
        </span>
      </div>
      <p>weggle 제공 서비스 : <a style="#">English</a></p>
  </body>
</html>

🧐 CSS


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

header{
  text-align: center;
  padding-top: 80px;
}
.search {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

input {
  border-radius: 30px;
  border: 1px solid #dfdfdf;
  height: 60px;
  width: 100%;
  padding: 10px 12px 10px 12px;
}
.fas {
  position: absolute;
  margin: 20px 0 20px 0;
}
.fa-microphone {
  right: 30px;
  color: #50bcdf;
}

.fa-keyboard {
  right: 60px;
}

.fa-search {
  left: 30px;
  color: #808080;
}
.boxz {
  text-align: center;
  margin: 30px;
}

.box{
  display: inline-block;
  background-color: #ece9e9;
  border-radius: 5px;
  padding: 20px; 
  margin-right: 30px;
}

p {
  text-align: center;
}

🙆‍♀️ 결과물

display : inline-block을 적용시켜 속성을 바꿔주고 text-align : center로 가운데 정렬을 하는 방법에 대해 제대로 이해할 수 있었고 추후에 position을 사용하면 margin이 필요 없다는 걸 깨달았다. 스스로 짜본 css라 아직 허점도 많고 불필요한 코드가 많은데 더 연습하고 공부해서 간결하고 깔끔한 코드를 짤 수 있게 해야겠다.

profile
코린이 성장일기

0개의 댓글