Front-end 국비지원 #047일

JooSehyun·2022년 12월 19일
JQuery tabsaddClassappendattr()findinnerHeightjquerysrctabs디자인호텔스반응형반응형 디자인반응형 페이지제이쿼리클론코딩탭탭메뉴
0

반응형 디자인 2-6

디자인호텔스

결과

푸터도 마찬가지로 반응형으로 줄어들게 만들었다.

HTML

<footer id="footer">
		  <div class="container">
			 <div class="footer-sitemap">
				<ul>
					<li>
						<h4><i></i></h4>
						<a href="#"><span class="mapNavBt">ABOUT</span></a>
						<div class="mapSub">
							<ul>
								<li><a href="#">ABOUT US</a></li>
								<li><a href="#">SIGN UP</a></li>
								<li><a href="#">BECOME A MEMBER HOTEL</a></li>
								<li><a href="#">CAREERS</a></li>
								<li><a href="#">SUSTAINABILTY</a></li>
								<li><a href="#">INVESTOR RELATIONS</a></li>
								<li><a href="#">PARTNERS</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4><i></i></h4>
						<a href="#"><span class="mapNavBt">EXPLORE</span></a>
						<div class="mapSub">
							<ul>
								<li><a href="#">HOTELS & RESORTS</a></li>
								<li><a href="#">NEW HOTELS</a></li>
								<li><a href="#">DEALS</a></li>
								<li><a href="#">CULTURE BLOG</a></li>
								<li><a href="#">ORIGINAL EXPERIENCES</a></li>
								<li><a href="#">GALLERY</a></li>
								<li><a href="#">STORE</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4><i></i></h4>
						<a href="#"><span class="mapNavBt">CONTACT</span></a>
						<div class="mapSub">
							<ul>
								<li><a href="#">CALL US</a></li>
								<li><a href="#">EMAIL US</a></li>
								<li><a href="#">CAREERS</a></li>
								<li><a href="#">MANAGE BOOKING</a></li>
								<li><a href="#">GLOBAL OFFICES</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4><i></i></h4>
						<a href="#"><span class="mapNavBt">TRAVEL PROFESSIONALS</span></a>
						<div class="mapSub">
							<ul>
								<li><a href="#">REGISTER / LOGIN</a></li>
								<li><a href="#">SPECIAL OFFERS</a></li>
								<li><a href="#">MICE HOTELS</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4><i></i></h4>
						<a href="#"><span class="mapNavBt">PRESS</span></a>
						<div class="mapSub">
							<ul>
								<li><a href="#">NEWSROOM</a></li>
								<li><a href="#">PRESS RELEASES/a></li>
								<li><a href="#">PRESS KIT</a></li>
							</ul>
						</div>
					</li>
					<li>
						<h4><i></i></h4>
						<a href="#"><span class="mapNavBt">ABOUT</span></a>
						<div class="mapSub">
							<ul>
								<li><a href="#">MEMBER HOTELS</a></li>
								<li><a href="#">JOIN OUR NETWORK</a></li>
								<li><a href="#">MEMBER PORTAL</a></li>
							</ul>
						</div>
					</li>
				</ul>
			 </div>
			 <div class="footer-copyright-sns">
				<div class="footer-copyright">
					<address>
						&copy; © Design Hotels™ 2020 &middot; Privacy Policy &middot; Impressum &middot; Terms & Conditions 
					</address>
				</div>
				<div class="footer-sns">
				   <ul>
					  <li><a href="#"><i class="fab fa-instagram"></i></a></li>
					  <li><a href="#"><i class="fab fa-youtube"></i></a></li>
					  <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					  <li><a href="#"><i class="fab fa-twitter"></i></a></li>
					  <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
				   </ul>
				</div>
			 </div>
		  </div>
	   </footer>

JQuery

JQuery tabs

1. webst_tab

결과

탭메뉴를 제작한다. 마우스 클릭은 물론 tab을 눌러 해당 공지사항 전부 탭하여 이동이 되는지 확인한다. (웹 접근성) 을 위함이다.

HTML

<div class="tab-menu">
        <ul>
            <li class="active"><a href="#">공지사항1</a>
                <ul>
                    <li><a href="#">첫번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                    <li><a href="#">첫번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                    <li><a href="#">첫번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                </ul>
            </li>
            <li><a class="active" href="#">공지사항2</a>
                <ul>
                    <li><a href="#">두번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                    <li><a href="#">두번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                    <li><a href="#">두번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                </ul>
            </li>
            <li><a class="active" href="#">공지사항3</a>
                <ul>
                    <li><a href="#">세번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                    <li><a href="#">세번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                    <li><a href="#">세번째 공지사항입니다. 무엇이든 물어보세요..</a></li>
                </ul>
            </li>
        </ul>
    </div>

script

let tab=$('.tab-menu');
tab.find('>ul > li > ul').hide();
tab.find('>ul > li.active > ul').show();

function tabClick(){

}
tab.find('>ul > li > a').on('click focus', function(e){
    e.preventDefault();
    let $this=$(this);
    $this.next('ul').show().parent('li').addClass('active').siblings('li').removeClass('active').find('ul').hide();
});

2. attr_tab 1-1

결과

HTML

