체크박스와 CSS로 만드는 FAQ 리스트
체크박스를 활용하면 자바스크립트 없이도 FAQ, 또는 Q&A 상세 내용 보기를 펼쳐서 보는 사용자 인터페이스를 만들 수 있습니다.
체크박스, 또는 라디오버튼을 활용하는 기본 구조인 "input + label + content" 를 1개의 FAQ 아이템으로 구성해서 순서 없는 목록(<ul>) 태그로 전체 FAQ 리스트를 완성합니다.
HTML 내용은 같은 아이템 구조의 반복이므로 아이템 1개만 이해하면 됩니다.
"<input><label></label<div class=".content"></div>" 가 하나의 아이템을 구성하며, 제목은 라벨이 되고 제목인 라벨을 클릭하면 ".content" 클래스 요소의 내용이 표시됩니다.
<ul class="qna">
<li>
<input type="checkbox" id="qna-1">
<label for="qna-1">다른 사람 명의의 계좌로 환불받을 수 있나요?</label>
<div>
<p>다른 사람 명의로는 환불할 수 없습니다. 고객님 본인 명의 계좌로만 환불이 가능합니다.</p>
</div>
</li>
<li>
<input type="checkbox" id="qna-2">
<label for="qna-2">등록한 환불계좌를 등록/변경하고 싶어요.</label>
<div>
<p>마이페이지에서 환불계좌 등록 및 수정이 가능합니다. 환불계좌는 주문자 명의의 본인 계좌만 등록할 수 있습니다.</p>
<p>주문 진행 상태가 '환불진행중' 또는 '환불완료' 에서는 환불계좌를 변경할 수 없습니다.</p>
</div>
</li>
<li>
<input type="checkbox" id="qna-3">
<label for="qna-3">반품 신청을 철회하고 싶어요.</label>
<div>
<p>반품할 상품을 아직 보내지 않은 경우, 마이페이지에서 반품철회를 하실 수 있습니다.</p>
<p>반품철회 후 택배사에서 상품 수거가 된 것으로 확인될 경우 해당 주문은 반품처리한 것으로 재 변경됩니다.</p>
</div>
</li>
<li>
<input type="checkbox" id="qna-4">
<label for="qna-4">배송된 상품이 부재중으로 반송된 경우 어떻게 하나요?</label>
<div>
<p>부재 등의 사유로 반송된 상품은 "마이페이지 > 주문 조회"]"에서 택배사 영업소, 또는 배송 담당 택배원 연락처를 통해 재배송 요청을 할 수 있습니다. 상품이 이미 반송되어 해당 업체로 입고된 경우, 왕복 배송비를 추가 부담하셔야 합니다.</p>
</div>
</li>
<li>
<input type="checkbox" id="qna-5">
<label for="qna-5">상품에 대해서 문의하려면 어떻게 해야 하나요?</label>
<div>
<p>상품에 관한 내용은 상품상세 화면에 자세히 안내되어 있습니다. 마이페이지 > 주문내역에서 주문한 상품을 선택하면 상세페이지로 이동합니다.</p>
<p>상품 상세 내용에 표시되어 있지 않은 내용은 판매자에게 문의해 주십시오.</p>
<p>> 판매자에게 문의</p>
<p>1. "마이페이지 > 주문내역에서 상품 선택 > 배송/교환/반품 안내"에 표기된 판매자 연락처로 문의</p>
<p>2. "["마이페이지 > 1:1문의하기 > 문읜타입에서 판매자에게 문의하기"를 선택한 후 질의 내용 작성</p>
</div>
</li>
</ul>라벨을 클릭하면 체크박스가 체크된 상태가 되고, 체크된 상태의 체크박스 뒤에 오는 ".content" 요소를 보이도록 하는 간단한 동작으로 FAQ 목록의 내용 보기가 동작합니다.
CSS 맨 끝의 ".qna input:checked + label + div" 클래스가 내용을 담고 있는 요소를 보이도록 처리하는 클래스입니다.
아이템 안에는 "<label>"과 "<div>" 태그가 1개씩만 있기 때문에 ".qna input:checked ~ label ~ div" 로 구현을 해도 동일한 결과를 표시합니다.
.layout{
max-width: 600px;
margin: 0 auto;
}
.qna{
list-style: none;
margin: 0;
padding: 0;
}
.qna > li{
padding: 10px 0;
box-sizing: border-box;
}
.qna > li:nth-child(n+2){ /* 아이템 구분 점선 */
border-top: 1px dashed #aaa;
}
.qna input {
display: none;
}
.qna label { /* 제목 - 클릭 영역 */
font-weight: bold;
color: #000;
margin: 20px 0 0;
cursor: pointer;
}
.qna label::before { /* 제목 앞 화살표 */
display: block;
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-left: 8px solid #a00;
margin: 2px 0 0 8px;
float: left;
}
.qna input:checked + label::before { /* 내용 펼침 상태 제목 앞 화살표 */
border: 8px solid transparent;
border-top: 8px solid #a00;
border-bottom: 0;
margin: 8px 4px 0;
}
.qna div { /* 내용 영역 - 기본 감춤 상태 */
display: none;
color: #666;
font-size: 0.9375em;
overflow: hidden;
padding: 10px 0 10px 30px;
box-sizing: border-box;
transition: max-height 0.4s;
}
.qna input:checked + label + div { /* 내용 영역 펼침 */
display: block;
}목록 아이템 앞의 화살표는 테두리 선을 이용해 삼각형 화살표를 만드는 트릭을 활용한 것입니다.
테두리 선을 활용해 삼각형 화살표를 만드는 방법은 다음 글을 참고하면 됩니다.
-> CSS 가상 요소를 활용해 삼각형 화살표 만들기
화살표 아이콘은 아스키 코드의 삼각형 문자를 사용해서 만들 수도 있습니다.
다음처럼 제목 라벨 앞에 붙는 가상 요소 CSS 클래스를 작성하면 테두리선을 대신해 더 간결하게 표현할 수 있습니다.
.qna label::before { /* 제목 앞 화살표 */
content: "▶";
display: block;
color: #a00;
margin-right: 8px;
float: left;
}
.qna input:checked + label::before { /* 내용 펼침 상태 제목 앞 화살표 */
content: "▼";
}
완성된 샘플 코드는 다음 압축 파일을 다운로드 받으면 됩니다.