CSS
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 웹 표준 설정 (웹기능사) */
/* reset */
* {margin: 0; padding: 0;}
a {color:#222; text-decoration: none;}
</style>공통클래스를 넣고 빼는 걸로 css 수정이 가능하도록...
hover는 css로, click은 js로
dl dt dd(dl의 자식태그는 dt, dd이며 둘은 형제 관계이다-title과 data-)는
사이트맵 등에 있는 표에 주로 사용 됨
그래서 보통 dl>dt+dd>ul>li*4>a{내용} 이런 식으로 쓰임
<style>
li, dt, dd {list-style: none;}
/* common */
/* 공통클래스 잘 짜는 사람이 잘 하는 사람... */
/* 공통클래스로 디테일 짜지 않는 게 중요 (하드코딩 안 돼) */
/* 모바일은 여백 필요x, 데스크탑은 여백 필요>
그래서 최대넓이 데스크탑 기준으로 설정 */
.container {min-width: 1280px; max-width: 1280px; margin: 0 auto;}/* 반응형 */
</style>position
- fixed : 브라우저 기준 고정 (브라우저=부모)
- absolute : 팝업창과 같이 겹쳐서 나타날 수 있음 (독립된 객체로서 존재) > 그러므로 임팩트가 필요할 때 사용
나를 감싸고 있는 태그 중에서 position이 선언된 객체(태그)를 기준으로 함 - relative : absolute와 같이 씀 (absolute 안에 relative) 서열 존재, 순서를 지킴
자식 태그를 기준으로 정해짐
absolute를 최소한으로 하고 relative(자동>반응형)를 잘 써야함
rel은 서열이 있고 순차적으로 움직이기 때문에 수정하기 편함
그래서 default는 position: relative;relative를 먼저 짠 다음에 (필요할 시) absolute로 묶어주는 것!
<style>
.rel {position: relative;}
.abs {position: absolute;}
.d-block {display: block;}
.d-none {display: none;}
.d-flex {display: flex;}
.jc-btwn {justify-content: space-between;}
.ali-cntr {align-items: center;}
/* layout */
/* 공통클래스를 절대 layout에 추가해서 쓰지 않는다!!!! */
#hd {background-color: #84ade3;}
/* a는 컬러 매번 다르게 설정해줘야 함!! */
#hd a {color: white;}
#hd h1 a {font-size: 2em;}
</style>
gnb 여백 없이
<style>
/* margin-left: auto;로 하면 끄트머리에 붙게 됨!! 컨테이너 때매 이제 여백이 같게 보이는 거임 */
/* #gnb {margin-left: auto;} */
/* #gnb li {margin-left: 2rem;} */
/* #gnb li:not(:last-child) {margin-right: 2rem;} 내가 한 거*/
</style>
a에 :hover할 경우에는 적용되지 않음
li:hover이면 li의 자식들도 모두 hover로 인식
a:hover이면 각각의 a:hover상태만 인식하므로 active 지속되지 않고
a 하나에서 커서가 떨어질 때마다 끊어짐
드롭다운 메뉴
<style>
/* 선생님이 한 margin */
#gnb li {margin-left: 1rem;}
#gnb li a {transition: 0.5s; padding: 1rem; border-radius: 2rem;}
/* #gnb li:hover a {background-color: #f3a861; color: black;} */
/* 대메뉴 li에만 hover가 걸리려면? ' > '를 사용한다*/
#gnb > li:hover > a {background-color: #f3a861; color: black;}
/* 대메뉴 li에 마우스가 올라가면 소메뉴 등장 */
#gnb > li:hover ul {height: 160px; /* display: block; */}
/* height: 0; */
/* ul#gnb 안의 ul값 */
#gnb ul {
border: 1px solid #84ade3;
background-color: white;
width: 120px;
/* 소메뉴 숨어 */
/* display: none; */
height: 0;
transition: 0.5s;
overflow: hidden;
}
#gnb ul a {color: black; display: block;}
</style>
</body>#gnb ul
overflow: hidden; 은 넘치는 것을 숨겨줌
여기에 transition을 넣어줘야 ul 자체 애니메이션이 자연스럽게 흘러감
hover되지 않은 ul에서는 height값을 0으로 넣어주고(transition: 수치가 있어야 함 (화면에 보이는 것 기준, x축/y축)
그래서 z-index는 안 되고 line-height는 가능)#gnb > li:hover ul
에서 height: 160px로 보여지게끔 한다
body 파트
<body>
<!-- 1단 메뉴 -->
<header id="hd">
<div class="container d-flex jc-btwn ali-cntr">
<h1><a href="">세계의 미술작품</a></h1>
<ul id="gnb" class="d-flex">
<li class="rel">
<a href="">소장처별</a>
<!-- ul.abs>li*3>a{소메뉴$} -->
<ul class="abs">
<li><a href="">소메뉴1</a></li>
<li><a href="">소메뉴2</a></li>
<li><a href="">소메뉴3</a></li>
</ul>
</li>
<li>
<a href="">장르별</a>
<ul class="abs">
<li><a href="">소메뉴1</a></li>
<li><a href="">소메뉴2</a></li>
<li><a href="">소메뉴3</a></li>
</ul>
</li>
<li>
<a href="">테마별</a>
<ul class="abs">
<li><a href="">소메뉴1</a></li>
<li><a href="">소메뉴2</a></li>
<li><a href="">소메뉴3</a></li>
</ul>
</li>
<li>
<a href="">시대별</a>
<ul class="abs">
<li><a href="">소메뉴1</a></li>
<li><a href="">소메뉴2</a></li>
<li><a href="">소메뉴3</a></li>
</ul>
</li>
</ul>
</div>
</header>
</body>
</html>etc
- 시멘틱구조: 데이터의 정량을 보고 태그가 분화된 것
html5에 쓰이고 있음 그 전 버전은 x
- 2단 메뉴가 실전형
<!-- 1단 메뉴 -->
header#hd>.container>h1>a>img^^ul#gnb>li*4>a{대메뉴$}
<!-- 2단 메뉴 -->
header#hd>.container>h1>a>img^^ul#gnb>li*4>a{대메뉴$}+ul>li*5>a{소메뉴}