수다닷컴

스크립트를 쓰지않고 css3만으로 아코디언형식faq를 만드려고 하는데
답변부분에 높이를 주자니 답변 글자수가 유동적일거같아서 안되고..
답변부분에 패딩을 주자니 animation이 부드럽게 이어지지 않습니다ㅠㅠ

답변부분에 위아래 패딩을 주는 방식으로 애니메이션이 부드럽게 이어지게 하고싶은데
html부분과 css부분 올립니다..ㅠㅠhtml

div class=faq_style
section
a href=#q1 id=q1
h1질문질문질문질문질문질문질문질문/h1
/a
p
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
/p
/section
section
a href=#q2 id=q2
h1질문질문질문질문질문질문질문질문/h1
/a
p
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
/p
/section
section
a href=#q3 id=q3
h1질문질문질문질문질문질문질문질문/h1
/a
p
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
/p
/section
section
a href=#q4 id=q4
h1질문질문질문질문질문질문질문질문/h1
/a
p
답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변답변
/p
/section
/divcss

.faq_style {
width:650px;
}

.faq_style p {
border-bottom:1px solid rgb(102,102,102);
background:rgb(200,200,200);
color:rgb(255,255,255);
font-weight:bold;
line-height:20px;
font-size:0.75em;
height:0;
padding:0 15px;
overflow:hidden;
-webkit-transition:padding .4s ease-out;
-moz-transition:padding .4s ease-out;
-o-transition:padding .4s ease-out;
-ms-transition: padding .4s ease-out;
transition:padding .4s ease-out;
}
.faq_style h1 { font-size:0.75em; }
.faq_style a {
display:block;
height:23px;
line-height:23px;
background:rgb(120,120,120);
color:rgb(255,255,255);
text-decoration:none;
text-align:center;
border-bottom:1px solid rgb(51,51,51);
}
.faq_style a:hover, a:focus {
opacity:.9;
}

.faq_style :target + p {
padding:10px 15px;
}
.faq_style #q1:target + p {height:auto;}
.faq_style #q2:target + p {height:auto;}
.faq_style #q3:target + p {height:auto;}
.faq_style #q4:target + p {height:auto;}
고수님들의 친절한 답변 부탁드려요 ㅠㅠ

신청하기