[TIL]Google 검색화면 클론코딩

13208 단어 CSShtmlCSS

🤔위글(Wecode+google=Weegle)을 만들어보자

(지금까지 배운 개념들만 이용하여 구글의 검색화면을 한번 따라 만들어 보았다.)
코드 작명센스부터 1도 없는 코린이이므로 클래스 이름 무근본 주의하시길

1.Weegle의 이미지를 불러와 가운데 정렬해보기

<body>
  <div class="weegle">
    <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</body>

이미지는 일단 불러왔다.
그러나 너무 크고 왼쪽으로 치우쳐 있어서 CSS로 크기를 다듬자.

.weegle img {
  display: block;
  width: 70%;
  margin : 0 auto;
}

2.검색창과 아이콘들을 불러오고 그림과 동일하게 입력해보기

검색창은 input,아이콘은 font Awesome(https://fontawesome.com/start)을 이용했다.
(font awesome은 정말정말정말 간단하면서 쓰기 쉬워서 감동쓰👍)

    <div class="fasfa">
      <i class="fas fa-search"></i>
      <input type="text">
        <i class="fas fa-keyboard"></i>
        <span style="color:#4f86ec"><i class="fas fa-microphone" ></i>
    </div>

간단하게 토대를 잡고
부모, 자식관계의 position을 정해주고 각 크기게 맞춰 아이콘을 맞춰주자

input {
  width:90%;
  border-color: #bbb;
  border-radius: 16px;
  border-width: 1px;
  padding: 6px 0 6px 0;
  margin: 6px;
}
.fasfa {
  position: relative;
}

.fa-search {
  position: absolute;
  left: 7%;
  top: 35%;
}
.fa-keyboard {
  position: absolute;
  right: 12%;
  top: 35%;
}
.fa-microphone {
  position: absolute;
  right: 8%;
  top: 35%;

3.버튼창을 만들자

'Weegle 검색','i'm feeling Lucky'를 만들순서이다. 개인적으로 검색창이 가장 어려웠어서 시간이 제일 오래걸렸다

<button type="button" class="sectionthree">Weegle 검색</button>
<button type="button" class="sectionthree">I'm feeling Lucky</button>

css만 잘 맞춰주면 된다(참 쉽쥬?)

.sectionthree {
  margin-top: 5%;
  margin-right: 1%;
  margin-left: 1%;  border-radius: 5px;
  background-color: f9f9fa;
  border: 0;
  padding: 2% 4%;
}

4.마지막 문구 완성

마지막은 그냥 한줄 가운데에 맞춰쓰면 되는거였다. 그러나 'English'를 반드시 a태그를 이용하라는 미션을 받았으므로 a태그를 넣어서 작성했다.

 <div class="last"> 
 	<span>Weegle 제공 서비스 : <a href="">English</a>
	</span>
 </div>

css

.last {
  margin: 14px 14px;
  font-size: 15px;
}

끝!

완성된 결과물은 이러하다

(별게없다..?)

후기

감개무량하여 캡쳐해 엄마한테 보냈다...

위코드에 오기전, 생활코딩으로 따라해보기는 했지만 처음부터 끝까지 나혼자 만들어본건 이게 처음이였다.(물론 동기분들 도움받음..ㅠㅠ)
다른분들이 보면 정말 별거 없는 코드이지만, 이걸 만들려고 혼자서 아등바등한걸 보면 얼마나 기분이 좋은지😂

[모던JS: Core] 에러 핸들링
Install Kubespray on CentOS 7

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage