Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>faq</title>
<style>
/* reset */
html,body{width:100%;height:100%}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
/* style */
.faq {
width: 600px;
margin: 0 auto;
}
.faq .hgroup {
*zoom: 1;
}
.faq .hgroup:after {
content: '';
display: block;
clear: both;
}
.faq .hgroup h2 {
float: left;
padding: 15px 0;
}
.faq .hgroup button {
float: right;
margin: 15px 0 0 0;
border: 0;
background: none;
letter-spacing: -1px;
cursor: pointer;
}
.faq .faq_list {
border-top: 1px solid #ccc;
}
.faq .faq_list dt {}
.faq .faq_list dt a {
display: block;
padding: 8px 10px;
border-bottom: 1px solid #ccc;
color: #666;
}
.faq .faq_list dt.active a {
border-bottom: none;
background-color: #eee;
color: #222;
text-decoration: none;
font-weight: bold;
}
.faq .faq_list dt a:hover {
background-color: #eee;
color: #222;
}
.faq .faq_list dd {
display: none;
padding: 8px 10px;
border-bottom: 1px solid #ccc;
color: #666;
line-height: 1.5;
}
.faq .faq_list dd.active {
display: block;
}
.faq .faq_list dd p {
margin: 8px 0;
}
</style>
</head>
<body>
<!-- UI Object -->
<div class="faq">
<div class="hgroup">
<h2>FAQ</h2>
<button type="button"><span>답변 모두 여닫기</span></button>
</div>
<dl class="faq_list">
<dt class="active"><a href="#a1">Q:질문과 답변 목록은 무엇으로 마크업 해야 하나요?</a></dt>
<dd id="a1" class="active">
<p>A:비 순차 목록, 순차 목록, 정의 목록으로 마크업 할 수 있습니다. 더 나아가 각각의 항목 안에서 '질문'과 '답변'을 무엇으로 마크업 할 것인지에 대하여는 많은 고민이 필요 합니다.</p>
</dd>
<dt><a href="#a2">Q:질문과 답변 목록은 무엇으로 마크업 해야 하나요?</a></dt>
<dd id="a2">
<p>A:비 순차 목록, 순차 목록, 정의 목록으로 마크업 할 수 있습니다. 더 나아가 각각의 항목 안에서 '질문'과 '답변'을 무엇으로 마크업 할 것인지에 대하여는 많은 고민이 필요 합니다.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officiis nisi maxime quas explicabo officia, itaque nihil voluptatibus velit quo dolore quae quidem illum, tempore dolor provident quis expedita at.</p>
</dd>
<dt><a href="#a3">Q:질문과 답변 목록은 무엇으로 마크업 해야 하나요?</a></dt>
<dd id="a3">
<p>A:비 순차 목록, 순차 목록, 정의 목록으로 마크업 할 수 있습니다. 더 나아가 각각의 항목 안에서 '질문'과 '답변'을 무엇으로 마크업 할 것인지에 대하여는 많은 고민이 필요 합니다.</p>
</dd>
</dl>
</div>
<!-- //UI Object -->
</body>
</html>
active 클래스를 이용해서 활성화된 탭과 비활성화된 탭을
나눠서 보여주는 형태
그렇게 어렵진 않았다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 016 CSS공부(12) 이미지와 텍스트 목록 예제 실습 (0) | 2021.02.09 |
|---|---|
| 015 CSS공부(11) 갤러리 형식의 리스트 예제 실습 (0) | 2021.02.04 |
| 013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습 (0) | 2021.02.01 |
| 012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습 (0) | 2021.01.28 |
| 011 CSS공부(7) 박스모델 예제 실습 (0) | 2021.01.27 |
Daily Study/Web Dev
