구조
<!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>어코디언 메뉴</title>
<link rel="stylesheet" href="css/accordion.css">
</head>
<body>
<div class="container">
<!--어코디언 메뉴-->
<input id="ac-1" type="checkbox">
<label for="ac-1">about us</label>
<!--어코디언 내용-->
<div class="ac content-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.
</p>
</div>
<!--어코디언 메뉴-->
<input id="ac-2" type="checkbox">
<label for="ac-2">how we work</label>
<!--어코디언 내용-->
<div class="ac content-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
</p>
</div>
</div><!-- end:container -->
</body>
</html>
CSS
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap');
* {margin:0; padding:0; box-sizing:border-box;}
body {
font-family: 'Noto Sans KR', sans-serif; font-size:15px; color:#333;
background:url(../imgs/bg-noise.jpg);
}
/*체크박스 제거*/
input {display:none;}
/*요소들을 브라우저 수평 중앙 정렬*/
.container {width:400px; margin:50px auto;}
/*===== 어코디언 메뉴 =====*/
/*처음 시작 상태*/
label {
display:block; position:relative; height:45px; padding-left:20px;
font-size:18px; color:#777; line-height:45px;
text-transform:uppercase; text-shadow:1px 1px 1px rgba(255,255,255,0.8);
background:linear-gradient(to bottom, #F8F8F8, #EAEAEA);
box-shadow:0 0 0 1px rgba(155,155,155,0.3),
1px 0 0 0 rgba(255,255,255,0.9),
0 2px 2px rgba(0,0,0,0.2);
cursor:pointer;
}
/*마우스 오버한 상태*/
label:hover {background:#FFF;}
/*메뉴에 마우스 오버했을 때 메뉴의 다음 요소에 arrow_down.png를 메뉴 오른쪽에 배치*/
label:hover::after {
content:'';
position:absolute; right:20px; top:20px;
width:14px; height:9px;
background:url(../imgs/arrow_down.png);
}
/*클릭한 상태*/
/*input 요소에 체크되면 input 요소의 다음에 있는 label 요소의 스타일을 변경*/
/*형제인접선택자(+): 선택한 요소의 이전 또는 다음 요소를 선택한다.*/
input:checked + label {
color:#3D7489; text-shadow:0 1px 1px rgba(255,255,255,0.6);
background:#C6E1EC;
box-shadow:0 0 0 1px rgba(155,155,155,0.3),
0 2px 2px rgba(0,0,0,0.1);
}
input:checked + label::after {background:url(../imgs/arrow_up.png);}
/*===== 어코디언 내용 =====*/
/*처음 상태*/
.ac {
height:0;
background:rgba(255,255,255,0.3);
box-shadow:inset 0 0 0 1px rgba(155,155,155,0.8);
overflow:hidden; /*부모요소 바깥에 있는 자식 요소의 웹 콘텐츠(텍스트)를 안보이게 한다.*/
transition:all 0.4s ease-in;
}
.ac p {padding:20px;}
/*어코디언 메뉴를 클릭할 때 상태*/
/*형제선택자(~): 선택한 요소의 형제 요소를 선택한다.*/
input:checked ~ .ac {box-shadow:inset 0 0 0 10px rgba(155,155,155,0.3);}
/*어코디언 내용의 높이가 각각 다를 때*/
input#ac-1:checked ~ .content-1 {height:130px;}
input#ac-2:checked ~ .content-2 {height:175px;}'CSS' 카테고리의 다른 글
| 써클하버이벤트(2) (0) | 2022.11.18 |
|---|---|
| 써클하버이벤트(1) (0) | 2022.11.18 |
| 탭버튼 (0) | 2022.11.18 |
| 레이아웃 (0) | 2022.11.18 |
| 반응형냅바 (0) | 2022.11.18 |