inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

탭 메뉴 콘텐츠(스타일 01) with JQUERY

탭 메뉴 콘텐츠(스타일 01) with JQUERY 수업을 듣고 질문남깁니다.!

해결된 질문

281

yoonk

작성한 질문수 4

1

안녕하세요.! 

이 강의를 듣고, [한걸음 더] 로 .content에 transition을 주는 방법을 설명해주셨는데 그걸 보고 해봤는데 이게 transition효과가, fadeOut()/fadeIn()효과가 걸린게 맞는지 확인차 여쭤보고 싶어서 이렇게 질문을 남깁니다. 

CSS에 transition 값을 줘도/ script에 fadeOut과 In에 (숫자 또는 'fast' 'slow') 줘도 효과가 적용이 된건지 모르겠어요ㅠㅠ 

<html>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="css/ex7.css">
</head>
<body>
    <div class="review-section">
        <h1><span>CodingWorks</span> Publishing Online Class with Inflearn</h1>
        <div class="review-pic">
            <img class="active" src="../images/face-01.jpg" data-alt="tab1">
            <img src="../images/face-02.jpg" data-alt="tab2">
            <img src="../images/face-03.jpg" data-alt="tab3">
            <img src="../images/face-04.jpg" data-alt="tab4">
        </div>
        <div class="review">
            <div class="content active" id="tab1">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla dolorem alias facere amet quae, ducimus, eum fuga hic necessitatibus perferendis, officiis saepe molestiae harum quas unde cumque ad reprehenderit perspiciatis maxime suscipit velit est architecto nobis. Doloremque vitae rerum provident mollitia, ut explicabo illum repellat magni aut veritatis. Facere, magni?</p>
                <p>
                    Sally, Web Desginer
                </p>            
            </div>
            <div class="content" id="tab2">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto a tempora porro fugit ipsum. Fugit, a minima doloremque incidunt cum odio quidem suscipit provident impedit soluta aspernatur recusandae magnam saepe animi iusto voluptate ipsa, qui voluptatum, sed tenetur! Enim quasi totam inventore nam optio magnam, nesciunt impedit reprehenderit possimus. Vero saepe fugit adipisci eveniet deserunt.</p>
                <p>
                    Amy, Graphic Designer
                </p>            
            </div>
            <div class="content" id="tab3">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, quia pariatur ipsum unde eligendi reprehenderit a vero necessitatibus nostrum consequuntur, praesentium quae id. Deleniti repellendus similique vel, quas facilis neque ut esse aut nihil? Repellendus nihil praesentium accusantium. Distinctio iste laudantium vero dicta quas? Ducimus quisquam soluta excepturi quasi eligendi, veniam quaerat dolor at placeat id ipsa fuga minus quo!</p>
                <p>
                    Jung Ho, Developer
                </p>            
            </div>
            <div class="content" id="tab4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, necessitatibus error! Perferendis cum alias quia itaque fuga repellat impedit deleniti aliquid sapiente incidunt voluptates sed praesentium, accusamus iste sequi deserunt? Iste suscipit sunt dolorem necessitatibus expedita ut, quo consequuntur accusantium culpa fugiat numquam nisi ratione nobis quaerat dolorum sequi obcaecati omnis, voluptas rerum a, commodi corrupti nam repudiandae. Est ut nemo cumque iste voluptates provident dolore consequuntur sint ex id!</p>
                <p>
                    Chris, Printing Desinger
                </p>            
            </div>
        </div>
    </div>
    <script>
        $('.review-pic img').click(function(){
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
            
            $('.review .content').removeClass('active')
            $('#' + $(this).attr('data-alt')).addClass('active')

            $('.review .content').faedOut(500)
            $('#'+ $(this).attr('data-alt')).fadeIn(500)
        })
    </script>
</body>
</html>

<CSS>

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); 

