[mini-prj] Google Clone

구글 메인페이지를 그대로 구현하는 클론 프로젝트를 진행했다. 기본적인 html과 css를 사용하다 답답해서 flex로 구성해버림. 이렇게 구성을 해보았다.

google.com Origin

mini-prj Google Clone

접속은 이곳에서. https://breezjin.github.io/study/210603-googleclone.html

 

워낙 심플한 페이지였기에 처음엔 부담이 없었는데 막상 구현을 시작하고보니 고려할 사항이 굉장히 많았다. 의외로 특히 한참동안 애먹었던 부분이 section 영영을 화면에 맞게 배열하는 부분이었다. 결국 body size를 브라우저 height에 가변으로 맞추고 컨텐츠 영역을 별도로 잡아 flex로 영역을 조정해서 마무리.

 

제사 때문에 잠시 전주에 내려와있는데 주말 시간을 이용해 진득하게 독서실에서 정리를 해나가다보니 얼추 비슷한 모양이 나오게 되었다. 물론 아쉬운 부분이 많은데 시간이 될때 좀 더 살표볼 부분들은 아래와 같다.

• input search 영역이 포커스되면 영역이 드러나는데 이 부분을 깔끔하게 정리
• input search 영역이 포커스하면 하단에 떨어지는 select 방식의 UI 추가로 구성
• 버튼 각 상태별 처리. 특히 :hover

더 많은 영역들을 손대야 하겠지만 일단 이정도로. 계획보다 진도가 많이 못나가고 있다. 얼른 javascript 영역으로 고고싱~