웹디자인 기능사 실기 26강. D유형 배경 자바스크립트(헤더파트)

웹디자인 기능사 실기편입니다 (html, css, javascript)
책은 영진닷컴(이기적) 웹디자인기능사 실기 24년 버전이며
블로그에 책자료는 따로 올려놓겠습니다

@charset "utf-8";
/* CSS Document */
* {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-family: "맑은 고딕";
  color: #333333;
}
body {
  min-width: 1200px; /* 와이어프레임 최소 너비 */
  min-height: 900px; /* 와이어프레임 최소 높이 */
  font-size: 20px;
}
a {
  text-decoration: none;
  display: block;
}
header {          /* A영역: 와이어프레임 왼쪽 영역 */
  float: left;
}
.top {            /* 로고+메뉴 영역 */
  float: left;
  width: 200px;
}
.logo {
  float: left;
  width: 200px;   /* 로고 영역 너비 */
  height: 100px;  /* 로고 영역 높이 */
  margin-top: 30px;     /* 로고 영역 위쪽 여백 */
  margin-bottom: 20px;  /* 로고 영역 아래쪽 여백 */
}
.logo img {       /* 로고 이미지 태그 */
  float: left;
  width: 180px;   /* 이미지 너비 */
  height: 100px;  /* 이미지 높이 */
  margin-left: 10px;  /* 이미지 왼쪽 여백 */
}
.menu {
  float: left;
  width: 200px;   /* 메뉴 영역 너비 */
  height: 250px;  /* 메뉴 영역 높이 */
  z-index: 1;     /* 화면상 가장 앞쪽에 배치 */
}
#menu_bg {        /* 메뉴 슬라이드 배경 */
  width: calc(100% - 200px); /* 배경 너비(브라우저 100%-200px) */
  height: 250px;             /* 서브 메뉴 전체 높이 */
  position: absolute;
  top: 150px;
  left: 200px;
  background-color: #353535;
  opacity: 0.5;
  z-index: 2;
  display: none;
}
.navi{            /* 전체 메뉴 스타일 */
  float: left;
  width: 190px;
  margin-left: 10px;
}
.navi〉li {        /* 각 메인 메뉴 요소 스타일(크기 지정) */
  float: left;
  width: 190px;
  height: 50px;
}
.navi〉li〉a {      /* 각 메뉴 〈a〉의 요소 스타일(텍스트스타일 지정) */
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  color: #353535;
}
.navi〉li〉a:hover {  /* 각 메뉴 〈a〉에 마우스를 올렸을 때 */
  background-color: #776d70;
  color: #ffffff;
}
.submenu {        /* 서브 메뉴 영역 스타일(크기,위치 지정) */
  width: 900px;
  height: 50px;
  position: relative;
  top: -50px;
  left: 190px;
  z-index: 3;
  display: none;
}
.submenu〉li {     /* 서브 메뉴 항목 스타일(크기 지정)*/
  float: left;
  width: 180px;
  height: 50px;
  display: inline;
}
.submenu〉li〉a {   /* 각 메뉴 〈a〉의 요소 스타일(텍스트스타일 지정) */
  line-height: 50px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}
.submenu〉li〉a:hover { /* 〈a〉요소에 마우스를 올릴 때 */
  background-color: #333333;
  color: #ffff00;
}


jQuery(document).ready(function(){
  $('.navi〉li').mouseover(function(){
    $('.submenu').stop().slideDown(500);
    $('#menu_bg').stop().slideDown(500);
  }).mouseout(function(){
    $('.submenu').stop().slideUp(500);
    $('#menu_bg').stop().slideUp(500);
  });

#웹디자인기능사실기, #웹디자인, #html, #css, #javascript,
#와이어프레임, #와이어프레임틀, #D유형,
#헤더, #메뉴, #배경, #배경자바스크립트,

링크
https://blog.naver.com/bong9tv/223569...