body {
    font-family: 'Raleway', sans-serif;
    /* color: #fff; */
    line-height: 1.5em;
    font-weight: 300;
    margin: 0;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
a {
    color: #222;
    text-decoration: none;
    /* font-weight: 700; */
}
.review-section {
    width: 800px;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.review-section h1 {
    font-size: 25px;
    margin-bottom: 30px;
}
.review-section h1 span {
    color: crimson;
}
.review-pic img {
    width: 100px;
    border-radius: 50%;
    filter: grayscale(1);
    margin: 5px; 
    transition: 0.3s;
    cursor: pointer;
}
.review-pic img.active {
    border-radius: 5px;
    filter: none;
}
.review {
    position: relative;
    min-height: 180px;
}
.review .content {
    display: none;
    position: absolute;
    transition: 0.5s;
}
.review .content.active {
    display: block;
}
.review .content p:nth-child(2) {
    font-weight: bold;
}

HTML/CSS jquery

답변 1

1

코딩웍스(Coding Works)

$('.review .content').fadeOut() /* .content 나타날 때 다른 .content 서서히 사라지기 */

$('#' + $(this).attr('data-alt')).fadeIn() /* .content 나타날 때 서서히 보이기 *

위에 처럼 제이쿼리로 fadeOut() fadeIn()으로 효과를 주셨으면 css에서 transition을 주셨어도 적용되지 않을거에요.

올려주신 코드로 만들어보니까 제이쿼리로 페이드인 페이드아웃 잘 만드셨는데 css에 transition을 없애주셔야 정상적으로 되네요.

0

yoonk

늦은 시간까지 답변 감사드립니다.! 
제이쿼리에 줄거면 CSS에서 또 주면 아예 적용이 안되니까 줄려면

1.제이쿼리에만! 주던가/ 아니면 CSS에서만 주던가! 이렇게 둘 중에 하나만 적용하라는 말씀이신거죠?! 

2.그리고,  탭 img에 transition: 0.3s; 걸린 것보다 .content에 제이쿼리로 더 slow로 줬는데 서서히 사라지고 서서히 나타나는 느낌이 덜 한 거 같은데 이게 그러니까 맞게 걸린게 맞는 거죠..? 눈에 보이는 효과인데 '서서히 사라진다'라는 느낌이 너무 없는 거 같은데 맞는 거죠..? 

뭔가 탭하자마자 바로 뙇! 나오는 느낌이여서 확답을 한번 더 받고 싶어서 여쭤봅니다ㅠㅠ 

0

코딩웍스(Coding Works)

1.제이쿼리에만! 주던가/ 아니면 CSS에서만 주던가! 이렇게 둘 중에 하나만 적용하라는 말씀이신거죠?! 

.active 클래스를 추가 제거하는 방식이면 css 트랜지션 속성을 사용하시는거구요.
제이쿼리 fadeIn fadeOut을 사용하시면 이 이펙트에 트랜지션 속성이 있으니까 만약 css에 트랜지션 속성이 지워주시라는 말입니다.

2.그리고,  탭 img에 transition: 0.3s; 걸린 것보다 .content에 제이쿼리로 더 slow로 줬는데 서서히 사라지고 서서히 나타나는 느낌이 덜 한 거 같은데 이게 그러니까 맞게 걸린게 맞는 거죠..? 눈에 보이는 효과인데 '서서히 사라진다'라는 느낌이 너무 없는 거 같은데 맞는 거죠..? 

css 트랜지션속성으로 속도감 조절은  transition: 0.5s 이런 식으로 하시면 되구요.
제이쿼리로 하실 경우 fadeIn('slow') fadeIn('fast') 이런식으로 해주시면 됩니다. slow fast 사용하실 때는 반드시 따옴표가 필요합니다. 수치로 넣으실 경우는 fadeIn(500) fadeIn(1000) 이런 식으로 넣어주시면 됩니다. 그런데 특별한 경우를 제외하고는 제이쿼리 자체 기본 세팅을 이용하시는게 편하고 좋습니다.

0

yoonk

넵.! '특별한 경우를 제외하고는 제이쿼리 자체 기본 세팅을 이용하시는게 편하고 좋습니다.' 새기면서, 세세하고 친절한 답변 정말정말 온 마음 가득 담아 진심으로 감사합니다.!ㅠㅠ!!!

0

코딩웍스(Coding Works)

원래 동작이 힘들어요. 큰도움은 아니지만 이렇게 말씀해 주시면 도움드리면서도 힘이 나죠~^^

class 값 한 번에 부여하는법

2

95

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

79

1

div#css-checker-widget의 해결방

1

71

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

94

2

강의듣는법

1

86

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

75

2

input checked 질문합니다.

0

81

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

152

2

Part 1 영상 안나옵니다

1

97

1

제이쿼리 작동이 안됩니다

1

211

3

강의 내용 질문있습니다.

1

128

2

일정 부분만 주석하는 방법

1

222

2

폰트어썸

1

144

2

인접선택자에 대한 질문드립니다!

1

135

2

delay 적용 안됨

1

137

1

rotateY(360deg)가 적용이 안됩니다!

1

190

2

세로이동할때 height값

1

142

2

폰트어썸이 안되요..

1

504

2

화면 정중앙에 오게끔 할수있나요?

1

175

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

241

2

넷플릭스 어코디언 예제 질문

1

107

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

163

1

active 관련 질문

1

150

2