Google clone coding

유하아민·2021년 8월 15일
1
post-thumbnail

구글 페이지 클론 코딩을 하는 이유

지금까지 배운 html과 css를 활용하여 구글 페이지를 클론 해보려고 한다. 기존에 있는 사이트를 그 사이트의 코드가 아닌 내가 배운 코드를 활용해 최대한 비슷하게 만들어 보면서 배웠던 코드들을 복습하고 막히는 부분은 찾아보면서 더욱 더 연습하고 공부하는데 도움이 될 거라 생각한다.

HTML을 사용하여 전체적인 구조 잡기

먼저 HTML을 사용하여 전체적인 구조를 잡아 보았다. 처음 구조를 사용할 때 쓴 코드들은 header, article, footer 태크다. 이 태그들은 시멘틱 태그들로 html의 문서를 작성할 때 전체적인 구조를 나눠주는 역할들을 한다. 먼저 내가 사용한 header태크는 글의 머리말을 즉 상단영역을 정의하는 태그이고 article 태그는 글의 독립적인 부분 혼자서도 의미를 가질 수 있는 부분에서 사용하는 태그고 footer태그는 글의 하단부분을 정의하는 태그이다.

header영역 html

header태그 안에 있는 것들은 그냥 보기에는 텍스트로 구성 돼있지만 마우스를 가져다 데니 누를 수 있는 버튼으로 되어있었다. 그래서 우선 div 태그를 만들어 텍스트를 작성하고 그 텍스트를 버튼태그로 감싸주었다. 그 옆에 앱 아이콘은 플래티콘이라는 무료 아이콘 공유 사이트에서 다운받아서 이미지로 넣어 두었다. 그 후 텍스트를 전체적으로 오른쪽으로 이동시키기 위해 div태그를 사용해 태그를 감싸두었다

article영역 html

내가 정한 article 영역안에 구성은 위에 사진과는 살짝 다르지만 구글이라는 큰 텍스트와 그 바로 밑에 검색바까지를 article영역으로 지정했다. 먼저 구글이라는 큰 텍스트는 제목이라는 의미에 h1태크를 활용하였고 그 밑에
검색바는 input태그를 사용하였다. 구글에서 사용하는 검색바랑 비슷하게 만들기 위해 type은 search 형식을 사용했고 placeholder 속성을 사용하여 대기 상태일 때 문구를 넣어주었다. 그리고 검색바 안에 돋보기 아이콘과 마이크 아이콘이 있어서 input택스 앞뒤로 폰트어썸이라는 무료 폰트 공유 사이트에서 비슷한 폰트를 찾아 넣어주었다. 뒤에 마이크 아이콘은 누룰 수 있는 버튼 형식으로 돼있어서 버튼 태그를 추가하였다.

footer영역 html

footer태크로는 바로 밑에 바로가기 아이콘들을 지정하였다. 바로가기 아이콘들은 전부 버튼으로 구성돼있어서 버튼태그를 사용하였고 아이콘들은 header부분에서 앱 아이콘을 다운받았던 플래티콘 사이트에서 다운받아 이미지를 넣어주었고 아이콘 밑에 텍스트는 색을 지정하기 위해 div태크를 추가하여 넣어주었다. 그리고 구글에서 보이는 것처럼 바로가기 아이콘 위치를 지정하기 위해 전체 태그를 묶어주는 div태그를 추가하였고 바로가기 아이콘의 위 아래 영역 또한 위치를 지정해야 하므로 위 아래 영역을 따로 div로 묶어주었다.

CSS를 사용하여 디자인 만들기

html로 전체적인 구조를 설정하고 이제 css를 활용해서 디자인을 만들려고 한다. 내가 만든 구글 클론은 다크모드로 설정이 되어있어서 전체적인 배경색은 구글 다크모드 설정색인 #35363a 색으로 바꾼 후에 시작하였다. 그리고 flex속성을 사용하여 각 아이템들을 구글과 최대한 비슷한 위치에 배치를 하였고 디테일한 부분들은 내가 배운 속성들을 최대한 활용하고 모르는 부분들은 찾아보면서 비슷하게 만들려고 노력했다.

header영역 css

