결과물

주요 코드

<div class="title"><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
  
//css
.title{
  text-align: center;
  font-size: 85px;
  font-weight:600;
  margin:auto;
  position:relative;
  top:140px;

}
.title > span:nth-child(1){
  color: rgb(66,133,244);
}
.title > span:nth-child(2){
  color: rgb(234,67,53);
}
.title > span:nth-child(3){
  color: rgb(251,188,5);
}
.title > span:nth-child(4){
  color: rgb(66,133,244);
}
.title > span:nth-child(5){
  color: rgb(52,168,83);
}
.title > span:nth-child(6){
  color: rgb(234,67,53);
}  

: Google의 크기와 색깔 위치를 설정

<div class="input">
    <form action="https://www.google.com/search" method="GET">
    <input class="input-text"name="q" type="text" placeholder="  Goole 검색  또는 URL 입력">
    </form>
</div>

//css
.input{
  width:500px;
  margin:auto;
  position:relative;
  top: 170px;
}
.input-text{
  width:500px;
  height:44px;
  margin:auto;
  font-size:15px;
  border: none;
  border-radius: 25px;
  box-shadow: 0px 0px 7px 3px rgba(200, 201, 207, 0.4);
}

: <form action="">은 input에서 받은 내용을 action의 주소로 보낸다.

<div class="container">
  <a href="https://www.instagram.com/"><div class="link"><div class="circle"><img src="인스타.jfif" alt="인스타이미지"></div><div class="name">인스타크램</div></div></a>
  <a href="https://www.naver.com/"><div class="link"><div class="circle"><img src="네이버.png" alt="네이버이미지"></div><div class="name">네이버</div></div></a>
  <a href="https://www.youtube.com//"><div class="link"><div class="circle"><img src="유튜브.png" alt="유튜브이미지"></div><div class="name">유튜브</div></div></a>
  <a href="https://velog.io/"><div class="link"><div class="circle"><img src="velog.png" alt="velog이미지"></div><div class="name">velog</div></div></a>
  <a href="https://www.acmicpc.net/"><div class="link"><div class="circle"><img src="백준.png" alt="백준이미지"></div><div class="name">백준</div></div></a>
  
 //css
  
.container{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position:relative;
  top:200px;
}

a{
  display:inline-block;

}
a:link{
  color:black;
  text-decoration: none;
}
a:visited{
  color:black;
}
a:hover{
  background-color:rgb(235, 235, 235);
  border-radius: 10%;
}

.link{
  width:112px;
  height:112px;
  border-radius: 4px;
}
.circle{
  width:48px;
  height:48px;
  border-radius:50%;
  background-color:rgba(241, 243, 244, 1);
  position:relative;
  top:24px;
  left: 32px;
}
img{
  height:24px;
  width:24px;
  position: absolute;
  margin:auto;
  top:12px;
  left:12px;

}
.name{
  margin:0px;
  position:relative;
  margin:auto;
  text-align: center;
  top:35px;
  font-size:13px;
  font-weight: bolder;
}

</div>

:
먼저 사진과 같이 바로가기 아이콘과 이름을 link라는 div로 묶고 이 div들을 또 container라는 div로 묶었다. 이를 display: flex로 설정하여 link div를 배치 하였다. 또한 link div를 클릭하면 해당 링크로 이어지게 <a>태그를 <a href="~~"><div class="link"> ~~~ </div></a> 로 묶어 아이콘이나 이름을 눌러야만 하는게 아니라 link div영역을 누르면 이동하도록 하였다. 이때 <a>태그는 줄바꿈이 되므로 display: inline-block으로 바꿔주었고 a:hover는 마우스를 올려놓았을 때의 효과를 추가한다.
<div>circle클래스는 아이콘 뒤에 회색 원이고 <img>태그의 position을 absolute로 하여 회색원을 기준으로 위치를 잡았다.

느낀점

다른 것보다 마지막 container부분의 디자인이 가장 까다로웠다. 특히 아이콘 뒤에 회색원 배경을 처음엔 아이콘을 div로 묶고 그 div의 크기를 img보다 크게한다음 배경색을 지정하고 border-radius:50%로 지정하면 될줄 알았는데 그렇게 하면 아이콘도 같이 원으로 바뀌었다. 고민하다 원래 구글 페이지를 개발자도구로 조사해서 따로 원을 넣었단걸 알아서 그대로 적용하였다.