버튼 중앙으로 옮기기
관련링크
본문
더보기 펼치기 버튼을 구현한 내용입니다.(인터넷에서 퍼온 것입니다)
잘 작동하는데, 더보기(닫기) 버튼이 죄측에 있어서요, 이거를 중앙으로 위치시키려고 하는데요,
여러가지 방법을 시도해보았으나 잘 되지 않아서 문의드립니다
버튼 중앙 위치 방법 알려주시면 감사하겠습니다^^ 고수님께 고맙습니다^^
https://johogun.com/test10.html 참조페이지입니다
<style>
.card-content {
width: 50%;
background-color: #fff;
border-radius: 1rem;
overflow: hidden;
margin: 5rem auto;
padding-bottom: 3rem;
}
.card-header {
padding: 0 1rem;
margin: 2rem 0;
font-size: 24px;
}
.card-description {
font-size: 20px;
padding: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-content-img {
width: 100%;
}
.card-content__more-btn {
appearance: none;
border: 1px solid black;
padding: 0.5em;
border-radius: 0.25em;
cursor: pointer;
margin: 1rem;
}
.card-content__more-btn::before {
content: '더보기';
}
.card-content__more-btn:checked::before {
content: '닫기';
}
.card-description:has(+ .card-content__more-btn:checked) {
-webkit-line-clamp:unset
}
</style>
<div class="card-content">
<img
src="https://images.unsplash.com/photo-1647773319917-f9a98647f6b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
alt="바다 사진"
class="card-content-img"
/>
<h1 class="card-header">테스트입니다</h1>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis esse
fugit nihil earum aut nobis, praesentium illum expedita quia, mollitia
possimus sed, numquam et velit aspernatur tenetur vero doloremque ipsum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero corporis
sunt suscipit beatae rerum exercitationem aliquam architecto? Aspernatur
ex in cum suscipit iusto repudiandae dolores hic, rerum, quae voluptatem
quidem.
</p>
<input type="checkbox" class="card-content__more-btn">
</div>
답변 1
아래와 같이 html + css 변경해주세요
<div class="card-content__more">
<input type="checkbox" class="card-content__more-btn">
</div>
.card-content__more{justify-content: center; display:flex;}
아 예 마음속 깊이 정말 감사드립니다. 그런데 알려주신 대로 하니까 펼치기 더보기 펼치기 기능이 작동하지를 않네요,,, 어떻게 해야 할지,,,, https://johogun.com/test11.html 이곳에서 확인가능합니다,,,,
맨 하단에...아래 코드 그대로 복붙해주세요
<script>
document.querySelector('.card-content__more-btn').addEventListener('change', function () {
var description = document.querySelector('.card-description');
if (this.checked) {
description.style.display = '-webkit-box';
description.style.webkitLineClamp = 'unset';
} else {
description.style.display = '-webkit-box';
description.style.webkitLineClamp = '3';
}
});
</script>
아이고 미니님a 님 너무 감사합니다. 정말 별볼일없는 질문에 이렇게 자세히 가르쳐주시니 너무 고맙습니다. 저로서는 고민고민하다 해결되지 않아서 질문드리게 되었고요, 해결책을 만나서 감개무량합니다~ 좀 실례되는 말씀이겠지만 솔직히 저녁식사라도 정성을 다해 대접해드리고 싶은 심정입니다. 복많이 받으시고 항상 행운이 함께하시기를 기원올립니다^^ 제가 지금 외부에 있다보니 핸펀으로 하다보니 우선 감사말씀부터 올립니다 거듭거듭 고맙습니다~^^
언제든지 도움 필요하시면 질문 주시면 됩니다.
위 처럼 샘플 예제 코드가 있다면 저뿐만 아니라 많은 분들이 도와주실꺼에요
행복한 하루 보내세요!!
성공적으로 작업이 이루어 졌습니다~ 웹페이지에서도 확인했고요~ 역시 그 어렵다는 자바스크립트를 사용하여 문제가 해결되는군요 신기하네요~ 거듭거듭 감사드립니다~~^^