붕차야 공부하자

스크롤 바; 마우스 휠 돌릴 때만 스크롤 나옴

날라차붕차 — Mon, 2 May 2022 17:33:24 +0900

간혹 스크롤 바를 싫어하는 사람들이 있다. 요청할 때 스크롤 할때만 스크롤 바가 나오게 해달라고 요청한다...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
	<style>
		.wrap {margin-top:100px;}
		.list {width:300px; height:200px; margin:0 auto; padding:0 10px; border:1px solid #ddd;}
		.list li {margin:10px 0 0 30px; background:#f2f2f2;}

		.y-bar {overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2); scrollbar-base-color:transparent; scrollbar-face-color:#ccc; scrollbar-highlight-color:transparent; scrollbar-track-color:transparent; scrollbar-arrow-color:#fff; scrollbar-shadow-color:#ccc;}
		.y-bar::-webkit-scrollbar {width:4px; background-color:transparent;}
		.y-bar::-webkit-scrollbar-button {display:none;}
		.y-bar::-webkit-scrollbar-thumb {border-radius:2em; background-color:transparent;}
		.y-bar.on::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.5);}
	</style>
</head>
<body>
<div class="wrap">
	<ol class="list y-bar">
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
		<li> Lorem ipsum dolor sit.</li>
	</ol>
</div>
<script>
$(function(){

	// scroll 이벤트
	function overScroll() {

		var listWrap = $('.list');

		listWrap.off('scroll').on('scroll', function(){
			$(this).addClass('on');
		});

		$.fn.scrollStopped = function(callback) {
			var that = this, 
				$this = $(that);

			$this.scroll(function(ev) {
				clearTimeout($this.data('scrollTimeout'));
				$this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
			});
		};
		
		listWrap.scrollStopped(function(ev){
			$(this).removeClass('on');
		});
	}
	overScroll();
})
</script>
</body>
</html>

숫자 카운터; 배열에 있는 숫자 애니메이션으로 카운터

날라차붕차 — Fri, 29 Apr 2022 17:14:46 +0900

버튼을 클릭했을 때 숫자가 애니메이션 효과로 카운터 된다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div class="wrap">
	<div class="btn-wrap">
		<button type="button">버튼100</button>
		<button type="button">버튼200</button>
		<button type="button">버튼300</button>
	</div>
	<div class="num-wrap">
		<span id="num1">0</span>
		<span id="num2">0</span>
		<span id="num3">0</span>
	</div>
</div>
<script>
$(function(){

	// 숫자 카운트 애니메이션
	function numberCounter(target_frame, target_number) {
		this.count = 0;
		this.diff = 0;
		this.target_count = parseInt(target_number);
		this.target_frame = document.getElementById(target_frame);
		this.timer = null;
		this.counter();
	};
	numberCounter.prototype.counter = function() {
		var self = this;
		this.diff = this.target_count - this.count;

		if(this.diff > 0) {
			self.count += Math.ceil(this.diff / 5);
		}

		this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

		if(this.count < this.target_count) {
			this.timer = setTimeout(function() { self.counter(); }, 30);
		} else {
			clearTimeout(this.timer);
		}
	};

	var btn = $('.btn-wrap').find('button');

	btn.on('click', function(){
		var $this = $(this),
			btnIdx = btn.index($this),
			// btnData = btn.attr('data-size'),
			num = [ 
				{num1: "100", num2: "100", num3: "100"},
				{num1: "200", num2: "200", num3: "200"},
				{num1: "300", num2: "300", num3: "300"}
			];
		
		num1 = num[btnIdx].num1;
		num2 = num[btnIdx].num2;
		num3 = num[btnIdx].num3;

		new numberCounter("num1", num1);
		new numberCounter("num2", num2);
		new numberCounter("num3", num3);
	})
})
</script>
</body>
</html>

forEach; 배열, 객체를 append 하기

날라차붕차 — Fri, 29 Apr 2022 16:48:04 +0900

똑같은 레이아웃이 겁나게 많을 때 내용만 바뀌게 하려면 ajax로 페이지를 불러오면 좋지만 CMS로 운영되는 사이트일 경우 ajax가 느린 경우가 있다. 그래서 배열에 내용을 넣고 뿌리는 형식으로 작업해봤다.

