[모작] SK네트웍스

• 이번에 모작해볼 홈페이지는 SK네트웍스 입니다.
• 모작의 범위는 2차메뉴까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다.

 

완성 디자인

SK네트웍스 디자인

 

1단계 : 그리드 및 레이아웃 잡기

• 1단계는 상단 탑바 기준으로 그리드를 잡았다.

탑바 그리드 잡기

 

2단계 : 로고 및 유저메뉴 커스텀

• sk네트웍스의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다.

로고 및 유저메뉴 커스텀

 

3단계 : 1차메뉴 제작

• 1차 메뉴는 총 6가지로 구성되어있다.

1차메뉴 제작

 

4단계 : 2차메뉴 제작

• 2차 메뉴는 각 1차 메뉴에 따라 메뉴의 개수가 다르기 때문에 class 별칭을 공통으로 하나 지어놓고 개별로 class 별칭을 하나 더 두어 전체 구조는 동일하게 하되, 세세한 커스텀은 개별로 진행했다.

2차메뉴 제작

 

5단계: hover 적용 및 테두리 제거

hover 적용 및 테두리 제거

 

• 여기까지 SK네트웍스 모작을 단계별로 진행해보았습니다.
• 코드는 아래 압축파일에 첨부하였으니 필요하시면 다운로드하여 확인해주세요. 압축파일의 암호는 댓글 남겨주시면 빠르게 답변 드리겠습니다. 

 

sknetworks.zip

0.00MB