블리자드 메인 사이트 Copy 해보기(12월26일)

12월20일 프로젝트 시작 20년 1월 10일(완료목표로) 현제 블리자드 메인사이트 만들기 프로젝트가 진행중이다.

주말(금,토) 크리스마스(공휴일) 제외하면

실제 프로젝트 진행한지 3일이 지났으며 약 40%(2번째 구역까지) 완성된 상태 이다.

 

최대한 디자인 및 동적인 기능을 살릴려고 하였으며 사용된 언어는

HTML,CSS(BootStrap),JavaScript(Jquery) 사용 하였다.

 

Blizzard사이트를 Copy하는데 어떻게 구상할까 하다 크게  5개의 구역으로 나누었고 한 구역씩 진행중에 있다.

그중 첫번째,두번째 구역을 동적으로 만드는데 해당 기능을 구글링으로 찾는데만 반나절 이상이 소요 되었다

하지만 해당 기능을 구글링으로 찾아 기능이 구현되는 순간만큼은 정말 짜릿하다

 

12월20일 : 첫번째 구역의 상단 navbar와 carousel을 bootstrap3으로 구현 하였다.

 

12월23일 : navbar와 carousel이 Useragent의 위치 및 크기에 따라 반응하도록 수정 하였으며 navbar dropdown클릭시 이미지가 나오는것까지 구현 하였다.(클릭 이벤트 Jquery 사용)

 

12월24일 : 두번째 구역인 갤러리이미지를 어떻게 구현할까 계속 구상하고 구글링 해보았다. 다행이도 샘플예제가 있어 소스 코드를 분석하여 나한테 맞게 커스텀 하여 기능 및 위치구현까지 완료 된 상태 이다.

 

프로젝트 진행시 어려웠던 점은 HTML 앨리먼트들의 레이아웃 구성을 잡아주는것이 힘이들었다 또한 반응형으로 동작하게 하는것도 힘들었다.. 

레이아웃 구성은 CSS 속성인 postion,margon-top,left 을 이용하여 대부분의 문제를 해결 하였으며

반응형으로 동작하기 위해 도움이 되었던것은 css의 단위 개념이였다.(대부분 %를 먹이면 Useragent위치 조정시 반응형으로 동작하지만.. 이상하게 %로 안먹힐때가 있다.. 그럴때 학원쌤이 알려준 vh,vw 단위를 써 보았다.. 잘먹힌다..!!)

 

vh,vw 단위는 viweport(웹페이지가 사용자에게 보여지는 영역) 높이 너비 맞게 사용할 수 있는 단위 이다.

 

※지금까지 만든 싸이트 디자인및 동작 결과(클릭)

원본 싸이트 링크 : https://www.blizzard.com/ko-kr/

 

Copy 프로젝트 폴더 첨부

Copy_project3.zip

4.03MB