<head>
	<style>
    .page_cover, .width.padding:first-of-type {
      display: none !important;
    }
  </style>
</head>

title: "PAINKILLER"
description: "12질문으로 극복하는 단어암기 스트레스"
ogImage: "<https://i.postimg.cc/NfwYqcmf/image.png>"
theme: "custom"
backgroundColor: "#ffffff"

imageBorderRadius: 0
calloutBorderRadius: 16
galleryBorderRadius: 16

<aside> 📌 이제 상세 메뉴에서 **바로 학습 🚀**을 클릭하면 PAINKILLER를 바로 학습할 수 있어요

사전 신청을 받아 기수제로 운영되던 PAINKILLER가 3.0으로 개편되면서 여러분 모두에게 공개되었기 때문이에요 🥳

PK의 모든 컨텐츠는 여전히 무료로 제공된답니다 🎁

</aside>

PAINKILLER

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ 게시판</title>
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        .faq-section {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }

        .question {
            cursor: pointer;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .question:hover {
            background-color: #f5f5f5;
        }

        .answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 1.7s ease;
            margin-top: 10px;
            line-height: 1.5;
            border-radius: 6px;
            border: 3px solid #fff;
            box-sizing: border-box;
            padding-bottom: 2.5px;
        }

        .answer.show {
            max-height: 1000px;
        }

        .icon {
            width: 20px;
            height: 20px;
            margin-left: 10px;
            transition: transform 0.5s ease;
        }

        .open {
            transform: rotate(180deg);
        }

        .answer a {
            display: inline-block;
            padding: 1px 6px;
            background-color: #f5f5f5;
            color: black;
            text-decoration: none;
            border-radius: 6px;
            transition: background-color 0.3s ease, color 0.3s ease;
            border: 3px solid #fff;
        }

        .answer a:hover {
            background-color: #dcdcdc;
            color: #333;
        }

    </style>
</head>
<body>

<div class="faq-section">
    <div class="question" onclick="toggleAnswer('faq1')">
        <span><b>단어암기에서 가장 중요한 것은?</b></span>
        <img class="icon" src="<https://img.icons8.com/material-outlined/24/000000/expand-arrow--v1.png>"/>
    </div>
    <div class="answer" id="faq1">
        <br>
        <b><u>불필요한 스트레스</u></b>를 받지 않는 것이 가장 중요합니다. 불필요한 스트레스를 지속적으로 받으며 의지와 노력을 계속 이어나갈 수 있는 학생은 <b><font color="red">극소수</font></b>에 불과합니다.<br>
        <br>
        지금껏 여러분, 그리고 여러분의 선배들로부터 수많은 질문을 받아왔습니다. 그 중에서도 <b><font color="red">여러분의 고통</font></b>이 가장 크게 느껴지는 <b><u>질문 12가지</u></b>를 선별하였습니다.
    </div>
</div>

<!-- 두 번째 토글과 관련된 HTML 블록 및 스크립트 부분이 삭제되었습니다 -->

<script>
    var faq1 = document.getElementById('faq1');

    // 초기 세팅을 닫힘으로 설정
    faq1.classList.remove('show');

    function toggleAnswer(id) {
        var answer = document.getElementById(id);

        if (answer.classList.contains('show')) {
            answer.style.maxHeight = '0';
            answer.classList.remove('show');
        } else {
            answer.style.maxHeight = answer.scrollHeight + 'px';
            answer.classList.add('show');
        }
    }

    function isElementInViewport(element) {
        var rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    function toggleAnswer(id) {
        var answer = document.getElementById(id);

        if (answer.classList.contains('show')) {
            answer.style.maxHeight = '0';
            answer.classList.remove('show');
        } else {
            answer.style.maxHeight = answer.scrollHeight + 'px';
            answer.classList.add('show');
        }
    }

    function handleScroll() {
        var faq1 = document.getElementById('faq1');

        var faq1Distance = faq1.getBoundingClientRect().top;

        var toggleDistanceFaq1 = 180;

        if (faq1Distance <= toggleDistanceFaq1) {
            if (!faq1.classList.contains('show')) {
                toggleAnswer('faq1');
            }
        } else {
            if (faq1.classList.contains('show')) {
                toggleAnswer('faq1');
            }
        }
    }

    // 스크롤 이벤트에 대한 이벤트 핸들러 등록
    window.addEventListener('scroll', handleScroll);

    // 화면 로딩 시 초기 상태 확인
    window.addEventListener('load', function() {
        handleScroll(); // 초기 상태 적용
    });
</script>

</body>
</html>

<aside> 🔢 oopy:slide

type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 3000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
ratio: 1.78 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px)
full: false # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false
autoplay: 
  period: 2000 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
  show: false # 점들을 숨기려면 값을 false로 변경하세요
  color: "#000000" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "#f1f1ef" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세

클래스 썸네일 START.png