STUDY/자격증

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

NightOwl 2019. 3. 19. 23:24
728x90

하루 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;}





728x90