html
- href="#none"해줘야 js가 걸림
- 속성 두 개 쓸 때에는 [src=''][alt=''] 이렇게 나눠서
<!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>세팅마무리</title>
<link rel="stylesheet" href="./css/layout.css">
</head>
<body>
<!-- header#hd>.container>h1>a[href="#none"]>img[src="./img/logo.png"][alt="잊지마라"]^^
ul#gnb>li.d1_li*4>a.d1_a{대메뉴}+ul.d2_ul>li*5>a{소메뉴들} -->
<header id="hd">
<div class="container">
<h1><a href="#none">로고<!--<img src="./img/logo.png" alt="잊지마라">--></a></h1>
<ul id="gnb">
<li>
<a href="">대메뉴</a>
<ul>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
</ul>
</li>
<li>
<a href="">대메뉴</a>
<ul>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
</ul>
</li>
<li>
<a href="">대메뉴</a>
<ul>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
</ul>
</li>
<li>
<a href="">대메뉴</a>
<ul>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
<li><a href="">소메뉴들</a></li>
</ul>
</li>
</ul>
</div>
</header>
<script src="./js/common.js"></script>
</body>
</html>CSS
<style>
/* 웹표준 */
* {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
li {list-style: none;}
/* img에 alt값이 없으면 나타나지 말라! 접근성 고려되지 않은 것은 삭제되도록 */
/* img[alt=""] {display: none;} */
/* 예제1. a태그 링크값이 비어있으면 보이지 않도록 하기 */
/* a[href=""] {display: none;} */
/* 예제2. a태그 링크값이 #none일 경우 hover>화살표 모양이 되도록 하기 */
/* a[href=""] {cursor: default;} */
.container {
width: 1200px;
margin: 0 auto; /* 가운데 정렬!!!!! */
}
#hd {background-color: #555;}
#hd .container {
display: flex;
justify-content: space-between;
align-items: center;
}
h1 a {color: white;}
#gnb {display: flex;}
/* 대메뉴 */
#gnb > li > a {color: white; font-size: 2em; line-height: 1;}
/* a만 설정 따로해야 하는 거 자꾸 까먹음ㅠㅠ */
#gnb > li {position: relative;}
#gnb ul {position: absolute;}
</style>
display: flex; 하면 justify-content, align-items가 들어갈 수 있었던 것처럼
position 넣어줘야 top left right bottom z-index가 먹힌다
- 정사각형이 화면에 있을 때 left 0%는 정사각형의 왼쪽변이 왼쪽화면 끝에 붙어서 보임
- 반대로 left 100%는 정사각형 왼쪽변이 오른쪽화면 끝에 붙음 -> 안 보이게 됨
top, left, right, bottom이 적용한 개체의 변을 지칭한다고 생각하고 그 변의 위치가 퍼센테이지, 그 비율의 기준은 부모값에 따라 다르다
다른 기능
top: 0%에 있는 걸 위로 움직여서 화면에서 사라지게 하고 싶으면
transform을 사용하면 된다
ex. transform: translateY(-100%)(y축의 100% 이므로 바깥으로 빠지겠져...)
transform은 position 안 넣어도 됨
2단 메뉴
header#hd>.container>h1>a>img^^ul#gnb>li.d1_li4>a.d1_a{대메뉴}+ul.d2_ul>li5>a{소메뉴들}
공통클래스 다 들어간 2단 메뉴 에밋 (부트스트랩용)
header#hd.fixed-top.bg-white.border-bottom>.container.d-flex.justify-content-space-between.align-items-center>h1>a>img^^ul#gnb>li.d1_li.position-relative4>a.d1_a{대메뉴}+ul.d2_ul.position-absolute>li5>a{소메뉴들}
