1단계: 노멀라이즈
2단계: 컨테이너 구현
3단계: 로고바 구현
4,5단계: 메뉴바 구현, 마크업, css작업
6단계: 메뉴바 구현, 좌우 보더, 상단 여백
-
좌우에 막대기를 만들기 위해서는
.menu-box > ul > li > a에border에0px을 준 다음,border-width에0 1px를 주면 된다. 막대기 굵게 하려면 1px말고 다른 숫자 부여하면 된다. -
맨 앞과 맨 마지막 막대기와 달리, 사이에 있는 막대기들은 a를 기준으로 겹쳐있기 때문에, 좀 더 두껍다. 그러므로 맨 앞과 맨 마지막 막대기들도 사이에 있는 막대기와 똑같은 두께를 가지려면
border-left-width나border-right-width를 사용해 원하는 px를 주면 된다.
7단계: 탑 이미지 바 구현
8단계: 탑 2 이미지 바 구현
