인프런 커뮤니티 질문&답변
작성한 질문수
tab 메뉴 오류 질문 드립니다
해결된 질문
작성
·
813
2
전에 한번 질문드렸었는데 답변을 못받아서 다시 질문드립니다..!
제작했을 당시에는 탭 메뉴 연동이 문제가 없었는데 포폴 제작하려고 다시 확인해보니 안되더라구요 ㅠㅠ
wow.js도 되다가 안되는거 같아요 ㅠㅠ
확인해주실 수 있으실까요 ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HAY | INSPIRATION</title>
<link rel="icon" href="img/hay-favicon.ico">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Slick Slider -->
<link rel="stylesheet" href="js/slick/slick-theme.css">
<link rel="stylesheet" href="js/slick/slick.css">
<script src="js/slick/slick.min.js"></script>
<!-- Parallax Scroll -->
<script src="js/jquery.parallax-scroll.min.js"></script>
<!-- Smooth Scrolling -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- XEICON -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<!-- Wow js -->
<script src="js/wow.min.js"></script>
<!-- Custom Js & Css -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="inspiration-container">
<!-- Header -->
<header>
<div class="header-inner">
<div class="logo">
<a href="index.html"><img src="img/logo-hay.png"></a>
</div>
<div class="gnb">
<ul class="menu">
<li>
<a href="about.html" target="_parent">
<div class="menu-content">
<h2>About</h2>
</div>
</a>
</li>
<li>
<a href="product.html" target="_parent">
<div class="menu-content">
<h2>Products</h2>
</div>
</a>
</li>
<li>
<a href="inspiration.html" target="_parent">
<div class="menu-content">
<h2>Inspiration</h2>
</div>
</a>
</li>
<li>
<a href="contact.html" target="_parent">
<div class="menu-content">
<h2>Contact</h2>
</div>
</a>
</li>
</ul>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!-- Section : inspiration-visual -->
<section class="inspiration-visual bg-holder" data-width="1024" data-height="768">
<div class="inspiration-heading">
<h1>INSPIRATION</h1>
</div>
</section>
<!-- Sub menu list -->
<div class="sub-menu">
<ul class="sub-menu-item">
<li data-alt="tab1" class="active"><a href="#">sofa</a></li>
<li data-alt="tab2"><a href="#">bathroom</a></li>
<li data-alt="tab3"><a href="#">bedroom</a></li>
</ul>
</div>
<!-- Section : inspiration-sofa-collection -->
<section class="sofa-collection tabs active" id="tab1">
<div class="sofa-inner">
<!-- Heading -->
<div class="sofa-heading utd wow">
<h2>THE HAY SOFA COLLECTION</h2>
<hr class="bar">
</div>
<!-- Quilton -->
<div class="sofa-content">
<div class="sofa-left ltr wow">
<div class="sofa-big" onclick="location.href='#none'">
<img src="img/inspiration-sofa-01.png">
<div class="sofa-headline">
<h3>QUILTON 3 SEATER</h3>
<p>
Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces.
<small class="inview"><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></small>
</p>
<div class="coll-btn">
<a href="#none" class="find-dealer">FIND DEALER</a>
</div>
</div>
</div>
</div>
<div class="sofa-right rtl wow">
<div class="sofa-items-up">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-11.png">
<span class="badge best">Best</span>
</div>
<p><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-12.png">
</div>
<p><ins>Quilton Ottoman</ins></p>
</div>
</div>
<div class="sofa-items-down">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-04.png">
<span class="badge new">New</span>
</div>
<p><ins>Quilton Combination 21 Right</ins> / <ins>Kofi</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-02.png">
</div>
<p><ins>Quilton Contrast base Comb 23 Left</ins> / <ins>Kofi</ins></p>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
<div class="sofa-video">
<video class="video" width="800" controls>
<source src="videos/hay-Mags-Soft-Low-3-Seater-Sofa.mp4" type="">
</video>
</div>
<div class="section-text utd wow">
<h4>QUILTON</h4>
<p>
Described by the designers as a ‘quilted landscape sofa system’, Quilton serves as a central platform for living, working, socializing and relaxing. Offering a wide assortment of different modules, Doshi Levien’s multi-functional sofa provides the flexibility of a modular system with generous dimensions and sculpted forms. Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces.
</p>
</div>
<!-- MAGS -->
<div class="sofa-content flex-order">
<div class="sofa-right ltr wow">
<div class="sofa-items-up">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-05.png">
<span class="badge new">new</span>
</div>
<p><ins>MAGS 3 SEATER COMBINATION 1</ins> / <ins>DLM</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-06.png">
<span class="badge new">new</span>
</div>
<p style="font-size: 14px"><ins>MAGS 2,5 SEATER COMBINATION 3</ins></p>
</div>
</div>
<div class="sofa-items-down">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-07.png">
</div>
<p><ins>Mags 3 Seater comb 1</ins> / <ins>Pouf</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-08.png">
<span class="badge best">best</span>
</div>
<p><ins>Mags Sofa 3 seater comb 4</ins> / <ins>AAL 83</ins></p>
</div>
</div>
</div>
<div class="sofa-left rtl wow">
<div class="sofa-big" onclick="location.href='#none'">
<img src="img/inspiration-sofa-14.png">
<div class="sofa-headline">
<h3>MAGS 3 SEATER COMBINATION 1</h3>
<p>
Designed with maximum comfort and minimum details, the Mags sofa combines strong aesthetics with timelessness to create a HAY classic. Keeping superior comfort and quality in mind, Mags is built using a solid construction with durable, high-density foam and interior padding for optimal longevity. The low frame has a distinctly lounge feel, which is reinforced by the deep seats and results in an open, welcoming space.
<small class="inview">
<ins>MAGS SOFA</ins> / <ins>RAW RUG NO. 2</ins> / <ins>TULOU COFFEE TABLE</ins> / <ins>MOHAIR BLANKET</ins> / <ins>FIFTY-FIFTY FLOOR LAMP</ins>
</small>
</p>
<div class="coll-btn">
<a href="#none" class="find-dealer">FIND DEALER</a>
</div>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
<div class="section-text second utd wow">
<h4>MAGS</h4>
<p>
Designed with maximum comfort and minimum details, the Mags sofa ensures what lies beyond its strong aesthetic presence has an equally lasting impact. The wide range of functional modular units mean the sofa can be fully customised with chaise longue, corner modules or additional seats to suit any room or purpose, while the high quality upholstery options enables the sofa to find its own personality.
</p>
</div>
</div>
</section>
<!-- Section : inspiration-bath-collection -->
<section class="bath-collection tabs" id="tab2">
<div class="sofa-inner bath-inner">
<!-- Heading -->
<div class="sofa-heading bath-heading utd wow">
<h2>BATHROOM INSPIRATION</h2>
<hr class="bar">
</div>
<!-- Bath-container-->
<div class="sofa-video bath-video">
<video class="video" width="800" controls>
<source src="videos/hay-Waffle-Bathrobe-Waffle-Slippers.mp4" type="">
</video>
</div>
<div class="section-text utd wow">
<p>
These days, investing a little love and care in the domestic spaces we often neglect -- bathroom, we're looking at you! -- can make a world of difference. That's why we've created a range of fresh new products that are sure to brighten up that underappreciated space, from pretty and practical storage solutions like Basket, now available in new Spring colours, to the brilliant Chim Chim Scent Diffuser, which can make even the most modest of washrooms feel more like a spa.
</p>
</div>
<div class="bath-content">
<div class="bath-items">
<div class="bath-top">
<div class="bath-thum utd wow" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-01.jpg">
<span class="badge best">Best</span>
</div>
<p><ins>Basket</ins></p>
</div>
<div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-02.jpg">
</div>
<p><ins>Waffle Bathrobe Sky Blue</ins></p>
</div>
</div>
<div class="bath-down utd wow">
<div class="bath-thum" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-03.jpg">
<span class="badge new">New</span>
</div>
<p><ins>Chim Chim Scent Diffuser</ins></p>
</div>
<div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-08.jpg">
</div>
<p><ins>Colour Crate / Frotté Towel</ins></p>
</div>
<div class="bath-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-07.jpg">
</div>
<p><ins>Waffle Slippers / Giant Waffle Bath Towel</ins></p>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
</div>
</section>
<!-- Section : inspiration-bed-collection -->
<section class="bed-collection tabs" id="tab3">
<div class="sofa-inner bath-inner bed-inner">
<!-- Heading -->
<div class="sofa-heading bath-heading bed-inner utd wow">
<h2>BEDROOM INSPIRATION</h2>
<hr class="bar">
</div>
<!-- bed-container-->
<div class="bath-content bed-content">
<div class="bath-items bed-items">
<div class="bath-top bed-top utd">
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-05.jpg">
<span class="badge best">Best</span>
</div>
<p><ins>Bias Quilt / Slit Table / Turn On Lamp</ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-04.jpg">
<span class="badge new">New</span>
</div>
<p><ins>Pao Steel Pendant / Ellipse Tray / Tray Table</ins></p>
</div>
</div>
<div class="section-text utd wow">
<p>
A peaceful, productive day starts in the bedroom, so it’s the perfect place to invest some attention and care.</p>
<p>
Whether you’re looking for an elegant bedspread like Kite, Bias, or Megadot, a cozy bathrope to warm up on cold mornings, or any kind of accessory – from storage to table lamps – HAY has a little bit of everything you might need to make your bedroom the sanctuary it should be.
</p>
</div>
<div class="bath-down bed-down">
<div class="bath-thum bed-thum utd wow" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-07.jpg">
</div>
<p><ins>Matin Table Lamp / Duo Bed Linen / Tray Table </ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-09.jpg">
</div>
<p><ins>Knit</ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-10.jpg">
</div>
<p><ins>Soft Coat Hanger</ins></p>
</div>
</div>
<div class="bath-down bed-down">
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-08.jpg">
</div>
<p><ins>Chim Chim Scent Diffuser / Tray Table</ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-06.jpg">
</div>
<p><ins>Outline Cushion / Crinkle Bedspread</ins></p>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-inner">
<div class="copyright">
<img src="img/logo-hay.png" alt="">
<span>Copyrightⓒ2021.HAY.All rights reserved.</span>
</div>
<div class="sns">
<a href="#none">facebook</a>
<a href="#none">instagram</a>
<a href="#none">linkedin</a>
<a href="#none">mail</a>
<a href="#none">pinterest</a>
</div>
<div class="contact-info">
<ul>
<li>HAY ApS</li>
<li>Havnen 1, 8700 Horsens, Denmark</li>
<li>+45 4282 0282</li>
</ul>
</div>
</div>
</footer>
<!-- Go to top -->
<a class="btn-top" href="#"><i class="xi-arrow-up"></i></a>
</div>
</body></html>
/* ######### INSPIRATION ########## */
.inspiration-container {
position: relative;
}
/* Sub menu list */
.sub-menu {
width: 100%;
background-color: #f9f9f9;
}
.sub-menu-container {}
.sub-menu-item {
text-align: center;
list-style: none;
margin: 0;
}
.sub-menu-item li {
font-size: 20px;
display: inline-block;
text-transform: uppercase;
padding: 80px;
}
.sub-menu-item li a {
color: #000;
font-weight: 300;
position: relative;
padding-bottom: 8px;
}
.sub-menu-item li a:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 2px;
background: #000;
bottom: 0;
transition: 0.35s;
left: 50%;
transform: translateX(-50%);
}
.sub-menu-item li a:hover:after {
width: 100%;
}
.sub-menu-item li.active a:after {
width: 100%;
}
.tabs.active {
display: block;
}
/* ######### INSPIRATION / Section : sofa-collection ########## */
.sofa-collection {
display: none;
background-color: #f9f9f9;
}
.sofa-inner {
width: 90%;
margin: auto;
padding-top: 0;
padding-bottom: 100px;
}
.sofa-heading {
text-align: center;
}
.sofa-heading h2 {
font-size: 60px;
font-weight: bold;
margin: 0;
text-transform: uppercase;
}
.sofa-heading .bar {
display: inline-block;
height: 6px;
background: #2a3052;
margin: 30px 0;
border: none;
width: 50%;
}
.sofa-content {
overflow: hidden;
margin: 50px 0;
}
.sofa-content > div {
float: left;
width: 50%;
}
.sofa-left {}
.sofa-big {
width: 850px;
height: 720px;
position: relative;
margin: auto;
cursor: pointer;
}
.sofa-big:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
transition: 0.5s;
}
.sofa-big:hover:before {
background-color: rgba(0, 0, 0, 0.35);
}
.sofa-big img {
width: inherit;
height: inherit;
object-fit: cover;
}
.sofa-headline {
position: absolute;
width: 75%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
.sofa-headline h3 {
font-size: 40px;
font-weight: 500;
}
.sofa-headline p {
line-height: 1.5em;
}
.inview {
display: block;
font-size: 14px;
margin: 30px 0 40px;
}
.find-dealer {
background: #000;
color: #fff;
font-size: 16px;
padding: 8px 20px;
border: 2px solid #fff;
}
.coll-btn .view-more {
display: block;
text-align: center;
margin: auto;
background: #2a3052;
}
.coll-btn .view-more:hover {
background: #9b392e;
}
.sofa-right {
padding-left: 50px;
}
.sofa-items-up {
margin-bottom: 50px;
}
.sofa-thum {
width: 500px;
height: 300px;
cursor: pointer;
}
.sofa-items-up > div,
.sofa-items-down > div {
display: inline-block;
}
.sofa-thum:hover img {
transform: scale(1.1);
}
.sofa-thum:first-child {
margin-right: 20px;
}
.sofa-thum:last-child {
width: 250px;
}
.sofa-items-down .sofa-thum:first-child {
width: 300px;
}
.sofa-items-down .sofa-thum:last-child {
width: 450px;
height: 300px;
}
.sofa-photo {
display: inline-block;
width: inherit;
height: inherit;
position: relative;
overflow: hidden;
}
.sofa-photo img {
display: block;
width: inherit;
height: inherit;
transition: 0.5s;
}
.sofa-photo span {}
.sofa-thum p {
margin-top: 0;
font-size: 16px;
text-align: center;
}
.badge {
position: absolute;
color: #fff;
top: 0;
left: 0;
font-size: 12px;
padding: 0 5px;
}
.badge.best {
background: #333;
}
.badge.new {
background: #9b392e;
}
/* Video */
.sofa-video {
margin-top: 200px;
text-align: center;
position: relative;
}
.sofa-video:before {
content: ',,';
font-size: 400px;
position: absolute;
transform: rotate(180deg);
top: 60px;
left: 128px;
color: rgba(132, 132, 132, 0.6);
}
.section-text {
text-align: center;
padding: 160px;
margin-bottom: 80px;
}
.section-text h4 {
font-size: 30px;
font-weight: 500;
}
.section-text p {
line-height: 1.7em;
position: relative;
}
.section-text p:after {
content: ',,';
font-size: 400px;
position: absolute;
top: 100px;
right: -89px;
color: rgba(132, 132, 132, 0.6);
}
.section-text.second p:before {
content: ',,';
font-size: 400px;
position: absolute;
transform: rotate(180deg);
top: 10px;
left: -100px;
color: rgba(132, 132, 132, 0.6);
}
/* ######### INSPIRATION / Section : bath-collection ########## */
.bath-collection {
display: none;
background-color: #f9f9f9;
}
.bath-video {
margin-top: 100px;
}
.bath-video:before {
display: none;
}
.bath-inner .section-text {
margin-top: 80px;
}
.bath-inner .section-text p:before {
content: ',,';
font-size: 400px;
position: absolute;
transform: rotate(180deg);
top: 10px;
left: -100px;
color: rgba(132, 132, 132, 0.6);
}
.bath-content {}
.bath-items {
overflow: hidden;
}
.bath-items > div {
text-align: center;
}
.bath-top {}
.bath-down {}
.bath-top > div,
.bath-down > div {
display: inline-block;
}
.bath-thum {
padding: 20px;
cursor: pointer;
}
.bath-thum:hover img {
transform: scale(1.1);
}
.bath-photo {
display: inline-block;
width: 100%;
height: 430px;
position: relative;
overflow: hidden;
}
.bath-photo img {
display: block;
width: inherit;
height: inherit;
transition: 0.5s;
}
.bath-inner .coll-btn {
margin-top: 50px;
}
/* ######### INSPIRATION / Section : bed-collection ########## */
.bed-collection {
display: none;
background-color: #f9f9f9;
}
.bed-content {
margin-top: 80px;
}
.bed-items {}
.bed-items .section-text p:after {
top: 0px;
}
.bed-items .section-text p:first-child {
margin-bottom: 50px;
}
.bed-items .section-text p:first-child:before,
.bed-items .section-text p:first-child:after {
display: none;
}
.bed-photo {
display: inline-block;
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.bed-photo img {
display: block;
width: inherit;
height: inherit;
transition: 0.5s;
}
$(function () {
// Trigger
$('.trigger').click(function () {
$(this).toggleClass('active')
$('.gnb').toggleClass('active')
})
$('.menu a').click(function () {
$('.gnb').removeClass('active')
$('.trigger').removeClass('active')
})
// Change CSS with Scroll
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$('header, .btn-top').addClass('active')
} else {
$('header, .btn-top').removeClass('active')
}
})
// Slick Slider - Home
$('.slideshow').slick({
infinite: true,
dots: false,
autoplay: true,
autoplaySpeed: 2000,
fade: true,
speed: 1000,
pauseOnHover: false
})
// TypeIt - Welcome
$('#typing').typeIt({
strings: [""],
speed: 120,
autoStart: true,
breakLines: false,
})
// Parallax Scroll - visual
$('.bg-holder').parallaxScroll({
friction: 0.2,
direction: "vertical"
});
// inspiration tab menu
$('.sub-menu-item li').click(function(){
$(this).addClass('active')
$(this).siblings().removeClass('active')
var tab = $(this).attr('data-alt')
$('.tabs').removeClass('active')
$('#' + tab).addClass('active')
});
// Wow Scroll Reveal Animation
wow = new WOW({
boxClass: 'wow', // default
offset: 150, // default
mobile: true, // default
})
wow.init();
// Smooth Scrolling - inspiration
$('.sub-menu-item li').click(function(e){
$.scrollTo(this.hash || 500, 500)
})
});
$(function () {
// faq-accordion - contact
$('.faq-desc').eq(0).show()
$('.faq-title').click(function () {
$(this).next().stop().slideDown()
$(this).parent().siblings('.faq-item').children('.faq-desc').stop().slideUp()
$(this).parent().addClass('active')
$(this).parent().siblings('.faq-item').removeClass('active')
});
});
답변 2
0
코딩웍스(Coding Works)
지식공유자
메일보내주신 파일 확인했는데요.
TypeIt 스크립트와 충돌이 있나봐요. 어떤 충돌인지 알 수는 없구요.
가끔 이런 경우에는 2가지 경우로 해결해보세요.
2가지 경우 탭메뉴 정상적으로 작동됩니다.
1) 아래 그림처럼 다른 스크립트 보다 탭메뉴 제이쿼리를 위로 올려보세요.
2) 아예 독립적으로 아래에 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자
이런 부분은 slick, wow 등 빠진 파일이 많아서 올려주신 코드로만 확인이 어려워요.
작업하시는 전체 폴더를 압축해서 메일로 보내주세요.
webnlife@naver.com
안된다는 부분이 스크린샷에서 빨강색 박스의 탭메뉴가 작동하지 않는다는거죠?
!!! 이렇게 해결할 수 있는 문제였네요 ㅠㅠ wow.js 도 독립적으로 작성하니까 정상적으로 되고있어요 ㅠㅠㅠ 감사합니다 선생님!!