<div id="wrap">
        <div class="nav">
            <ul>
                <li id="springBtn" class="on"><a href="#"><img src="./images/btn1_1.jpg" alt="spring"></a></li>
                <li id="summerBtn"><a href="#"><img src="./images/btn2_2.jpg" alt="summer"></a></li>
                <li id="fallBtn"><a href="#"><img src="./images/btn3_2.jpg" alt="fall"></a></li>
                <li id="winterBtn"><a href="#"><img src="./images/btn4_2.jpg" alt="winter"></a></li>
            </ul>
        </div>
        <div id="image">
            <img src="./images/spring.jpg" alt="springimg">
        </div>
    </div>

script

$('#springBtn').click(function(){
    $('#image').find('img').attr({src:'./images/spring.jpg',alt:"봄"})
})
$('#summerBtn').click(function(){
    $('#image').find('img').attr({src:'./images/summer.jpg',alt:"여름"})
})
$('#fallBtn').click(function(){
    $('#image').find('img').attr({src:'./images/fall.jpg',alt:"가을"})
})
$('#winterBtn').click(function(){
    $('#image').find('img').attr({src:'./images/winter.jpg',alt:"겨울"})
})

하위 img태그를 찾아서 attr 속성 src를 변경해주는 방법

2. attr_tab 1-2

1-1 과 같은 결과물이지만 HTML 조건이 달라진다.

HTML

<div id="wrap">
        <div class="nav">
            <ul>
                <li id="springBtn" class="on"><a href="#"><img src="./images/btn1_1.jpg" alt="spring"></a></li>
                <li id="summerBtn"><a href="#"><img src="./images/btn2_2.jpg" alt="summer"></a></li>
                <li id="fallBtn"><a href="#"><img src="./images/btn3_2.jpg" alt="fall"></a></li>
                <li id="winterBtn"><a href="#"><img src="./images/btn4_2.jpg" alt="winter"></a></li>
            </ul>
        </div>
        <div id="image" class="spring"></div>
    </div>

아까와 다르게 #image 밑에 img는 없다.

script

$('#springBtn').click(function(){
    $('#image').removeClass().addClass('spring');
});
$('#summerBtn').click(function(){
    $('#image').removeClass().addClass('summer');
});
$('#fallBtn').click(function(){
    $('#image').removeClass().addClass('fall');
});
$('#winterBtn').click(function(){
    $('#image').removeClass().addClass('winter');
});

클릭함수를 실행하면서 #image에 있는 클래스를 지우고 시작하고 해당 클래스를 addClass 한다.

3. image_tab 1-1

결과

HTML

<div class="thumbs">
        <a href="./01/images/pic1.jpg"><img src="./01/images/th_pic1.jpg" alt=""></a>
        <a href="./01/images/pic2.jpg"><img src="./01/images/th_pic2.jpg" alt=""></a>
        <a href="./01/images/pic3.jpg"><img src="./01/images/th_pic3.jpg" alt=""></a>
    </div>
    <div id="largeImg"><img src="./01/images/pic1.jpg" alt="1"></div>

script

$('.thumbs a').click(function(e){
            e.preventDefault();
            let anc=$(this).attr('href');
           $('#largeImg>img').css('opacity','0').stop().animate({opacity:'1'},1000)
        });

3. image_tab 1-2

1-1과 비슷하지만 이미지 안에서 텍스트 요소가 나온다.

결과

HTML

<div class="thumbs">
        <a href="./01/images/pic1.jpg"><img src="./01/images/th_pic1.jpg" alt=""></a>
        <em>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eligendi ullam itaque tempore animi facere architecto quasi blanditiis atque incidunt. Voluptates temporibus eos eum labore consequuntur aut ipsum expedita aperiam?</em>
        <a href="./01/images/pic2.jpg"><img src="./01/images/th_pic2.jpg" alt=""></a>
        <em>Temporibus non sed aspernatur mollitia cupiditate quidem</em>
        <a href="./01/images/pic3.jpg"><img src="./01/images/th_pic3.jpg" alt=""></a>
        <em>qui omnis corporis, numquam necessitatibus eveniet, quos laboriosam!</em>
    </div>
    <div id="largeImg"><img src="./01/images/pic1.jpg" alt="1"></div>
    <div id="caption">
</div>

script

$('#caption').remove();
        $('.thumbs em').hide();
        $('.thumbs a').click(function(e){
            e.preventDefault();
            $('#caption').remove();
            let path=$(this).attr('href');
            $('#largeImg img').attr({src: path});
            let msg=$(this).next('em').text();
            $('#largeImg').append("<div id='caption'></div>");
            $('#largeImg #caption').text(msg);

            let posy=$('#largeImg #caption').innerHeight();
            $('#largeImg #caption').animate({top: -posy},300);
        });

#caption 을 remove 하여 보이지 않게 한다. em은 hide가 되고 attr src를 path로 바꿔준다. em 은 #largeImg 앞에 div id='caption'></div 를 추가하여 생성한다. 높이 값이 전부 다르므로 innerHeight 값을 구하여 animate 로 innerHeight 의 - 값으로 올라오게 한다.

profile
JooSehyun
이전 포스트

Front-end 국비지원 #046일

다음 포스트

Front-end 국비지원 #048일

0개의 댓글