<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>
<!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" λ₯Ό μ
λ ₯νμΈ
</aside>
Q1. ν κΆλ§ μ λλ‘ μΈμ°λ©΄ λ κΉμ?
Q2. λ¨μ΄μ₯ μΆμ²ν΄ μ€μ€ μ μμ΄μ?
Q3. ν루μ λͺ κ°μ© μΈμμΌ νλμ?
Q4. μ’ λ μ¬μ΄ μκΈ° λ°©λ²μ μλμ?
Q5. λ¨μ΄ μΈμ°λ€ μκ°μ΄ λ€ κ°μ
Q6. λ€μμ΄κ° λ무 μ€νΈλ μ€μμ
Q7. μκΎΈ κΉλ¨Ήμ΄μ μ€νΈλ μ€ λ°μμ
Q8. μλ¬Έλ κΌΌκΌΌνκ² λ΄μΌ νλμ?
Q9. μ§μ§λ‘ 5νλ μ ν΄μΌ νλμ?
Q10. λ¬Έμ νλ©΄ μ¬μ ν λͺ¨λ₯΄λ λ¨μ΄κ° λ§μμ
Q11. μλ λ¨μ΄μΈλ° μ κ° λͺ¨λ₯΄λ λ»μΌλ‘ λμμ
Q12. μ€μ μμ λ»μ΄ λ°λ‘λ°λ‘ μ λ μ¬λΌμ
λ¨μ΄μκΈ°μ κ³ ν΅μμ λΉ λ₯΄κ² λ²μ΄λλ νμλ€μ νΉμ§μ λΆλͺ ν©λλ€. λ¨μ΄μκΈ°λ₯Ό λ¨μν μμ§μ λ Έλ ₯μ μμμΌλ‘ μκ°νμ§ μμλ€λ μ μ λλ€.
λ¨μ΄μκΈ°μ κ³ ν΅μμ κ²°κ΅ λ²μ΄λμ§ λͺ»νλ νμλ€μ νΉμ§ λν λΆλͺ ν©λλ€. λ¨μ΄μκΈ°μμ μ€λ λͺ¨λ μ€νΈλ μ€λ₯Ό μμ μ μμ§μ λ Έλ ₯μ λΆμ‘±μΌλ‘ μκ°νλ©° μμ± ν©λλ€.
μμ λ¨κ³μμ λκ»΄μ§λ λ§λ§ν¨ νμ΅ λ¨κ³μμ λν΄μ§λ λ΅λ΅ν¨ λ³΅μ΅ λ¨κ³μμ λ§μ£Όνλ ννκ° μ μ© λ¨κ³μμ λΆλͺμΉλ μ λ§κ°
λ¨μ΄μκΈ°μ λͺμμ λ²μ΄λ μ μλ λ°©λ²μ λ λ§μ μμ§μ λ Έλ ₯μ΄ μλ, λΆνμν μ€νΈλ μ€λ₯Ό μ κ±°ν΄ μ€ μ§λ¬Έκ³Ό λͺ μΎν λ΅λ³μ λλ€.
<aside>
π μμΈ λ©λ΄μμ λ°λ‘ νμ΅ π
μ ν΄λ¦νλ©΄ PAINKILLERλ₯Ό λ°λ‘ νμ΅ν μ μμ΄μ
PKμ λͺ¨λ 컨ν μΈ λ μ¬μ ν 무λ£λ‘ μ 곡λλ΅λλ€ π
</aside>