728x90
1. summary
- property
- float : tag 자체를 좌우로 이동
- text-decoration: link 밑줄 없애줌
- border : none; // button 테두리 없애기
- button
- border: none; // 버튼의 테두리 제거
- outline: none: // 버튼 클릭시 생기는 포커스 표시 제거
- inherit: 조상의 attribute 값을 들고 옴
- box-shadow: 해당 block 그림자 넣기
- z-index: position이 absolute, relative, fixed 같은 경우 적용, 숫자가 클수록 위로 쌓임. 팝업, 드롭다운 메뉴 만들 때 사용
- background: 배경 이미지, 색상, 위치 등을 설정하는데 사용
- background-color: 요소의 배경 색상만을 설정
- 추가 수정 부분
- box-sizing: border-box
- @media queary - screen
/* * 은 모든 element에서 적용이 되는 것이지만 property가 box-sizing이기 때문에 block 요소만 적용된다. */
* {
box-sizing: border-box; /*border-box는 자신의 부모 block 영역에서 벗어나지 못하는 것 == padding과 border 두께로 인한 size*/
}
body {
margin: 0; /*body를 browser 양끝까지 꽉 채우고 싶은 경우 - position: relative 필요 없음*/
/*position: relative;*/ /* body에 margin을 두고 싶고 dropdown-content가 해당 body width와 동일 적용하고 싶은 경우*/
}
/* 반응형 웹할 때 사용하는 것 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
/* @media 규칙 - screen
screen은 컴퓨터 화면과 같은 스크린 기반 장치를 가리킨다.
@media screen은 스크린 기반 장치에서만 해당 규칙이 적용됨을 의미
*/
2. 적용 이미지
3. 코드
- html
<!DOCTYPE html>
<html lang="en">
<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>Accordion</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<!-- 내려오는 부분 -->
<div class="dropdown">
<button class="dropbtn">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<!-- drop down content > row 끝 -->
</div>
<!-- drop down content 끝 -->
</div>
<!-- drop down 끝 -->
</div>
</body>
</html>
- css
/* 초기 setting */
/* * 은 모든 element에서 적용이 되는 것이지만 property가 box-sizing이기 때문에 block 요소만 적용된다. */
* {
box-sizing: border-box; /*border-box는 자신의 부모 block 영역에서 벗어나지 못하는 것 == padding과 border 두께로 인한 size*/
}
body {
margin: 0; /*body를 browser 양끝까지 꽉 채우고 싶은 경우 - position: relative 필요 없음*/
/*position: relative;*/ /* body에 margin을 두고 싶고 dropdown-content가 해당 body width와 동일 적용하고 싶은 경우*/
}
/* navbar container */
.navbar {
overflow: hidden; /*습관적으로 넣는건가?*/
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left; /*float : tag 자체를 움직여주는 역할*/
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /*link 밑줄 없애줌*/
}
.dropdown {
float: left;
overflow: hidden;
}
/* button도 h2 처럼 만들어주는 과정 */
.dropdown button {
font-size: 16px;
border: none; /*button 테두리 없애기*/
outline: none; /*버튼 클릭시 생기는 포커스 표시 제거 */
color: white;
padding: 14px 16px;
background-color: inherit; /*inherit : 조상의 color를 상속 받음*/
font: inherit; /*세로 정렬과 모바일에서 중요하다고 함*/
margin: 0; /*세로 정렬과 모바일에서 중요하다고 함*/
}
.navbar a:hover,
.dropdown:hover,
.dropbtn {
background-color: red;
}
/* 1. 핵심 : display 날리기, z-index로 상단에 두기*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /*그림자 방법*/
z-index: 1; /*position이 absolute, relative, fixed 같은 경우 적용, 숫자가 클수록 위로 쌓임. 팝업, 드롭다운 메뉴 만들 때 사용*/
}
.dropdown-content .header {
background: red; /*background-color 보다 적용하는 범위가 더 넓다.*/
padding: 16px;
color: white;
}
/* 2. 핵심 : hover시 display block 처리 */
.dropdown:hover .dropdown-content {
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left; /*column에서 width를 33% 먹여서 가능하다*/
}
.column a:hover {
background-color: #ddd;
}
/*반응형 웹할 때 사용하는 것*/
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
