Weegle 검색바

devMarco·2022년 3월 30일

<!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>
    <div>
      <header class="weegle">
        <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
      </header>
        <div class="search">  
        <input class="search-box" type="text">
        <div class="icon-box1">
          <i class="fas fa-search"></i>
        </div>
        <div class="icon-box2">
          <i class="fas fa-keyboard"></i>
          <i class="fas fa-microphone"></i>
        </div>
      </div>
      <div class="search-button">
        <input class="search-button" type="button" value="Weegle 검색">
        <input class="search-button" type="button" value="i'm feeling lucky">
      </div>
      <div class="a-link">
        <p>Weegle 제공 서비스 : <a href="http://www.google.com">English</a></p>
      </div>  
      
    </div>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
>  /* 기본적으로 주어지는 마진과 패딩을 제거하기 위한 기본속성 */
.weegle {
    /*  div태그 안에 img 가운데 정렬할 때 display flex!  */
    display: flex;
    justify-content: center;
}
img{
    width: 350px;
}
.search {
    /*  아이콘 위치의 기준이 되는 부모 태그에 position relative 속성 주기  */
    position: relative;
    display: flex;
    justify-content: center;
    width: 600px;
  
    /*   div 태그 자체를 가운데 정렬 할 때! */
    margin: 0 auto;
  }

.search-box{
    border-radius: 30px;
    width: 100%;
    /* 부모의 기준으로 100% 사이즈 */
    padding-top: 10px;
    padding-bottom: 10px;
    border: solid #efefef;
}

.icon-box1 {
/* 아이콘의 위치 이동은 apsolute를 사용하여 부모의 위치를 기준으로 한다 */
    position: absolute;
    left: 24px;
    top: 11px;
    color: #808080;    
}  

.icon-box2 {
    position: absolute;
    right: 24px;
    top: 11px;
}

.fa-microphone {
    margin-left: 10px;
    color: #5086ec;
}
  
.search-button {
/* 버튼 두개를 하나로 묶어 가운데 정렬한다 */
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.search-button input {
/* 각각의 버튼에 이미지효과를 준다 */
    border-radius: 5px;
    color: #6c6e72;
    border: none;
    padding: 10px;
    margin: 0 5px;
}
  
.a-link {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    font-size: 12px;
}

devMarco

이전 포스트

웹 서비스의 역사와 발전

다음 포스트

Weegle 검색바

웹 서비스의 역사와 발전

CSS 레이아웃

0개의 댓글