내 웹사이트에 적용! 초간단 자바스크립트 댓글 펼치기/숨기기 튜토리얼
늑대의 코딩 스토리가 알려주는 초보자 친화적 웹 개발 가이드
🚀 자바스크립트로 댓글 접기/펼치기 기능 구현하기
웹사이트에서 댓글은 사용자와의 상호작용을 강화하는 중요한 요소입니다. 하지만 댓글이 많아지면 화면이 복잡해질 수 있어, 댓글을 접고 펼치는 기능을 추가하면 사용자 경험이 크게 향상됩니다. 이 글에서는 자바스크립트를 사용해 간단하면서도 효과적인 댓글 접기/펼치기 기능을 구현하는 방법을 설명합니다.늑대의 코딩 스토리가 초보자도 쉽게 따라 할 수 있도록 상세히 안내하겠습니다!
📋 1. 댓글 접기/펼치기 기능의 기본 구조
댓글 접기/펼치기 기능은 HTML, CSS, JavaScript를 조합하여 구현됩니다. HTML은 댓글의 구조를 정의하고, CSS는 표시/숨김 상태를 스타일링하며, JavaScript는 사용자 클릭에 따라 동적으로 상태를 변경합니다. 아래는 기본적인 구현 예제입니다.
🏗️ 1.1. HTML 구조
각 댓글은 버튼과 내용을 포함하는 컨테이너로 구성됩니다. 버튼을 클릭하면 해당 댓글이 펼쳐지거나 접힙니다.
<div class="comment-item">
<div class="comment-header">
<span class="comment-author">사용자명</span>
<button class="toggle-btn" onclick="toggleComment(this)">댓글 보기</button>
</div>
<div class="comment-content">
<div class="comment-text">
이곳에 댓글 내용이 들어갑니다. 예: 아주 멋진 게시물이네요!
</div>
</div>
</div>🎨 1.2. CSS 스타일링
CSS는 댓글 내용의 표시/숨김을 제어합니다. 기본적으로 `max-height: 0`으로 설정해 숨기고, `show` 클래스가 추가되면 표시됩니다. 부드러운 전환을 위해 `transition` 속성을 추가했습니다.
.comment-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0 20px;
background: white;
}
.comment-content.show {
max-height: 200px;
padding: 20px;
}
.toggle-btn {
background: linear-gradient(145deg, #007bff, #0056b3);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,123,255,0.4);
}⚡ 1.3. JavaScript 동작
JavaScript는 버튼 클릭 시 댓글의 표시 상태를 토글합니다. `toggleComment` 함수는 버튼의 상위 요소에서 댓글 내용을 찾아 클래스를 추가/제거하며, 버튼 텍스트도 변경합니다.
function toggleComment(button) {
// 댓글 아이템 찾기
const commentItem = button.closest('.comment-item');
const content = commentItem.querySelector('.comment-content');
const isVisible = content.classList.contains('show');
if (isVisible) {
// 댓글 접기
content.classList.remove('show');
button.textContent = '댓글 보기';
button.setAttribute('aria-expanded', 'false');
} else {
// 댓글 펼치기
content.classList.add('show');
button.textContent = '댓글 접기';
button.setAttribute('aria-expanded', 'true');
}
}🎯 2. 실제 동작하는 예제
💡 3. 결론
자바스크립트를 사용한 댓글 접기/펼치기 기능은 간단하면서도 사용자 경험을 크게 개선할 수 있는 기술입니다. 늑대의 코딩 스토리의 이 가이드를 통해 초보자도 쉽게 웹 개발 기술을 익힐 수 있습니다. 추가 질문이 있다면 언제든지 댓글로 문의하세요!
