css reset
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
@charset "UTF-8";
/* 기본 스타일 */
body {
font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
font-size: 14px;
line-height: 16px;
}
body, ul, ol, li, div, a {
margin:0;
padding:0;
}
ul, ol {
list-style:none; // list 앞에 표시x
}
a {
color: inherit; // 부모 요소에서 색깔 상속
text-decoration: none;
}
/* 1단 메뉴 */
.wrap {
max-width: 700px;
min-width: 500px;
margin: 5px;
}
.menu {
display: table;
width: 100%;
table-layout: fixed; // 테이블 cell 간격 일정하게 유지
}
.menu_item {
display: table-cell;
}
.menu_link {
display: block; // table-cell의 너비에 딱 맞는 너비 제작을 위한 선언
height: 36px;
border: 1px solid #ddd;
font-size: 12px;
line-height: 36px;
color: #333;
text-align: center;
}
.menu_item + .menu_item .menu_link {
margin-left: -1px; // 메뉴바의 경계 선이 겹쳐 굵어보이는데. 보더 겹침 현상 없앰 border-collapse: collapse로는 겹치는 부분이 사라지지 않음
}
.menu_item:hover .menu_link {
color: green;
font-weight: bold;
}
.menu_item.active .menu_link { // 클래스를 menu_item에 두 개 부여
position: relative; // 그 메뉴를 입력했을 때, margin -1px 때문에 뒤로 가있는 상태에서 가장 앞으로 나오게끔 함
border-color: #555;
font-weight: bold;
color: #fff;
background: gray;
}
|
cs |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="menu1.css">
<title>메뉴실습1</title>
</head>
<body>
<div class="wrap">
<ul class="menu">
<li class="menu_item"><a href="#" class="menu_link">메일</a></li>
<li class="menu_item active"><a href="#" class="menu_link">카페</a></li>
<li class="menu_item"><a href="#" class="menu_link">소프트웨어</a></li>
<li class="menu_item"><a href="#" class="menu_link">지식백과</a></li>
<li class="menu_item"><a href="#" class="menu_link">영화</a></li>
</ul>
</div>
</body>
</html>2단 메뉴 제작
사전 공부내용 가상 선택자.
가상 선택자: 가상으로 미리 정해놓은 행동을 하거나 혹은 위치에 올 경우, 그 css 스타일을 실행하라.
https://elecch.tistory.com/171
CSS 속성, 선택자 , 특정 요소 선택하기
CSS는 속성을 적용할 대상인 선택자와, 선택자에 적용할 선언부로 구성된 문법 형태를 가짐. 내부 스타일 시트 - (주로 사용) 외부 스타일 시트 - 외부에 css코드를 작성하여 html문서와 연결 인라인
elecch.tistory.com
display: block을 통해 서브메뉴가 활성시 보이도록 함.
display: none을 통해 활성화 안된 메뉴의 서브메뉴가 보이지 않도록 함.
활성화의 기준은 .active 클래스가 있느냐 없느냐가 됨.
'📚HTML, CSS > 이론 정리' 카테고리의 다른 글
| 반응형 웹사이트 제작이론[고정 레이아웃] (0) | 2023.02.05 |
|---|---|
| 반응형 웹사이트 제작이론[레이아웃 1단,2단] (1) | 2023.02.04 |
| 반응형 웹사이트 제작이론[css리셋, IR기법, float 해제] (0) | 2023.02.04 |
| 미디어 쿼리(미완성 정리) (0) | 2023.01.31 |
| CSS 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 (0) | 2023.01.27 |