CSS로 아코디언 만들기

HTML과 CSS로 간단한 아코디언을 만드는 방법을 설명드리겠습니다. 자바스크립트 없이도 CSS만으로 아코디언을 만들 수 있지만, 자바스크립트와 함께 사용하면 더 다양한 기능을 구현할 수 있습니다. 여기서는 순수 HTML과 CSS만으로 구현하는 기본적인 아코디언을 설명하겠습니다.

 

 

국회의원의 수는 법률로 정하되, 200인 이상으로 한다.

국민의 모든 자유와 권리는 국가안전보장·질서유지 또는 공공복리를 위하여 필요한 경우에 한하여 법률로써 제한할 수 있으며, 제한하는 경우에도 자유와 권리의 본질적인 내용을 침해할 수 없다.

모든 국민은 근로의 권리를 가진다.

국가는 사회적·경제적 방법으로 근로자의 고용의 증진과 적정임금의 보장에 노력하여야 하며, 법률이 정하는 바에 의하여 최저임금제를 시행하여야 한다.

<div class="accordion">
<input id="label01" type="checkbox" class="contents">
<label class="label" for="label01">국회의원의 수는 법률로 정하되, 200인 이상으로 한다. </label>
<div class="text-wrap">
<p>국민의 모든 자유와 권리는 국가안전보장·질서유지 또는 공공복리를 위하여 필요한 경우에 한하여 법률로써 제한할 수 있으며, 제한하는 경우에도 자유와 권리의 본질적인 내용을 침해할 수 없다.</p>
</div>
<input id="label02" type="checkbox" class="contents">
<label class="label" for="label02">모든 국민은 근로의 권리를 가진다. </label>
<div class="text-wrap">
<p>국가는 사회적·경제적 방법으로 근로자의 고용의 증진과 적정임금의 보장에 노력하여야 하며, 법률이 정하는 바에 의하여 최저임금제를 시행하여야 한다.</p>
</div>
</div>

.contents {
	display: none;
}
.label {
	padding: 1em;
	display: block;
	color: #fff;
	background-color:#333;
}
.label::before{
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.label,
.text-wrap {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.text-wrap {
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.contents:checked + .label + .text-wrap {
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.contents:checked + .label::before {
	transform: rotate(-45deg) !important;
}

1. HTML 구조:
   • 각 아코디언 항목은 input[type="checkbox"], label, 그리고 내용(text-wrap)으로 구성됩니다.
   • input[type="checkbox"]는 숨겨진 상태이고, label은 아코디언의 헤더 역할을 합니다.
   • label에 있는 for 속성은 해당하는 checkbox와 연결됩니다.
2. CSS 동작:
   • input[type="checkbox"]가 체크되면 그와 연결된 text-wrap의 max-height가 변경되어 내용을 표시합니다.
   • transition 속성을 사용하여 아코디언이 부드럽게 열리고 닫히는 효과를 줍니다.

위 코드를 통해 자바스크립트 없이도 아코디언을 쉽게 구현할 수 있습니다.