먼저 header영역의 텍스트들은 오른쪽에 배치되어있으므로 flex속성을 활용 텍스트들을 끝으로 보내는 felx-end값을 넣어 끝쪽으로 배치를 하였고 텍스트들 또한 배치를 해야하기 때문에 그 부모 태그인 main태그에도 flex속성을 사용하였다. 다음 구글에서는 버튼이 따로 보이지 않고 텍스트 자체로 버튼기능을 하기에 버튼의 배경색과 테두리를 제거 해주었고 제일 오른쪽에 있는 로그인 표시는 동그란 버튼으로 돼있으므로 버튼자체에 boder-radius라는 테두리의 기울기를 조정하는 속성을 사용하여 버튼을 원모양으로 바꿔주었다.
그리고 Gmail, 이미지라고 돼있는 버튼에는 마우스를 가져다 데면 밑에 밑줄이 생기는 효과가 있어 마우스를 덴다는 뜻의 가상클래스선택자 :hover를 사용하여 밑줄이 들어가는 효과를 넣어주었다.

article영역 css

article영역의 첫번째 부분인 Google 텍스트는 가운데 위치해 있기 때문에 text-align 속성을 사용하여 가운데로 배치했고 그 아래 검색바는 테두리가 둥근모양이기 때문에 아까 사용한 테두리의 기울기를 조정하는 boder-radius 속성을 사용하여 둥글게 만들어 주었다. 그리고 아이콘들을 검색바 안에 넣기 위해 position 속성을 사용하여 내가 원하는 위치로 이동할 수 있게 만들어주고 각 아이콘들의 위치를 바꿔주었다.

footer영역 css

footer영역의 바로가기 아이콘들은 felx속성을 사용하여 각 아이템들을 가운데로 이동시켜주고 위 아래 영역들의 아이콘들을 가로배치 시켜주기위해 각 아이콘들이 포함된 선택자에 따로 flex 속성을 사용하였다. 그리고 아이콘과 텍스트를 포함한 영역을 똑같이 만들기 위해 아이콘 이미지와 텍스트를 감싸고 있는 버튼태그에 width값과 height값을 지정해줬다. 그리고 영역안에 아이콘과 텍스트의 배치를 위해 다시한번 버튼태그에 flex를 사용하여 위치를 지정해줬다. 마지막으로 구글화면에서 바로가기 아이콘에 마우스를 가져다 데면 그림자가 생기는 효과가 있어 아이템을 포함한 태그에다 :hover 선택자를 사용하여 그림자를 주는 속성인 box-shadow를 사용해 마우스를 데면 그림자가 생기는 효과를 적용하였다.

결과

구글클론을 하며 배운점

막상 완성한 결과물을 보니 아쉬운 점도 많고 부족한 점도 많이 보였다. 생략할 수 있는 코드도 많고 중복된 코드들도 많아 가독성이 떨어져 보였다. 또한 클래스를 따로 주지 않고 태그 자체에 css속성을 적용한 부분이 많았는데 이렇게 사용하면 중복 태그들이 많아질때 원치 않는 태그의 속성도 바뀌고 수정하기도 어려울 거 같아 좋지 못한 습관인 거 같다.
처음 클론을 하려고 생각했을 때는 구글 화면이 단순한 구조로 되어있어서 어렵지 않을 거라 생각했는데 코드로 만들려고 하니 모르는 부분도 많고 막히는 부분도 많았다 단순한 구조도 전부 계산해서 해야 했고 쉽다 생각한 구조도 생각보다 복잡하게 느껴졌다.
클론 코딩을 완성하면서 부족한 점도 많이 보이고 아쉬운 점도 많았지만 클론을 직접 만들어보니 내가 공부했던 지식들이 좀 더 체득이 되는 느낌이고 모르는 부분들을 직접 찾아보면서 새로 알게된 코드들도 많았다. 공부를 하며 따라치는 코딩이 아닌 내가 생각하고 구상하여 코드를 치니 내가 배운 것들을 좀 더 잘 알게된 거 같다. 앞으로 여러 클론을 만들면서 배운것들을 진짜 내것으로 만드는 연습이 필요한 거 같다.

0개의 댓글