바닐라코딩 사전학습 가이드 - google 홈페이지 클론 코딩

오늘은 바닐라코딩 사전학습 가이드 STEP1의 마지막인 Google Clone을 해보려 한다.

 

제시된 조건은 다음과 같다.

 

 

• HTML, CSS만을 이용하여 구글 웹사이트와 최대한 비슷한 UI를 구현해보세요.
• UX 측면의 동작들은 구현하지 않아도 무관합니다.
• CSS 효과, 화면 조정에 대응하기는 신경 쓰지 않으셔도 괜찮습니다.
• 구글 로고나 아이콘 등은 인터넷에서 찾아서 사용하세요.
• 화면 사이즈 조정에 대한 대응은 하지 않으셔도 됩니다.

 

일단, 화면 사이즈 조정까지 해보는 것을 목표로 시작한다!

 

먼저 Wireframe을 구성하고, 클래스까지 정해 본다.

 

크게 세 박스이며,

header | .main+.search+.gobutton | .nation+.instruction

으로 나뉜다.

 

그리고 웹페이지의 글꼴을 파이어폭스의 whats font로 검색하였는데,

malgun-gothic 글꼴을 사용하는 것을 확인하였다.

 

그런데 google font에서 검색해보니 사용할 수 없게 되어있어서 사용 가능한 글꼴인 나눔 고딕체를 선택하였다.

 

이렇게 미리 구성한 것을 기반으로 html 마크업 한다.

 

결과

이제 CSS를 활용하여 디자인을 편집해본다.

 

 

header, main, footer 세 영역을 position: absolute를 활용하여 화면에 고정적으로 위치할 수 있게 하였다.

이 과정에서 화면 창 밖으로 나가는 문제가 발생했는데,

 

 

:root {}를 활용하여 변수를 고정시켜 호출하는 방법은 정말 편리하다.

개발자 도구를 활용하여 padding과 margin 값으로 인한 것을 발견하여 해결하였다.

 

그리고 폰트나 padding 같은 모든 수치는 rem으로 설정하였는데,

어제 em과 rem에 대해 공부했던 것이 생각나서였다.

 

최상단의 폰트 사이즈를 기준으로 하는 rem을 이용하여 수치를 정하면,

화면의 크기가 바뀌어도 서로서로 일정한 간격을 유지하여 보다 효율적으로 화면에 나타날 것이기 때문이다. 

 

클론 코딩 결과