배열의 객체는 다 똑같아야 한다. 내용이 없으면 빈값으로 넣으면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>hover img button</title>
<style>
    .box {border:1px solid #ddd;}
    .box + .box {margin-top:20px;}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>

<div class="wrap">
    <nav>
        <ul>
            <li class="btn" data-category="more"><button><span>more</span></button></li>
            <li class="btn" data-category="aa"><button><span>aa</span></button></li>
            <li class="btn" data-category="bb"><button><span>bb</span></button></li>
            <li class="btn" data-category="cc"><button><span>cc</span></button></li>
        </ul>
    </nav>
</div>
</body>
<script>
    var arr = [
        {
            category:'aa',
            title:'가',
            content:'1',
            detail:[
                {
                    year:'2022',
                    text:'안녕하세요'
                },
                {
                    year:'2021',
                    text:'하하하'
                }
            ]
        },
        {
            category:'aa',
            title:'나',
            content:'2',
            detail:[
                {
                    year:'2022',
                    text:'안녕하세요'
                },
                {
                    year:'2021',
                    text:'하하하'
                }
            ]
        },
        {
            category:'bb',
            title:'다',
            content:'3',
            detail:[
                {
                    year:'',
                    text:''
                }
            ]
        },
        {
            category:'bb',
            title:'라',
            content:'4',
            detail:[
                {
                    year:'2022',
                    text:'안녕하세요'
                },
                {
                    year:'2021',
                    text:'하하하'
                }
            ]
        },
        {
            category:'cc',
            title:'마',
            content:'5',
            detail:[
                {
                    year:'2022',
                    text:'안녕하세요'
                },
                {
                    year:'2021',
                    text:'하하하'
                }
            ]
        },
        {
            category:'cc',
            title:'바',
            content:'6',
            detail:[
                {
                    year:'2022',
                    text:'안녕하세요'
                },
                {
                    year:'2021',
                    text:'하하하'
                }
            ]
        },
        {
            category:'cc',
            title:'사',
            content:'7',
            detail:[
                {
                    year:'2021',
                    text:'하하하'
                }
            ]
        }
    ];
    
    arr.forEach(function(item, index){

        var $wrap = $('.wrap');
        var btn = $('nav .btn');

        function htmlLoad(item, index){
            var category = item.category;
            var tit = item.title;
            var cont = item.content;
            var details = item.detail;

            var html = '<div class="box" data-category="' + category + '">';
                html += '<p class="tit">' + tit + '</p>';
                html += '<p class="cont">' + cont + '</p>';
                html += '</div>';
                
            var $html = $(html);

            details.forEach(function(item, index){
                var html2 = '<div class="txt-box">';
                    html2 += '<p class="year">' + details[index].year + '</p>';
                    html2 += '<p class="txt">' + details[index].text + '</p>';
                    html2 += '</div>';

                $html.append(html2);
            })

            $wrap.append($html);
        }
        htmlLoad(item, index);
    
        btn.off('click').on('click', function(){
            var $this = $(this);
            var dataCheck = $this.attr('data-category');

            $('.box').remove();

            if(dataCheck == 'more'){
                
                var isMore = arr;

                isMore.forEach(function(item, index){
                    htmlLoad(item, index);
                });

            }else{
                function isThis(item, index){
                    if(item.category === dataCheck){
                        return true;
                    }
                }
                var isCategory = arr.filter(isThis);

                // console.log(isCategory);

                isCategory.forEach(function(item){
                    htmlLoad(item, index);
                })
            }
        })
    });

</script>
</html>

dialog ; modal popup, 웹접근성

날라차붕차 — Mon, 28 Mar 2022 18:13:32 +0900

웹접근성을 준수한 모달 레이어 창을 만들어 봤다. 특이점은 모달 레이어 창이 열린 상태에서 포커스 이동을 요소를 추가해서 제어했다. esc 키를 누르면 모달 에이어 창이 닫힌다. 요소를 추가 해서 포커스를 제어 하는 것이 좋은 작동인지는 잘 모르겠다. 아래 참고 사이트를 보고 좀더 보완해야겠다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modal popUp</title>
    <style>
        html, body {font-size:62.5%;}
        *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
        ul, ol {list-style:none;}
        button {border:0; background:inherit; cursor:pointer;}
        .offscreen {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; clip-path:polygon(0 0, 0 0, 0 0);}
        .has_modal {overflow:hidden;}

        header {width:100%; padding:2rem 0; background:orange; font-size:2rem; font-weight:bold; text-align:center;}

        main {max-width:100rem; margin:10rem auto 0;}

        h1 {font-size:10rem;}
        .dummy {margin-top:2rem; font-size:5rem;}

        button {margin-top:2rem; padding:1rem; background:greenyellow; font-size:2rem; border:1px solid #999; border-radius:1rem;}
        button:focus {outline:2px dotted red}
        [class*=close] {margin:0;}

        .modal-layer {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100;}
        .modal-layer.active {display:block;}
        .modal-layer .modal-dim {position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.5);}
        .modal-layer .modal {display:flex; position:absolute; top:50%; left:50%; padding:2rem; background:rgba(255, 255, 255, 1); transform:translate(-50%, -50%); flex-direction:column;}
        .modal-layer .modal:focus {outline:2px dotted red;}
        .modal-layer .modal h2 {font-size:2rem;}
        .modal-layer .modal label {display:flex; margin-top:3rem; padding:0.5rem 0; font-size:2rem; align-items:center;}
        .modal-layer .modal label + label {margin-top:1.5rem;}
        .modal-layer .modal label input {height:3rem; margin-left:0.5rem; padding:0.5rem; border:1px solid #ddd;}
        .modal-layer .modal .btn_close-modal {position:absolute; top:1rem; right:1rem; padding:1.5rem; background:orangered;}
        .modal-layer .modal .btn_close-modal .ico_close {display:flex; overflow:hidden; position:absolute; top:50%; left:50%; width:2rem; height:2rem; padding-top:1.2rem; color:#fff; font-size:3rem; line-height:0; transform:translate(-50%, -50%); justify-content:center; align-items:center;}
        
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <header>header</header>
    <main>
        <h1>modal pop</h1>
        <p class="dummy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dignissimos hic non, vero praesentium asperiores excepturi modi distinctio nostrum voluptates officia et sint, repellendus vitae exercitationem eos nobis eum deserunt!</p>

        <button type="button" aria-controls="openModal1" class="btn_open-modal">openModal1</button>

        <p class="dummy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dignissimos hic non, vero praesentium asperiores excepturi modi distinctio nostrum voluptates officia et sint, repellendus vitae exercitationem eos nobis eum deserunt!</p>
        <p class="dummy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dignissimos hic non, vero praesentium asperiores excepturi modi distinctio nostrum voluptates officia et sint, repellendus vitae exercitationem eos nobis eum deserunt!</p>

        <button type="button" aria-controls="openModal2" class="btn_open-modal">openModal2</button>

        <p class="dummy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dignissimos hic non, vero praesentium asperiores excepturi modi distinctio nostrum voluptates officia et sint, repellendus vitae exercitationem eos nobis eum deserunt!</p>
    </main>
    <div id="openModal1" class="modal-layer">
        <div class="modal-dim"></div>
        <div role="dialog" aria-modal="true" aria-labelledby="modal-label1" class="modal">
            <h2 id="modal-label1">dialog label1</h2>
            <label><span>이름</span> <input type="text" placeholder="한글로 적으세요"></label>
            <label><span>나이</span> <input type="text" placeholder="숫자로 적으세요"></label>
            <button type="button" class="btn_close-modal"><span class="offscreen">팝업닫기</span><span class="ico_close">&#x2df;</span></button>
        </div>
    </div>
    <div id="openModal2" class="modal-layer">
        <div class="modal-dim"></div>
        <div role="dialog" aria-modal="true" aria-labelledby="modal-label2" class="modal">
            <h2 id="modal-label2">dialog label2</h2>
            <label><span>이름</span> <input type="text" placeholder="한글로 적으세요"></label>
            <label><span>나이</span> <input type="text" placeholder="숫자로 적으세요"></label>
            <button type="button" class="btn_close-modal"><span class="offscreen">팝업닫기</span><span class="ico_close">&#x2df;</span></button>
        </div>
    </div>
    
</body>
<script>
    $(function(){

        var modalDialog = function(){

            var openModalBtn = $('.btn_open-modal'),
                modalLayer = $('.modal-layer');
            
            modalLayer.attr('aria-hidden', true);
            // 포커스 요소 추가
            modalLayer.prepend($('<div data-focus="focusStart" tabindex="0"></div>'));
            modalLayer.find('[role=dialog]').append($('<div data-focus="focusEnd" tabindex="0"></div>'));

            openModalBtn.on('click', function(){
                var $this = $(this),
                    openModal = $('#' + $this.attr('aria-controls')),
                    modalDim = openModal.find('.modal-dim'),
                    modal = openModal.find('.modal'),
                    closeModal = openModal.find('.btn_close-modal');

                console.log(openModal.attr('id'));

                $('body').addClass('has_modal');
                openModal.addClass('active').attr('aria-hidden', false);

                // 포커스 이동 함수
                function modalFocus(modalId) {
                    // 팝업 버튼 클릭하면 dialog에 포커스
                    $(modalId).find('[role=dialog]').attr('tabindex', 0).focus(); 
                    
                    // 닫기 버튼에서 tab을 눌렀을 때 role=dialog로 포커스 이동
                    $(modalId).find('[data-focus=focusEnd]').on('focus', function(){
                        $(modalId).find('[role=dialog]').focus();
                    });

                    // role=dialog에서 shift + tab을 눌렀을 때 닫기 버튼으로 포커스 이동
                    $(modalId).find('[data-focus=focusStart]').on('focus', function(){
                        $(modalId).find('.btn_close-modal').focus();
                    });
                }
                modalFocus(openModal);

                // 닫기 버튼 함수
                function modlaClose() {
                    $('body').removeClass('has_modal');
                    openModal.removeClass('active').removeAttr('aria-hidden', true);
                    $this.focus(); // 팝업 닫으면 열었던 버튼으로 포커스 이동
                    $(document).off('keyup.closeModal')
                }

                // 닫기 버튼 클릭 시 팝업차 닫기
                closeModal.on('click', modlaClose)

                // modalDim을 클릭해도 팝업창 닫기
                modalDim.on('click', function(e){
                    if(e.target === e.currentTarget){
                        modlaClose();
                    }
                });

                // 팝업창이 열렸을 때 esc 키를 누르면 닫기
                $(document).on('keyup.closeModal', function(e){
                    var keycode = e.keycode || e.which;
                    if(keycode == 27 && openModal.hasClass('active')){
                        modlaClose();
                    }
                })
            });
        }
        modalDialog();
    })
</script>
</html>

https://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html

Modal Dialog Example | WAI-ARIA Authoring Practices 1.2

Address Added The address you provided has been added to your list of delivery addresses. It is ready for immediate use. If you wish to remove it, you can do so from your profile. OK

w3c.github.io

https://selosele.github.io/2020/01/29/layer-popup/

레이어팝업에 웹 접근성을 불어넣다

웹 접근성이 충분히 보장된 레이어팝업

selosele.github.io

*위 사이트를 참고하여 공부했습니다.

tab ui ; wai-aria, 웹접근성

날라차붕차 — Wed, 16 Mar 2022 10:24:25 +0900

tab ui를 접근성을 높이기 위해 wai-aria를 사용하여 만들어 봤다. tab ui에 들어가는 wai-aria 속성은 aria-selected, aria-labelledby, aria-controls, role 이다. tabindex 태그 속성은 잘못 쓰면 독이 된다. 그래서 접근성을 맞춘 모듈을 보면 주로 tabindex 값을 -1, 0, 1 이정도만 쓴다. wai-aria 속성이 모호하고 자세하게 알고 싶다면 명세 사이트에 가서 확인해 보자. 1.1, 1.2 까지 나왔다.

사용성을 보장하는 모듈이 어려운 이유는 키보드 컨트롤 까지 되어야 하기 때문에 어렵다. 그렇기 때문에 아래 예제 만드는데 시간이 꽤 들었다. 극히 주관적인 실력으로 만들었다. 키보드 컨트롤을 하다보면 약간 생소할 것이다. 탭키만으로 컨트롤이 안된다. 방향키도 사용을 해야한다. 일반적이지 않아서 비장애인한테는 이해가 안될지 모르지만 보조프로그램을 사용하는 장애인한테는 사용성이 보장된 키보드 컨트롤이다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {font-size:62.5%;}
        *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
        ul, ol {list-style:none;}
        button {border:0; background:inherit; cursor:pointer;}

        main {max-width:100rem; margin:10rem auto 0;}

        .tab_list {display:flex;}
        .tab_list .item {padding:0.5rem 1rem 0.5rem; background:#fff; border-bottom:0.2rem solid rgb(107, 107, 107);}
        .tab_list .item + .item {margin-left:1rem;}

        .tab_list .item.active {background:rgba(255, 111, 0, 0.2); border-bottom-color:rgb(255, 111, 0)}

        .tab_conts {margin-top:2rem; border:1px solid #ddd; font-size:1.6rem;}
        .tab_conts .tab_panel {display:none;  padding:1rem;}
        .tab_conts .tab_panel.active {display:block;}
        
        .tab_conts .tab_panel:focus, button:focus {outline:0.2rem solid rgb(0, 99, 248);}

        .btn {margin-top:2rem; padding:1rem; border:1px solid #ddd; background:#eee;}
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <div class="wrap">
        <main>
            <div class="tabs">
                <div role="tablist" class="tab_list">
                    <button type="button" role="tab" aria-controls="tabPanel01" id="tabList01" class="item"><span>탭1</span></button>
                    <button type="button" role="tab" aria-controls="tabPanel02" id="tabList02" class="item"><span>탭2</span></button>
                    <button type="button" role="tab" aria-controls="tabPanel03" id="tabList03" class="item"><span>탭3</span></button>
                    <button type="button" role="tab" aria-controls="tabPanel04" id="tabList04" class="item"><span>탭4</span></button>
                </div>
                <div class="tab_conts">
                    <div role="tabpanel" aria-labelledby="tabList01" id="tabPanel01" class="tab_panel"><h2>tab1</h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo ut tempore eveniet aliquam sapiente at provident labore sit ipsa, dolores deleniti soluta nulla maxime corrupti fuga eos adipisci voluptas itaque!</div>
                    <div role="tabpanel" aria-labelledby="tabList02" id="tabPanel02" class="tab_panel"><h2>tab2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe reiciendis odit sint, perspiciatis quisquam vero facilis libero. Est quae, suscipit aut, voluptate quis quia voluptatum reiciendis odio ut nostrum repellendus.</div>
                    <div role="tabpanel" aria-labelledby="tabList03" id="tabPanel03" class="tab_panel"><h2>tab3</h2>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt laudantium eveniet veritatis, ducimus temporibus dolores, omnis totam rem, quod eaque sed. Maiores reprehenderit consectetur error, omnis reiciendis quod quos minima!</div>
                    <div role="tabpanel" aria-labelledby="tabList04" id="tabPanel04" class="tab_panel"><h2>tab4</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione distinctio, asperiores hic veritatis in perspiciatis magni id ea quo repellendus non atque eos doloribus minus debitis! Dolorum magnam delectus adipisci.</div>
                </div>
            </div>
            <button type="button" class="btn">button</button>
        </main>
    </div>
    <script>
        $(function(){
            var tabs = $('.tabs'),
                tabList = tabs.find('.tab_list').find('.item'),
                tabConts = tabs.find('.tab_conts'),
                tabPanel = tabConts.find('.tab_panel');

            tabList.on('click', function(){
                var $this = $(this),
                    $targetIndex = $this.index();

                $this.addClass('active').siblings().removeClass('active');
                tabPanel.eq($targetIndex).addClass('active').siblings().removeClass('active');

                // wai-aria
                $this.attr({'aria-selected': true, 'tabindex': 0}).siblings().attr({'aria-selected': false, 'tabindex': -1});
            })
            .on('keyup', function(e){
                var $this = $(this),
                    keycode = e.keycode || e.which; // // keycode 명령어에 반응하지 않는 브라우저도 있어서, 다양한 브라우저에 대응하기 위해서 keycode와 which를 같이 사용

                if(keycode == 39 || keycode == 40){ // 오른쪽 방향키 이거나 아래 방향키
                    console.log('right or down');

                    var nextTab = $this.next(),
                        nextTabSiblings = nextTab.siblings(),
                        thisPanel = $('#' + nextTab.attr('aria-controls'));

                    nextTab.addClass('active').attr({'aria-selected': true, 'tabindex': 0}).focus();
                    nextTabSiblings.removeClass('active').attr({'aria-selected': false, 'tabindex': -1});

                    thisPanel.addClass('active').siblings().removeClass('active');

                    // tab list 마지막 요소에서
                    var lastTab = $this.last().attr('aria-controls'),
                        lastPanel = tabPanel.last().attr('id');

                    if(lastTab == lastPanel){
                        var fisrtTab = tabList.first(),
                            firstPanel = tabPanel.first();

                        fisrtTab.addClass('active').attr({'aria-selected': true, 'tabindex': 0}).focus();
                        fisrtTab.siblings().removeClass('active').attr({'aria-selected': false, 'tabindex': -1});
                        firstPanel.addClass('active').siblings().removeClass('active');
                    }
                }else if(keycode == 37 || keycode == 38){ // 왼쪽 방향키 이거나 위쪽 방향키
                    console.log('left or up');

                    var prevTab = $this.prev(),
                        prevTabSiblings = prevTab.siblings(),
                        thisPanel = $('#' + prevTab.attr('aria-controls'));

                    prevTab.addClass('active').attr({'aria-selected': true, 'tabindex': 0}).focus();
                    prevTabSiblings.removeClass('active').attr({'aria-selected': false, 'tabindex': -1});

                    thisPanel.addClass('active').siblings().removeClass('active');

                    // tab list 처음 요소에서
                    var firstTab = $this.first().attr('aria-controls'),
                        firstPanel = tabPanel.first().attr('id');

                    if(firstTab == firstPanel){
                        var lastTab = tabList.last(),
                            lastPanel = tabPanel.last();

                        lastTab.addClass('active').attr({'aria-selected': true, 'tabindex': 0}).focus();
                        lastTab.siblings().removeClass('active').attr({'aria-selected': false, 'tabindex': -1});
                        lastPanel.addClass('active').siblings().removeClass('active');
                    }
                }
            });

            tabList.eq(0).trigger('click'); // 페이지가 로딩이 되면 첫번 째 탭이 클릭되어 있음(즉, active 클래스 들어가 있음)

            // Accessibility Set
            function acc(){
                if(!tabList.first()){
                    $(this).attr({'aria-selected': false, 'tabindex': -1});
                }else{
                    $(this).attr({'aria-selected': true, 'tabindex': 0});
                }
                
                tabPanel.attr('tabindex', 0);
            }
            acc();
        })
    </script>
</body>
</html>

https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

Example of Tabs with Automatic Activation | WAI-ARIA Authoring Practices 1.2

Nils Frahm Agnes Obel Joke Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright pian

www.w3.org

tai ui wai-aria 예제 사이트

https://www.w3.org/TR/wai-aria-1.1/

Accessible Rich Internet Applications (WAI-ARIA) 1.1

A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational landmark, but may be nested to form a discussion where assistive technologies could pay attention to article ne

www.w3.org

wai-aria 1.1

https://www.w3.org/TR/wai-aria-1.2/

Accessible Rich Internet Applications (WAI-ARIA) 1.2

www.w3.org

wai-aria 1.2

tab ui ; index(), eq(), trigger()

날라차붕차 — Tue, 15 Mar 2022 16:37:24 +0900

tab ui

eq(), index() 메서드를 이용해서 tab ui를 만들어 보자. index() 메서드는 선택자의 순번을 알 수 있다. eq() 메서드는 번호에 해당하는 요소를 가져올 수 있다. eq(), index() 메서드를 사용해서 만들면 tab list와 tab panel 속성 값을 맞출 필요 없다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {font-size:62.5%;}
        *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
        ul, ol {list-style:none;}
        button {border:0; background:inherit; cursor:pointer;}

        main {max-width:100rem; margin:10rem auto 0;}

        .tab_list ul {display:flex;}
        .tab_list ul li + li {margin-left:1rem;}
        .tab_list .item {padding:0.5rem 1rem 0.5rem; background:#fff; border-bottom:0.2rem solid rgb(107, 107, 107);}

        .tab_list ul li.active .item {background:rgba(255, 111, 0, 0.2); border-bottom-color:rgb(255, 111, 0)}

        .tab_panel {margin-top:2rem; padding:1rem; border:1px solid #ddd; font-size:1.6rem;}
        .tab_panel .item {display:none;}
        .tab_panel .item.active {display:block;}
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <div class="wrap">
        <main>
            <div class="tabs">
                <div class="tab_list">
                    <ul>
                        <li><button type="button" class="item"><span>탭1</span></button></li>
                        <li><button type="button" class="item"><span>탭2</span></button></li>
                        <li><button type="button" class="item"><span>탭3</span></button></li>
                        <li><button type="button" class="item"><span>탭4</span></button></li>
                    </ul>
                </div>
                <div class="tab_panel">
                    <div class="item"><h2>tab1</h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo ut tempore eveniet aliquam sapiente at provident labore sit ipsa, dolores deleniti soluta nulla maxime corrupti fuga eos adipisci voluptas itaque!</div>
                    <div class="item"><h2>tab2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe reiciendis odit sint, perspiciatis quisquam vero facilis libero. Est quae, suscipit aut, voluptate quis quia voluptatum reiciendis odio ut nostrum repellendus.
                    Blanditiis tenetur perferendis aspernatur maiores sed quis illo veritatis culpa in distinctio ducimus voluptatibus nesciunt est atque facilis quos illum deserunt, eaque necessitatibus laboriosam non aperiam. Quis laboriosam explicabo placeat?</div>
                    <div class="item"><h2>tab3</h2>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt laudantium eveniet veritatis, ducimus temporibus dolores, omnis totam rem, quod eaque sed. Maiores reprehenderit consectetur error, omnis reiciendis quod quos minima!
                    Delectus fugit alias architecto expedita, officiis accusamus sit molestiae id nihil nostrum quos fuga doloribus quidem saepe error optio vitae officia tempora non ducimus dolore est deserunt possimus. Labore, laboriosam.
                    Soluta earum iusto rem nihil error! Totam dicta nobis quas assumenda ullam vero saepe. Quam, dolorem? Nisi molestiae, ipsa laboriosam architecto quas blanditiis quasi minus tenetur mollitia velit, asperiores nesciunt.</div>
                    <div class="item"><h2>tab4</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione distinctio, asperiores hic veritatis in perspiciatis magni id ea quo repellendus non atque eos doloribus minus debitis! Dolorum magnam delectus adipisci.
                    Asperiores repellat odit debitis inventore, tenetur tempore exercitationem impedit commodi, alias harum architecto aliquid quidem provident ipsum atque sunt aspernatur quos. Vitae fuga sed accusantium, veniam perferendis sit facere dolorum.</div>
                </div>
            </div>
        </main>
    </div>
    <script>
        $(function(){
            var tabs = $('.tabs'),
                tabList = tabs.find('.tab_list').find('li'),
                tabPanel = tabs.find('.tab_panel'),
                tabPanelItem = tabPanel.find('.item');

            tabList.on('click', function(){
                var $this = $(this),
                    $targetIndex = $this.index();
                    console.log($targetIndex);

                $this.addClass('active').siblings().removeClass('active');
                tabPanelItem.eq($targetIndex).addClass('active').siblings().removeClass('active');
            })

            tabList.eq(0).trigger('click');
        })
    </script>
</body>
</html>

trigger()메서드는 지정한 이벤트를 강제로 발생시킨다.

https://www.youtube.com/watch?v=r4JHvKFYzOc&list=PL-qMANrofLyu4HcK14ntl-o7d-eHxo7-U&index=18

위 동영상 참고했습니다.

tab ui ; attr()

날라차붕차 — Tue, 15 Mar 2022 16:09:18 +0900

tab ui

attr() 메서드를 활용해서 tab ui를 만들어보자. attr() 메서드는 요소의 속성 값을 가져오거나 다른 요소에 넣을 수 있다.

아래 예제의 포인트는 tab list의 속성 값과 tab panel의 속성 값이 일치해야 한다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {font-size:62.5%;}
        *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
        ul, ol {list-style:none;}
        button {border:0; background:inherit; cursor:pointer;}

        main {max-width:100rem; margin:10rem auto 0;}

        .tab_list ul {display:flex;}
        .tab_list ul li + li {margin-left:1rem;}
        .tab_list .item {padding:0.5rem 1rem 0.5rem; background:#fff; border-bottom:0.2rem solid rgb(107, 107, 107);}

        .tab_list ul li.active .item {background:rgba(255, 111, 0, 0.2); border-bottom-color:rgb(255, 111, 0)}

        .tab_panel {margin-top:2rem; padding:1rem; border:1px solid #ddd; font-size:1.6rem;}
        .tab_panel .item {display:none;}
        .tab_panel .item.active {display:block;}
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <div class="wrap">
        <main>
            <div class="tabs">
                <div class="tab_list">
                    <ul>
                        <li data-id="tab1" class="active"><button type="button" class="item"><span>탭1</span></button></li>
                        <li data-id="tab2"><button type="button" class="item"><span>탭2</span></button></li>
                        <li data-id="tab3"><button type="button" class="item"><span>탭3</span></button></li>
                        <li data-id="tab4"><button type="button" class="item"><span>탭4</span></button></li>
                    </ul>
                </div>
                <div class="tab_panel">
                    <div id="tab1" class="item active"><h2>tab1</h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo ut tempore eveniet aliquam sapiente at provident labore sit ipsa, dolores deleniti soluta nulla maxime corrupti fuga eos adipisci voluptas itaque!</div>
                    <div id="tab2" class="item"><h2>tab2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe reiciendis odit sint, perspiciatis quisquam vero facilis libero. Est quae, suscipit aut, voluptate quis quia voluptatum reiciendis odio ut nostrum repellendus.
                    Blanditiis tenetur perferendis aspernatur maiores sed quis illo veritatis culpa in distinctio ducimus voluptatibus nesciunt est atque facilis quos illum deserunt, eaque necessitatibus laboriosam non aperiam. Quis laboriosam explicabo placeat?</div>
                    <div id="tab3" class="item"><h2>tab3</h2>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt laudantium eveniet veritatis, ducimus temporibus dolores, omnis totam rem, quod eaque sed. Maiores reprehenderit consectetur error, omnis reiciendis quod quos minima!
                    Delectus fugit alias architecto expedita, officiis accusamus sit molestiae id nihil nostrum quos fuga doloribus quidem saepe error optio vitae officia tempora non ducimus dolore est deserunt possimus. Labore, laboriosam.
                    Soluta earum iusto rem nihil error! Totam dicta nobis quas assumenda ullam vero saepe. Quam, dolorem? Nisi molestiae, ipsa laboriosam architecto quas blanditiis quasi minus tenetur mollitia velit, asperiores nesciunt.</div>
                    <div id="tab4" class="item"><h2>tab4</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione distinctio, asperiores hic veritatis in perspiciatis magni id ea quo repellendus non atque eos doloribus minus debitis! Dolorum magnam delectus adipisci.
                    Asperiores repellat odit debitis inventore, tenetur tempore exercitationem impedit commodi, alias harum architecto aliquid quidem provident ipsum atque sunt aspernatur quos. Vitae fuga sed accusantium, veniam perferendis sit facere dolorum.</div>
                </div>
            </div>
        </main>
    </div>
    <script>
        $(function(){
            var tabs = $('.tabs'),
                tabList = tabs.find('.tab_list').find('li'),
                tabPanel = tabs.find('.tab_panel');

            tabList.on('click', function(){
                var $this = $(this),
                    $target = $this.attr('data-id');

                $this.addClass('active').siblings().removeClass('active');
                tabPanel.find('#' + $target).addClass('active').siblings().removeClass('active');
            })
        })
    </script>
</body>
</html>

https://www.youtube.com/watch?v=94K5cot4GVs&list=PL-qMANrofLyu4HcK14ntl-o7d-eHxo7-U&index=16&t=5s

위 동영상 참고했습니다.

scroll 이벤트 ; attr(), 이미지 경로 변경

날라차붕차 — Mon, 14 Mar 2022 15:35:25 +0900

스크롤 이벤트

스크롤 양에 따라 헤더의 사이즈와 로고 이미지의 경로 수정을 해보자.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {font-size:62.5%;}
        *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
        ul, ol {list-style:none;}

        .header {display:flex; position:fixed; top:0; right:0; left:0; padding:3rem 2rem; background:rgba(138, 43, 226, 1); color:#fff; font-size:2rem; align-items:center; justify-content:space-between; transition:all 0.2s;}
        .logo img {width:200px; transition:all 0.2s;}
        
        .header.shrink {padding:1rem 2rem; background:rgba(138, 43, 226, 0.7);}
        .header.shrink .logo img {width:100px;}

        nav ul {display:flex;}
        nav ul li + li {margin-left:10px;}

        main {height:2000px;}
        
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
</head>
<body>
    <div class="wrap">
        <header class="header">
            <div class="logo"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" alt=""></div>
            <nav><ul>
                <li><a href="#"><span>메뉴1</span></a></li>
                <li><a href="#"><span>메뉴2</span></a></li>
                <li><a href="#"><span>메뉴3</span></a></li>
                <li><a href="#"><span>메뉴4</span></a></li>
                <li><a href="#"><span>메뉴5</span></a></li>
            </ul></nav>
        </header>
        <main></main>
    </div>
    <script>
        $(function(){
            var wind = $(window);
            var header = $('.header');
            var headerOffsetTop = header.offset().top;
            var headerOutherHeight = header.outerHeight();
            var threshold = headerOffsetTop + headerOutherHeight;

            wind.on('scroll', $.throttle(1000/15, function(){
                var windScrollTop = $(this).scrollTop();

                var defaultLogo = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png';
                var smallLogo = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_92x30dp.png';

                if(windScrollTop >= threshold){
                    if(!header.hasClass('shrink')){ // header에 shrink 클래스가 없으면
                        header.addClass('shrink');
                        switchImages(smallLogo);
                    }
                }else{
                    if(header.hasClass('shrink')){ // header에 shrink 클래스가 있으면
                        header.removeClass('shrink');
                        switchImages(defaultLogo);
                    }
                }
            }));

            //switchImages 함수
            function switchImages(newPath){
                var logo = $('.logo').find('img');
                logo.fadeOut(200, function(){
                    logo.attr('src', newPath).fadeIn(200);
                });
            }

        })
    </script>
</body>
</html>

scroll 이벤트 ; clone(), throttle JS, dom 복사

날라차붕차 — Mon, 14 Mar 2022 13:49:09 +0900

스크롤 이벤트

스크롤 이벤트 발생시켰을 경우 성능에 과부하가 생길 수 있다. 이런 과부하를 방지하는 것이 throttle JS다. 사용 법은 아래 예제를 보고 참고 하자. 아래 예제는 일정 스크롤을 내릴 경우 기존 header가 위로 올라가고 복사가 된 header가 새로 내려오는 예제이다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {font-size:62.5%;}
        *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
        .top_banner {width:100%; padding:5rem 0; background:gold; font-size:2rem; text-align:center;}

        .header {padding:1rem 0; background:blueviolet; color:#fff; font-size:2rem; text-align:center; transition:transform 0.2s;}
        .header.fixedOut {transform:translateY(-100%);}
        .copy_header {position:fixed; top:0; right:0; left:0; z-index:100; padding:1rem 0; background:salmon; color:#fff; font-size:2rem; text-align:center; transform:translateY(-100%); transition:transform 0.2s;}
        .copy_header.fixedIn {transform:translateY(0)}

        .main {max-width:100rem; margin:0 auto; padding:0 2rem;}
        .main .txt {margin-top:2rem; font-size:1.5rem;}
        .main .txt.on {transform:translateX(0); opacity:1;}
        .main .buying {display:flex; position:relative; margin-top:2rem; justify-content:space-between;}
        .main .buying .thumb {position:sticky; top:6.7rem; width:60rem; height:80rem; background:goldenrod;}
        .main .buying .set {width:calc(100% - 65rem); font-size:2rem; text-align:justify; word-break:break-all;}
        .main .buying .set p + p {margin-top:1rem;}
        .main .scrollTop1 {position:fixed; right:0; bottom:0; margin-top:1rem; padding:2rem 1rem; background:tomato; color:#fff; font-size:2rem; font-weight:700; text-align:center; transform:translateY(-100%);}
        .main .scrollTop2 {position:fixed; right:0; bottom:0; margin-top:1rem; padding:2rem 1rem; background:goldenrod; color:#fff; font-size:2rem; font-weight:700; text-align:center;}
        .footer {margin-top:5rem; padding:1rem 0; background:yellowgreen; color:#fff; font-size:2rem; text-align:center;}
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="top_banner">top banner</div>
        <div class="header">
            <header>heading</header>
        </div>
        <main class="main">
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <div class="buying">
                <div class="thumb"></div>
                <div class="set">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi consequatur, facere quisquam animi, porro eum quam laboriosam, doloribus ipsa debitis fugit pariatur praesentium. Quasi sunt vero quisquam non repellat.</p>
                </div>
            </div>
            <p class="scrollTop1"></p>
            <p class="scrollTop2"></p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
            <p class="txt last">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quo doloribus facere aut a sint officia quidem quia amet facilis reiciendis nisi hic ullam, quas corrupti quasi iste ab reprehenderit.</p>
        </main>
        <footer class="footer">footer</footer>
    </div>
    <script>
        $(function(){
            var wind = $(window);
            var header = $('.header');
            var headerOffsetTop = header.offset().top; // 화면 위에서 header 위치
            var headerOutherHeight = header.outerHeight(); // padding, border 포함 header 높이
            var threshold = headerOffsetTop + headerOutherHeight; // 화면상의 header 끝나는 시점, threshold: 문지방 
            var headerClone = header.contents().clone(); // header 콘텐츠 복사
            var headerCloneContainer = $('<div class="copy_header"></div>');

            headerCloneContainer.append(headerClone);
            headerCloneContainer.prependTo($('.wrap'));

            wind.on('scroll', $.throttle(1000/15, function(){ // throttle: 1초에 15번만 스크롤양을 검사
                var windScrollTop = $(this).scrollTop();
                $('.scrollTop2').text('throttle 적용 : ' + windScrollTop); /* 실시간 윈도우 스크롤 값 */

                if(windScrollTop >= threshold){
                    $('.copy_header').addClass('fixedIn');
                    header.addClass('fixedOut');
                }else{
                    $('.copy_header').removeClass('fixedIn');
                    header.removeClass('fixedOut');
                }
            }));

            wind.on('scroll', function(){
                var windScrollTop = $(this).scrollTop();
                $('.scrollTop1').text('throttle 미적용 : ' + windScrollTop); /* 실시간 윈도우 스크롤 값 */
                
            });

        })
    </script>
</body>
</html>

위 예제를 복사해서 실행해 보면 throttle JS 적용했을 때와 적용 하지 않았을 때의 차이를 알 수 있다.

https://www.youtube.com/watch?v=9Rtx8pDNaJ8

위 동영상 보고 공부했습니다.

요소의 높이, 넓이 구하기 ; width(), innerWidth(), outerWidth()

날라차붕차 — Thu, 10 Mar 2022 17:23:27 +0900

Element

메서드	설명
width(), height()	요소의 넓이, 높이
innerWidth(), innerHeight()	padding 포함 넓이, 높이
outerWidth(), outerHeight()	border 포함 넓이, 높이
outerWidth(true), outerHeight(true)	margin 포함 넓이, 높이