JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제)

하루 1시간 공부가 이렇게나 지키기 힘들다.

갖은 이유들로 인해 이미지 만들고 나의 열정은 파사삭 식어버렸지만

이제 정말 몇 일 안남았으니 차근차근 해본다.

html도, 이미지도 준비되었고 이제 CSS 옷을 입힌다.

시험지에서 명시하고 있는것은 전체 width 1200px와 각각 영역의 height 값이다.

나는 body영역으로 전체를 싸준다고 생각하고 1200px의 width 고정값을 주고

margin: 0 auto; 를 주어 브라우저 크기에 맞게 가운데 정렬을 한다.

header에는 크게 로고부분과 메뉴부분 두가지로 나뉜다.

로고부분 <h1>과 메뉴부분 <div class="gnb_wrap">을 float 속성을 주어 나란히 배치한다.

그리고 메뉴(.gnb_wrap) 내부의 1차메뉴 탑, 아우터, 팬츠, 액세서리도 나란히 배치하기 위해 float 속성을 주면?

2차메뉴까지 전부 float:left;가 적용되어 버린다.

1차메뉴만 나란히 정렬하고 2차메뉴는 세로로 정렬하기 위해서,

아래와 같이 css 선택자를 수정한다.

선택자를 더욱 구체화하기 위해 > 를 사용하여 1차메뉴에만 적용될 수록 한다.

시험지에서 요구하는 모양으로 출력이 된다.

시험지 그림을 보면 메뉴는 가운데보다 더 오른쪽으로 붙어있다.

float : right가 더 좋을것 같다.

.gnb_wrap div를 float:right로 변경했다.

전체적인 구조는 완성되었다.

이제 시험지에서도 독창성있고 가독성 있게 꾸며라고 되어있다.

구조를 크게 벗어나지 않는한 각자 재량껏 알아서 css를 활용해 꾸미면 된다.

2차메뉴의 위치는 1차메뉴에 position : relative 의 부모속성을 부여하고,

position : absolute를 이용하여 절대값으로 적절한 위치에 띄워준다. 

그리고 적절한 글자크기, 적절한 메뉴 가로 폭, 적절한 background color 등을 지정해주면?

위와 같이 header가 완성된다.

이제 2차메뉴에 display : none; 속성을 주어 잠시 숨긴다.

추후에 css 전체가 완성되면,

1차메뉴에 hover되는 순간 display:block;으로 변경하는 제이쿼리를 사용하는 것이

한정된 시간에 문제를 푸는데 도움이 된다.

오늘의 CSS 소스 코드

@charset "utf-8"; /* 초기화 */ * {padding: 0; margin: 0; color: #222328;} li{list-style: none;} a{text-decoration: none;} img{border: none;} /* 시험지에서 제공된 가로 길이 1200px 및 가운데 정렬*/ body {width: 1200px; margin: 0 auto;} #header {width: 100%; height: 100px;} #header h1 {float: left;} #header h1 a {display: block; width: 200px; height: 40px; background: url("../images/logo.png") no-repeat; text-indent: -99999px; margin-top: 30px;} .gnb_wrap {float: right;} .gnb_wrap .gnb {width: 600px;} .gnb_wrap .gnb > li {float: left; position: relative; width: 150px; height: 40px; text-align: center; font-size: 24px; margin-top: 30px;} .gnb_wrap .gnb > li > a {display: block;} .gnb_wrap .gnb > li > .gnb2 {display: none; position: absolute; left: 0; top: 50px; width: 100%; text-align: center; background-color: rgba(255,255,255,0.8);} .gnb_wrap .gnb > li > .gnb2 > li {text-align: center; font-size: 20px; width: 100%; height: 40px;}