포커스 아웃

#focus #포커스 아웃 #제이쿼리

포커스 아웃시 소스 실행

• e.relatedTarget을 사용하지 않은 경우 gnb안에서 포커스 이동시 계속 실행함
• e.relatedTarget을 이용하여 gnb안에 포커스가 아예 없는경우 실행되게 함.

        $('.gnb').on('focusout', function (e) {
            if (!$(this).has(e.relatedTarget).length) {
                console.log('close')
            }
        })

        $('.hd-navi').on('mouseenter', function(){
            console.log('open')
        })
    

css로 이미지 색상변경

#css로 이미지 색상변경

        filter: opacity(0.5) drop-shadow(0 0 0 #000000);
    

아이디로 링크보낼때 좀더 아래로 가게

#href #링크 #아이디 #스크롤

scroll-margin-top

• href=#aaa 일때 아래로 100px 더 내려감

        a[href="#aaa"] {scroll-margin-top: 100px;}
    

REMIX ICON

#remix icon #아이콘 #리믹스 아이콘

사용할때마다 추가 중

아이콘 공식 사이트

remixicon 아이콘

        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.min.css' integrity='sha512-T7lIYojLrqj7eBrV1NvUSZplDBi8mFyIEGFGdox8Bic92Col3GVrscbJkL37AJoDmF2iAh81fRpO4XZukI6kbA==' crossorigin='anonymous'/>
    

        font-family:remixicon
    

select 전체선택

#셀렉트 #select #전체선택

select 전체선택

        $('.keyword_all').on('change', function () {
            const siblingCheckboxes = $(this).closest('li').siblings().find('input[type="checkbox"]');
            siblingCheckboxes.prop('checked', $(this).prop('checked'));
        });        
    

기본 게시판 table

#table #게시판

html

        
    <!-- board_list -->
    <div class="board_list board_st01">
        <div class="board_top_info">전체 <span class="red">10</span>건, 현재페이지 <span class="red">1</span>/10 Page</div>
        <table class="tdCenter">
            <caption>게시판 목록</caption>
            <colgroup>
                <col style="width:70px;">
                <col style="width:100%">
                <col style="width:170px;">
                <col style="width:180px;">
            </colgroup>
            <thead>
                <tr>
                    <th scope="col">순번</th>
                    <th scope="col">예약명</th>
                    <th scope="col">업종구분</th>
                    <th scope="col">점검기간</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td aria-label="순번">010</td>
                    <td aria-label="예약명" class="tdLeft"><a href="#">2024년 미용업(종합,일반,피부,손발톱,화장분장) 인터넷 자율점검</a></td>
                    <td aria-label="업종구분">안경업소</td>
                    <td aria-label="점검기간">2025.11.01~2025.11.30</td>
                </tr>
                <tr>
                    <td aria-label="순번">009</td>
                    <td aria-label="예약명" class="tdLeft"><a href="#">2024년 건물위생관리업 인터넷 자율점검</a></td>
                    <td aria-label="업종구분">안전상비의약품판매업</td>
                    <td aria-label="점검기간">2025.11.01~2025.11.30</td>
                </tr>
                <tr>
                    <td aria-label="순번">008</td>
                    <td aria-label="예약명" class="tdLeft"><a href="#">2024 치과기공소 자율점검</a></td>
                    <td aria-label="업종구분">의료기기판매업</td>
                    <td aria-label="점검기간">2025.11.01~2025.11.30</td>
                </tr>
            </tbody>
        </table>
        
        <!-- board_paging -->							
        <div class="board_paging">
            <ul class="pc">
                <li><a href="#"><i class="ri-skip-left-fill"></i><span class="blind">처음으로</span></a></li>
                <li><a href="#"><i class="ri-arrow-drop-left-line"></i><span class="blind">이전으로</span></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
                <li><a href="#"><i class="ri-arrow-drop-right-line"></i><span class="blind">다음으로</span></a></li>
                <li><a href="#"><i class="ri-skip-right-fill"></i><span class="blind">마지막으로</span></a></li>
            </ul>
            
            <div class="mo">
                <input type="text" value="8888" class="input_st01">
                <span> / 100</span>
                <a href="#" class="btn_st01">이동</a>
            </div>
        </div>
        <!-- //board_paging -->
            
    </div>
<!-- //board_list -->
    

CSS

        
    /* board_style */
    .board_list.board_st01 {
        --board_color:#6d6d6d;
        --th_background:#f7f7f7;
        --th_color:#2d2d2d;
        --border_color:#dfdfdf;
        --border_top:2px solid #afa190;
        --padding:15px;
        --paging_active:#e57173;
    }
    .board_list .board_top_info {text-align:right;margin-bottom:10px;font-weight:500;}
    .board_list .board_top_info .red {color:#e0383b;}
    .board_list :is(tr, th, td) {box-sizing:border-box;}
    .board_list thead {margin-top:-1px;}
    .board_list table {color:var(--board_color);border-collapse:collapse;width:100%;border-top:var(--border_top);table-layout:fixed;}
    .board_list table caption {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0 none;overflow:hidden;clip:rect(0, 0, 0, 0);}
    .board_list :is(th, td) {padding:var(--padding);border:1px solid var(--border_color);border-left:none;border-right:none;}
    .board_list thead th {background:var(--th_background);color:var(--th_color);font-weight:600;}
    .board_list td {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .board_list td a:hover {text-decoration:underline;}
    .board_list .btn_type {display:inline-flex;width:66px !important;height:26px !important;line-height:26px !important;padding:0 5px !important;justify-content:center;font-weight:400;border:none;}
    .board_list .btn_type span {font-size:15px !important;letter-spacing:-0.05em;}
    .board_list .btn_type.open {background:#e57173;color:#fff;}
    .board_list .btn_type.closed {background:#515151;color:#fff;}
    .board_paging {margin:30px 0;}
    .board_paging .mo {display:none;}
    .board_paging ul {display:flex;justify-content:center;align-items:center;gap:5px;}
    .board_paging ul li a {display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:1px solid var(--border_color);font-size:15px;border-radius:2px;}
    .board_paging ul li a:hover {background:#efefef;}
    .board_paging ul li.active a {background:var(--paging_active);border:1px solid var(--paging_active);color:#fff;}
    .board_paging ul li i {font-size:1.5em;}

    @media all and (max-width: 768px) {
        .board_list.board_st01 {
            --padding:10px;
        }
        .board_list :is(colgroup, thead) {display:none;}
        .board_list :is(tr, th, td) {display:block;width:100%;text-align:left !important}
        .board_list td::before {content:attr(aria-label) ':';display:inline-block;margin-right:5px;color:var(--th_color);}
        .board_list tr {border-bottom:1px solid var(--border_color);}
        .board_list td {border:none;}
        .board_list :is(th, td) {padding:0 var(--padding);margin:var(--padding) 0;}
        .board_paging .pc {display:none;}
        .board_paging .mo {display:flex;justify-content:center;align-items:center;gap:10px;}
        .board_paging .mo input {width:60px;text-align:center;}
        .board_paging .mo .btn_type {text-align:center;height:40px !important;line-height:40px !important;}
    }
    

자주쓰는 로티

#자주쓰는 로티 #lottie

html

        <div class="flex">
            <label class="lottie_checkbox">
                <input type="checkbox" class="">체크1
            </label>
            <label class="lottie_checkbox">
                <input type="checkbox" class="">체크2
            </label>
            <label class="lottie_checkbox">
                <input type="checkbox" checked class="">체크3
            </label>
        
            
            <label class="lottie_radio">
                <input type="radio" name="typeA" class="">라디오1
            </label>
            
            <label class="lottie_radio">
                <input type="radio" name="typeA" checked class="">라디오2
            </label>
            
            <label class="lottie_radio">
                <input type="radio" name="typeB" class="">라디오1
            </label>
            
            <label class="lottie_radio">
                <input type="radio" name="typeB" class="">라디오2
            </label>
        </div>
    
        <button type="button">
            <lottie-player class="lottie_menu" src="https://lottie.host/37e85c58-88ca-4b7e-a241-3f42fcd7bca4/FmvcD5oN2Q.json"></lottie-player>
        </button>
        <button type="button">
            <lottie-player class="lottie_search" src="https://lottie.host/bb7ee499-afb7-4a03-b3e9-66d53a6a67fa/DjP0vM4EQk.json"></lottie-player>
        </button>
    

script

        $(document).ready(function() {

            // Lottie 플레이어 추가 및 초기화(checkbox, radio)
            function addLottiePlayer(input, src) {
                const lottiePlayer = $('<lottie-player>', {
                  src: src,
                  class: 'lottie_animation',
                });
            
                $(input).before(lottiePlayer);
            
                lottiePlayer.on('load', function() {
                  const lottieInstance = lottiePlayer[0].getLottie();
                  if ($(input).is(':checked')) {
                    lottieInstance.playSegments([10, 30], true);
                  }
                });
              }
                      
            // 동적으로 로티 추가
            $('.lottie_checkbox input').each(function () {
              addLottiePlayer(this, 'https://lottie.host/45afa788-745e-4c70-b4e4-3f370bce0a3e/1w61VXC67a.json');
            });
          
            $('.lottie_radio input').each(function () {
              addLottiePlayer(this, 'https://lottie.host/b2623135-d4b0-445e-ac7d-fdb0d7efcdf6/p4D1TV7cq5.json');
            });
          
            // 상태 변경 시 애니메이션 실행
            $('.lottie_checkbox input, .lottie_radio input').change(function () {
              const isChecked = $(this).is(':checked');
              const lottieInstance = $(this).siblings('lottie-player')[0].getLottie();
          
              // 체크 상태에 따라 애니메이션 실행
              if (isChecked) {
                lottieInstance.playSegments([10, 30], true);
              } else {
                const startFrame = this.type === 'radio' ? 1 : 10;
                lottieInstance.playSegments([startFrame, 0], true);
              }
          
              // 같은 이름의 다른 라디오 버튼 처리
              if ($(this).attr('type') === 'radio') {
                const name = $(this).attr('name');
                // 같은 name을 가진 다른 라디오 버튼 해제
                $('.lottie_radio input[name="' + name + '"]')
                  .not(this)
                  .each(function () {
                    $(this).prop('checked', false); // 다른 버튼 해제
                    const otherLottieInstance = $(this).siblings('lottie-player')[0].getLottie();
                    // 애니메이션 리셋
                    otherLottieInstance.playSegments([1, 0], true); // 해제된 버튼에 대해 애니메이션
                  });
                // 현재 선택된 라디오 버튼에 대해 애니메이션 실행
                lottieInstance.playSegments([10, 30], true);
              }
            });
          
        
        
        
        
          // 로티 호버기능
          function lottie_hover(trigger_selector, target_selector, start_frame, end_frame, speed) {
            const $target_element = $(target_selector);
        
            $target_element.each(function () {
              const lottie_instance = this.getLottie();
        
              function play_animation(start, end) {
                lottie_instance.setSpeed(speed);
                lottie_instance.playSegments([start, end], true);
              }
        
              $(trigger_selector).hover(
                () => play_animation(lottie_instance.currentFrame, end_frame),
                () => play_animation(lottie_instance.currentFrame, start_frame)
              );
            });
          }
        
          // 로티 클릭 기능
          function lottie_click(trigger_selector, target_selector, start_frame = 0, end_frame = 30, speed = 1) {
            const $target_element = $(target_selector);
            let is_clicked = false;
        
            $target_element.each(function () {
              const lottie_instance = this.getLottie();
        
              function play_animation(start, end) {
                lottie_instance.setSpeed(speed);
                lottie_instance.playSegments([start, end], true);
              }
        
              $(trigger_selector).click(() => {
                const current_frame = lottie_instance.currentFrame;
                if (is_clicked) {
                  play_animation(current_frame, start_frame);
                } else {
                  play_animation(current_frame, end_frame);
                }
                is_clicked = !is_clicked;
              });
            });
          }
        
          // 트리거, 타겟, 시작프레임, 끝프레임, 속도
          lottie_hover('nav', 'nav .lottie_dropdown', 0, 30, 5);
          lottie_click('nav', 'nav .lottie_dropdown', 0, 50, 1.5);
    
        });
    

css

        lottie-player {font-size:inherit;}
        .lottie_checkbox,
        .lottie_radio {cursor:pointer;margin:0 0.3em;}
        .lottie_checkbox input,
        .lottie_radio input {display:none;}
        .lottie_checkbox lottie-player {width:3em;height:3em;display:inline-block;vertical-align: top;margin:-0.7em;}
        .lottie_radio lottie-player {width:1.5em;height:1.5em;display:inline-block;vertical-align: top;}
        .lottie_menu {width:3em;height:3em;}
        .lottie_search {width:3em;height:3em;}
    

Lottie

#움직이는 아이콘 #로티 #lottie

로티 공식 사이트

CDN

        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    

HTML 기본

        <lottie-player 
            src="https://lottie.host/37e85c58-88ca-4b7e-a241-3f42fcd7bca4/FmvcD5oN2Q.json" 
            background="##fff" 
            speed="1" 
            style="width: 300px; height: 300px" 
            loop 
            controls 
            autoplay 
            direction="1" 
            mode="normal"
        >
        </lottie-player>
    

• src에 json내용을 넣는다.
• json은 공식사이트에서 받아온다

hover

html

        <button type="button">
            <lottie-player class="lottie_menu" src="https://lottie.host/37e85c58-88ca-4b7e-a241-3f42fcd7bca4/FmvcD5oN2Q.json"></lottie-player>
        </button>
    

script

        // 로티 호버기능
        function lottie_hover(selector, start_frame, end_frame, speed) {
            const lottie_element = $(selector)[0];
            const lottie_instance = lottie_element.getLottie();

            function play_animation(start, end) {
                lottie_instance.setSpeed(speed);
                lottie_instance.playSegments([start, end], true);
            }

            $(selector).hover(
                () => {
                    const current_frame = lottie_instance.currentFrame;
                    play_animation(current_frame, end_frame);
                },
                () => {
                    const current_frame = lottie_instance.currentFrame;
                    play_animation(current_frame, start_frame);
                }
            );
        }

        lottie_hover('.lottie_menu', 0, 50, 1.5);
    

클릭

html

        <button type="button">
            <lottie-player class="lottie_menu" src="https://lottie.host/37e85c58-88ca-4b7e-a241-3f42fcd7bca4/FmvcD5oN2Q.json"></lottie-player>
        </button>
    

script

        // 로티 클릭기능
        function lottie_click(selector, start_frame, end_frame, speed) {
            const lottie_element = $(selector)[0];
            const lottie_instance = lottie_element.getLottie();
            let is_clicked = false;

            function play_animation(start, end) {
                lottie_instance.setSpeed(speed);
                lottie_instance.playSegments([start, end], true);
            }

            $(selector).click(() => {
                const current_frame = lottie_instance.currentFrame;
                if (is_clicked) {
                    play_animation(current_frame, start_frame);
                } else {
                    play_animation(current_frame, end_frame);
                }
                is_clicked = !is_clicked;
            });
        }

        lottie_click('.lottie_menu', 0, 50, 1.5);
    

체크박스 라이오

html

        <label class="lottie_checkbox">
            <lottie-player class="" src="https://lottie.host/45afa788-745e-4c70-b4e4-3f370bce0a3e/1w61VXC67a.json"></lottie-player>
            <input type="checkbox" checked class="">체크3
        </label>
    
        
        <label class="lottie_radio">
            <lottie-player class="" src="https://lottie.host/b2623135-d4b0-445e-ac7d-fdb0d7efcdf6/p4D1TV7cq5.json"></lottie-player>
            <input type="radio" name="typeA" class="">라디오1
        </label>
        
        <label class="lottie_radio">
            <lottie-player class="" src="https://lottie.host/b2623135-d4b0-445e-ac7d-fdb0d7efcdf6/p4D1TV7cq5.json"></lottie-player>
            <input type="radio" name="typeA" checked class="">라디오2
        </label>
    

script

        // 로티 체크박스 라디오
        function lottie_check_radio(element, checked) {
            const lottie_element = $(element).siblings('lottie-player')[0];
            const lottie_instance = lottie_element.getLottie();

            if (checked) {
                lottie_instance.setSpeed(1);
                lottie_instance.playSegments([10, 30], true);
            } else {
                if (element.type == 'radio') {
                    lottie_instance.playSegments([1, 0], true);
                } else {
                    lottie_instance.playSegments([10, 0], true);
                }
            }
        }

        // 로티 체크박스 라디오 - 초기 상태 확인
        $('.lottie_checkbox input, .lottie_radio input').each(function() {
            const lottie_element = $(this).siblings('lottie-player')[0];
            const lottie_instance = lottie_element.getLottie();

            if ($(this).is(':checked')) {
                lottie_instance.playSegments([10, 30], true); // 예시로 0에서 30 프레임까지 재생
            }
        });

        // 로티 체크박스 라디오 - 상태 변경 시 애니메이션 설정
        $('.lottie_checkbox input, .lottie_radio input').change(function() {
            const name = $(this).attr('name');
            const checked = $(this).is(':checked');

            // 클릭된 요소에 대한 애니메이션 설정
            lottie_check_radio(this, checked);

            if ($(this).attr('type') == 'radio') {
                // 같은 name을 가진 다른 라디오 버튼에 대한 애니메이션 설정
                $('.lottie_radio input[name="' + name + '"]').not(this).each(function() {
                    lottie_check_radio(this, false);
                });
            }
        });
    

정사각형 비율 유지

#정사각형 비율 유지

가로 / 세로 비율을 지정할 수 있다

        aspect-ratio: 1 / 1; /* 정사각형 유지 */
    

포커스 시 속성변경

#웹접근성 #focus #포커스

        input:focus-visible {
            outline:-webkit-focus-ring-color auto 1px;outline-offset:-2px;
          }
    

tab으로 포커스시 속성이 변경된다

slick 옵션정리

#slick #슬릭 #슬라이드 #slide

슬릭 옵션

        $('.slider-items').slick({
            rows: 1,                    //이미지를 몇 줄로 표시할지 개수
            dots: false,                //슬라이더 아래에 도트 네비게이션 버튼 표시 여부(true or false) ▶기본값 false
            appendDots: $('selector'),  //네비게이션 버튼 변경
            dotsClass: 'custom-dots',   //네비게이션 버튼 클래스 변경
            infinite: true,             //무한반복(true or false) 기본값 true
            slidesToShow: 4,            //한번에 보여줄 슬라이드 아이템 개수
            slidesToScroll: 4,          //한번에 넘길 슬라이드 아이템 개수
            slidesPerRow: 1,            //보여질 행의 수 (한 줄, 두 줄 ... )
            autoplay: true,             //슬라이드 자동 시작(true or false) ▶기본값 false
            autoplaySpeed: 2000,        //슬라이드 자동 넘기기 시간(1000ms = 1초) 곧, 슬라이드 하나당 머무는 시간
            variableWidth: true,        //사진마다 width의 크기가 다른가?(true or false) ▶기본값 false
            draggable: false,           //슬라이드 드래그 가능여부 (true or false) ▶기본값 true
            arrows: true,               //이전 다음 버튼 표시 여부(true or false) ▶기본값 true
            pauseOnFocus: true,         //마우스 클릭 시 슬라이드 멈춤 ▶기본값 true
            pauseOnHover: true,         //마우스 호버 시 슬라이드 멈춤 ▶기본값 true
            pauseOnDotsHover: true,     //네이게이션버튼 호버 시 슬라이드 멈춤 ▶기본값 false
            vertical: true,             //세로 방향 여부(true or false) ▶기본값 false
            verticalSwiping: true,      //세로 방향 스와이프 여부(true or false) ▶기본값 false
            accessibility: true,        //접근성 여부(true or false) 기본값 false
            appendArrows: $('#arrows'), //좌우 화살표 변경
            prevArrow: $('#prevArrow'), //이전 화살표만 변경
            nextArrow: $('#nextArrow'), //다음 화살표만 변경
            initialSlide: 1,            //처음 보여질 슬라이드 번호 ▶기본값 0
            centerMode: true,           //중앙에 슬라이드가 보여지는 모드 ▶기본값 false
            centerPadding: '70px',      //중앙에 슬라이드가 보여지는 모드에서 패딩 값
            fade: true,                 //크로스페이드 모션 사용 여부 ▶기본값 false
            speed: 2000,                //모션 시간 (얼마나 빠른속도로 넘어가는지)(1000ms = 1초) 곧, 슬라이드 사이에 넘어가는 속도
            waitForAnimate: true,       //애니메이션 중에는 동작을 제한함 ▶기본값 true
            // ▼ 반응형 브레이크포인트 옵션
            // breakpoint: 숫자를 제작자의 환경에 맞게 조정함 ex) breakpoint: 1280
            // 각 브레이크포인트 내에 settings 안에 위의 모든 옵션을 다르게 적용할 수 있음
            responsive: [
              {
                breakpoint: 1024,
                settings: {
                  slidesToShow: 3,
                  slidesToScroll: 3,
                  infinite: true,
                  dots: true
                }
              },
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2
                }
              },
              {
                breakpoint: 480,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1
                }
              }
            ]
          });
          
    

VH

#vh #뷰포트

• vh값을 스크립트로 다시 측정(모바일에서 css vh오류로 이걸 사용하면 유용하다)

css에서 사용

        height:calc(var(--vh) * 100);
    

jquery

        const updateVH = () => {
            const vh = $(window).height() * 0.01;
            $(':root').css('--vh', `${vh}px`);
            console.log(vh);
        };
    
        updateVH();
    
        $(window).resize(updateVH);  
    

script

        const updateVH = () => {
            const vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
            console.log(vh)
        };
        
        updateVH();
        
        window.addEventListener('resize', updateVH);
    

접근성 관련 포커스 강제 이동

#접근성 관련 포커스 강제 이동

HTML

        <a href="javascript:void(0);" data-focus="guide_focus" data-focus-next="guide_focus" class="btn_close">닫기</a>
    

data-focus="focus01" - 해당 태그 포커스 이름

data-focus-prev="focus06" - 이전으로갈 포커스 이름

data-focus-next="focus09" - 다음으로갈 포커스 이름

JS

        // 접근성 관련 포커스 강제 이동
        function accessibilityFocus() { 
            $(document).on('keydown', '[data-focus-prev], [data-focus-next]', function(e){ 
                var next = $(e.target).attr('data-focus-next'), 
                    prev = $(e.target).attr('data-focus-prev'),
                    target = next || prev || false; 
                if(!target || e.keyCode != 9) { 
                    return; 
                } 
                if( (!e.shiftKey && !!next) || (e.shiftKey && !!prev) ) { 
                    setTimeout(function(){ 
                        $('[data-focus="' + target + '"]').focus();
                    }, 1);
                }
            });
        };
        $(document).ready(function(){
            accessibilityFocus();
        });
    

select 선택시 placeholder 변경

#select 선택시 placeholder 변경

HTML

        <select class="selectWrap">
            <option data-name="일번">가나다1</option>
            <option data-name="이번">가나다2</option>
            <option data-name="삼번">가나다3</option>
            <option data-name="사번">가나다4</option>
        </select>
        
        <textarea class="textareaWrap" placeholder="일번">
    

JS

        $('.selectWrap').on('change', function(){
            let dataName = $(".selectWrap option:selected").attr('data-name');
            $('.textareaWrap').attr('placeholder', dataName);
        })
    

기능 무효화

#기능 무효화

js

        e.preventDefault();
    

css

        pointer-events : none; // 기본 auto
    

AOS

#aos

CDN

        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    

예시

        <div class="todayBox" data-aos="fade-up" data-aos-delay="600"></div>
    

HTML

        data-aos="fade-up" data-aos-delay="600"
    

기본JS

        AOS.init();
    

기본+옵션JS

        AOS.init({
            offset: 10,
            duration: 600,
            easing: 'ease-in-out', 
            once: true,
            initClassName: 'aos-init',
            animatedClassName: 'aos-animate'
        });
    

offset: 요소가 화면 상단에서 얼마나 떨어져 있을 때 애니메이션을 시작할지 설정합니다. (단위: px)

duration: 애니메이션 지속 시간을 설정합니다. (단위: ms)

easing: 애니메이션 진행 방식을 설정합니다. (옵션: 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear')

once: 애니메이션을 한 번만 실행할지 여부를 설정합니다. (기본값: false)

initClassName: 초기화된 요소에 추가될 클래스 이름을 설정합니다. (기본값: 'aos-init')

animatedClassName: 애니메이션이 실행되는 요소에 추가될 클래스 이름을 설정합니다. (기본값: 'aos-animate')

CSS 배경블러처리

#CSS 배경블러처리

        backdrop-filter: blur(10px);
    

가로스크롤

#가로스크롤

        $("#contents").on('mousewheel',function(e){
            var wheelDelta = e.originalEvent.wheelDelta;
            if(wheelDelta > 0){
                console.log("up");
                $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
            }else{
                console.log("down");
                $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
            }
        });
    

이미지맵 반응형

#이미지맵 반응형

HTML

        <img src="img.png" usemap="#popMap" style="width:100%;">
        <map id="popMap" name="popMap">
            <area shape="rect" coords="0,55,250,244" href="#">
            <area shape="rect" coords="250,55,500,244" href="#">
            <area shape="rect" coords="0,244,250,430" href="#">
            <area shape="rect" coords="250,243,500,430" href="#">
        </map>    
    

JS

        $("img[usemap]").rwdImageMaps();
    

삼항연산자

#삼항연산자

        let cont = cont1
            ? '참' 
            : '거짓'
                ? '충접도'
                : '가능'
    

다크모드

#다크모드

기기에서 설정한 모드에 맞춰 적용(CSS)

        @media (prefers-color-scheme: dark) {
            내용
        }        
    

버튼클릭시 적용(JS)

        $('.btnMode').on('click', function(){
            $('body').toggleClass('darkMode');
                let mode = $('body').hasClass('darkMode') ? 'dark' : 'light';
                localStorage.setItem('mode', mode);
            });
            if (localStorage.getItem('mode') == 'dark') {
                $('body').addClass('darkMode')
        };    
    

자동으로 적당히 적용됨(META태그)

        <meta name="color-scheme" content="dark light" />
    

반응형 쿼리

#미디어 쿼리 #media #반응형 #프린트 #반응형 쿼리 #콘테이너 쿼리 #컨테이너 쿼리

기본

        @media (조건) {
            스타일
        }    
    

@container

컨테이너쿼리 적용할 최상단 부모의 컨테이너 타입을 지정 후 사용 가능

• inline-size(주로사용) : 인라인 레벨 기준으로 컨테이너를 적용. 요소의 width 값에 따라 반응형이 동작된다.
• size : 블록 레벨 기준으로 컨테이너를 적용. width 뿐만 아니라 height 값에 따라 반응형이 동작 된다.
• normal : 해당 값이 부여된 요소를 container에서 제외시킨다. 일종의 none 의미라고 보면 되겠다.

        .paging {container-type: inline-size;}
        .paging ul {display:block;}
        @container (max-width:768px){
            .paging ul {display:flex;}
        }
    

마우스 사용 디바이스, 마우스 사용하지 않은 디바이스 구분 (pointer:coarse = 마우스 사용안하는 디바이스)

        @media (pointer:coarse) {
        
        }
        @media (pointer: fine) {

        }
    

반응형 pc기준(px보다 작을때)

        @media all and (max-width: 1920px) {

        }
        @media all and (max-width: 1400px) {
        
        }
        @media all and (max-width: 1024px) {
        
        }
        @media all and (max-width: 768px) {
        
        }
        @media all and (max-width: 480px) {
        
        }    
    

반응형 모바일기준(px보다 클때)

        @media all and (min-width: 768px) { .. }
    

px ~ px 중간

        @media all and (min-width: 768px) and (max-width) { .. }
    

장치방향

        // 장치가 가로 방향인 경우 적용
        @media (orientation: landscape){ .. }

        // 장치가 세로 방향인 경우 적용
        @media (orientation: portrait){ .. }    
    

프린트

        @media print {

        }    
    

다크모드

        @media (prefers-color-scheme: dark) {

        }    
    

meta태그에서 구분

        <link href="css/common.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">
    

전체 확대 축소

#전체 확대 축소

HTML

        <a href="#" class="zoomIn">확대</a>
        <a href="#" class="zoomOut">축소</a>
        <a href="#" class="zoomReset">초기화</a>    
    

JS

        // 전체확대축소
        $(function(){
            let nowZoom = 100;
            let minZoom = 70;
            let maxZoom = 130;
        
            function zooms(){
                $('body').css('zoom', nowZoom + '%');
            };
            $('.zoomIn').on('click',function(){
                if(nowZoom == maxZoom){
                    alert ("더 이상 확대할 수 없습니다.");
                } else {
                    nowZoom = nowZoom + 10;
                    zooms();
                }
            });
            $('.zoomOut').on('click',function(){
                if(nowZoom == minZoom){
                    alert ("더 이상 축소할 수 없습니다.");
                } else {
                    nowZoom = nowZoom - 10;
                    zooms();
                }
            });
            $('.zoomReset').on('click',function(){
                nowZoom = 100;
                zooms();
            });
        });  
    

top 버튼 footer 위로 올리기

#top 버튼 footer 위로 올리기

스크롤길이 < 전체높이값 - 브라우저높이값 - footer높이값

        $(window).on('load scroll', function() {
            if ($(window).scrollTop() < $(document).height() - $(window).height() - $('footer').outerHeight()) {
                $('.btnTop').removeClass('active');
            } else {
                $('.btnTop').addClass('active');
            };
        });        
    

tab 기능

#tab 기능 #새로고침 안되는 tab #탭

HTML

        <!-- 텝 메뉴 -->
            <div class="tabSt01">
                <ul>
                    <li data-tab="tab01" class="active"><a href="javascript:void(0);">텝메뉴1</a></li>
                    <li data-tab="tab02"><a href="javascript:void(0);">텝메뉴2</a></li>
                    <li data-tab="tab03"><a href="javascript:void(0);">텝메뉴3</a></li>
                    <li data-tab="tab04"><a href="javascript:void(0);">텝메뉴4</a></li>
                    <li data-tab="tab05"><a href="javascript:void(0);">텝메뉴5</a></li>
                    <li data-tab="tab06"><a href="javascript:void(0);">텝메뉴6</a></li>
                    <li data-tab="tab07"><a href="javascript:void(0);">텝메뉴7</a></li>
                    <li data-tab="tab08"><a href="javascript:void(0);">텝메뉴8</a></li>
                </ul>
            </div>
            <!-- //텝 메뉴 -->

            <!-- 텝 내용 -->
            <div class="tabViewWrap">
                <div class="tabView tab01">내용1</div>
                <div class="tabView tab02">내용2</div>
                <div class="tabView tab03">내용3</div>
                <div class="tabView tab04">내용4</div>
                <div class="tabView tab05">내용5</div>
                <div class="tabView tab06">내용6</div>
                <div class="tabView tab07">내용7</div>
                <div class="tabView tab08">내용8</div>
            </div>
            <!-- //텝 내용 -->
    

JS

        // tab메뉴
        var tabMenu = $('.tabMenu01');
        var tabViewWrap = $('.tabViewWrap01');        
        tabMenu.find('li').on('click', function() {
            if($(this).hasClass('active')) return;
            var tabClass = $(this).attr('data-tab');
            tabMenu.find('li').removeClass('active');
            $(this).addClass('active');
            tabViewWrap.children('.tabView').hide();
            tabViewWrap.children('.' + tabClass).fadeIn();
            });
        });    
    

CSS

        .tabView + .tabView {display:none;}
    

CSS animation

#animation #애니메이션

축약

animation: ani01 3s 1s infinite ease alternate;

@keyframes ani01 {
    0% {margin-left: 100%;width: 300%}
    100% {margin-left: 0%;width: 100%;}
}
    

emmet

#emmet #에밋 #태그자동완성

vscode에서 사용안될때 : vscode > 설정 > emmet Trigger 검색 > 체크

기본사용법 : ul>li*10 입력 후 "tab"클릭

fullpage

#fullpage #패럴렉스 #풀페이지

2.9.7 버전까지만 무료

콘텐츠 타이틀

HTML

        <div id="fullpage">
            <div class="section" data-anchor="section01"></div>
            <div class="section" data-anchor="section02"></div>
            <div class="section" data-anchor="section03">
                <div class="slide" data-anchor="slide1">slide1</div>
                <div class="slide" data-anchor="slide2">slide2</div>
                <div class="slide" data-anchor="slide3">slide3</div>
                <div class="slide" data-anchor="slide4">slide4</div>
            </div>
            <div class="section" data-anchor="section04"></div>
        </div>    
    

JS

        $(function () {
            $('#fullpage').fullpage({
                responsiveWidth : 1024, //풀페이지 기능 삭제 크기
                responsiveHeight : 800, //풀페이지 기능 삭제 크기
                anchors:['section01', 'section02', 'section03', 'section04', 'section05'], //id값과 겹치지 않게 지정
                navigation : true, //작은원 위치표시
                // navigationPosition : 'left', //위치표시 위치
                navigationTooltips : ['section01','section02','section03','section04','FOOTER'], //툴팁
                // showActiveTooltip : true, //해당 영역일때 툴팁이 상시 표시
                slidesNavigation : true, //좌우슬라이드 작은원 위치표시
                slidesNavPosition : 'top', //좌우슬라이드 작은원 위치표시 위치
                // normalScrollElements : 'section05' //일반스크롤이 필요한경우(전체스크롤 영향X)(스크롤영역의 class나 id 입력)
                afterLoad: function(){ //aos 적용시 문제 해결
                    $('.section [data-aos]').removeClass("aos-animate");
                    setTimeout(function(){
                        $('.section.active [data-aos]').addClass("aos-animate");
                    }, 0);
                }
            })
        });
    

AOS + fullpage

#aos #fullpage

        AOS.init({
            offset: 100,
            duration: 600,
            easing: 'ease-in-out', 
            once: true, //반복삭제
            initClassName: 'aos-init',
            animatedClassName: 'aos-animate'
        });
        $('.section [data-aos]').removeClass("aos-animate"); //처음 로딩시 기능삭제
    
        
        $('#fullpage').fullpage({
            onLeave: function(origin, destination, direction) {// 이동시 aos 기능삭제
                $('.section [data-aos]').removeClass("aos-animate");
            },
            afterLoad: function(){ //이동시 aos 재실행
                $('.fp-table.active [data-aos]').addClass('aos-animate');
            },
            
        });
    

SFTP config설정(vscode)

#vscode #sftp #config #설정

콘텐츠 타이틀

        {
            "name": "pub_guide",
            "host": "192.168.0.236",
            "protocol": "sftp",
            "port": 22,
            "username": "root",
            "password": "Curonsys",
            "remotePath": "/home/curonsys/www/care/pub_guide",
            "concurrency": 5,
            "timeout": 30,
            "uploadOnSave": true,
            "downloadOnOpen": true,
            "confirm": false,
            "ignore" : [
                "**/.vscode",
                "**/.history",
                "**/.sftp.json"
            ]
        }
    

name : 프로젝트 명(파일명과 동일하게 해주면 보기 편합니다.)

host : 접속할 ftp 아이피

protocol : ftp 종류

port : ftp 포트번호 (서버관리자가 변경하지 않은이상 기본 22)

username : ftp ID

password: ftp PW

remotePath: 연결할 경로

concurrency: 한번에 몇개까지 파일전송(기본이 4)

timeout: 몇초간 응답없을시 멈춤

uploadOnSave: 로컬에서 저장시 서버 반영여부

downloadOnOpen: 파일 열때 서버에서 자동 다운로드

ignore : 서버와 동기화에서 제외 폴더

swiper

#swiper

HTML

        <div class="슬라이드이름">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/main_related01.png" alt=""></div>
                <div class="swiper-slide"><img src="./images/main_related02.png" alt=""></div>
            </div>
        </div>
    

JS

        var 슬라이드이름 = new Swiper(".슬라이드이름", {
            effect: "fade", //슬라이드종류
            autoplay: { //자동슬라이드
                delay: 3000,
            },
            pagination: { //페이징
                el: ".swiper-pagination",
                clickable: true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
            },
            navigation : { // 네비게이션 설정
                nextEl : '.swiper-button-next', // 다음 버튼 클래스명
                prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
            },
            
            speed : 2000, //슬라이드넘어가는 속도
            initialSlide: 4, //시작슬라이드순번
            loop : true, //무한
            loopAdditionalSlides: 1, //무한슬라이드시 마지막 다음에 보이지 않을때
            centeredSlides: true, //active 슬라이드 가운데로
            grabCursor: true, //슬라이드 잡기모양(마우스커서)
            pagination : false, // pager 여부
            slidesPerView: 'auto', // 한슬라이드에 보여지는 슬라이드수
            spaceBetween : 6, // 슬라이드 사이 여백
            autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.
            slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
            allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
            watchOverflow : true, // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
            observer: true, //css속성이 변경될때 업데이트된다(1/2) (display none block 할때 유용)
            observeParents: true, //css속성이 변경될때 업데이트된다(2/2) (display none block 할때 유용)
            slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
            slidesOffsetAfter : number, // 슬라이드 시작 부분 여백
            pagination : {   // 페이저 버튼 사용자 설정
                el : '.pagination',  // 페이저 버튼을 담을 태그 설정
                clickable : true,  // 버튼 클릭 여부
                type : 'bullets', // 버튼 모양 결정 "bullets", "fraction" 
                renderBullet : function (index, className) {  // className이 기본값이 들어가게 필수 설정
                return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
                },
            
                renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
                return '<span class="' + currentClass + '"></span>' +
                        '<span class="' + totalClass + '"></span>';
                }
            },
            //5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.
            breakpoints: { //반응형
                1024 : {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
            
                768 : {
                    slidesPerView: 3,
                    spaceBetween: 40,
                },
            
                480 : {
                    slidesPerView: 4,
                    spaceBetween: 50,
                },
            }
            
        });
        
        // slide 포커스시 해당 슬라이드로 이동
        $('.slide .swiper-wrapper a').each(function(i){
            $(this).focus(function(){
                reportSlide.slideTo(i, 1000, false)
            })
        });
    

구글 메터리얼 아이콘

#구글아이콘 #메터리얼 #material icons

cdn

        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
    

        font-family: 'Material Symbols Rounded';
    

라운드된거만 사용해서 다른건 인터넷 검색 하세요

cdn html 사용

        <i class="material-symbols-rounded">close</i>
    

태그로 보여주기

        <a href="javascript:void(0);" class="material-icons">close</a>
    

가상요소로 보여주기

        content:'close';font-family: 'Material Icons';
        content:'close';font-family: 'Material IconsR';
        content:'close';font-family: 'Material IconsO';
    

아이콘 속성 변경

        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    

FILL : 0, 1 (비우기, 채우기)

wght : 100~700 (굵기1)

GRAD : -25~200 (굵기2)

opsz : 20~48 (크기)

자주사용하는 아이콘

HTML 특수문자

#HTML 특수문자

CSS 그라디언트

#CSS 그라디언트

▲(0deg) / ▶(90deg) / ▼(180deg) / ◀(270deg)

select 클릭 후 버튼 클릭시 이동

#select 클릭 후 버튼 클릭시 이동

        <div>
            <select>
                <option value="">관련사이트</option>
                <option value="http://www.naver.com">네이버</option>
                <option value="http://www.daum.net">다음</option>
                <option value="http://www.tistory.com">티스토리</option>
            </select>
            <button class="btn_link">이동</button>
        </div>
        
        <script>
            $(".el0205b .btn_link").on("click", function () {
                var link = $(".el0205b select option:selected").val();
                window.open(link, '_blank');
            })
        </script>
    

select 클릭시 바로이동

#select 클릭시 바로이동

        <div class="select01">
            <select onchange="window.open(value,'_blank');">
                <option value="">관련사이트</option>
                <option value="http://www.naver.com">네이버</option>
                <option value="http://www.daum.net">다음</option>
                <option value="http://www.tistory.com">티스토리</option>
            </select>
        </div>
    

글자자르기

#글자자르기

한줄자르기

        white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    

여러줄자르기

        line-height: 2em;max-height: 6em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
    

네이밍

#네이밍

네이밍 규칙

camelCase: 소문자로 시작하고 대문자로 시작하는 모든 후속 단어(개인적으로 주로 쓰는 방식)

PascalCase: 모든 단어는 대문자로 시작

snake_case: 밑줄로 구분된 단어

kebab-case: 하이픈으로 구분된 단어

OLD_ARCHIVE: 모든 단어는 대문자로 하이픈으로 구분된 단어

자주 사용할만한 네이밍

정규식

#정규식

요소탐색-제이쿼리

#요소탐색 #제이쿼리

요소탐색-자바스크립트

#요소탐색 #자바스크립트

이벤트-제이쿼리

#이벤트 #제이쿼리

이벤트-자바스크립트

#이벤트 #자바스크립트

메소드-제이쿼리

#메소드 #제이쿼리

메소드-자바스크립트

#메소드 #자바스크립트

기본필터 선택자(Basic Filter)

#제이쿼리선택자

함수 필터 선택자(function Filter)

#제이쿼리선택자

입력 양식 폼(Form) 필터 선택자

#속성선택자

자식 선택자 (chlid)

#nth-child 자식선택

CSS 계층 선택자

#Hierarchy #계층선택자

CSS 속성 선택자

#CSS 속성 conTable

실시간 검색 기능

#검색기능

검색 창에 검색시 temp요소에서 찾아 보여주기

        //input에 keyup 이벤트 등록
        $(".searchWrap .tag").keyup(function(){
            var searchText = $(this).val(); //keyup 이벤트 발생 시 해당 input의 value 가져오기.
            $('section').hide(); //실시간 검색이 필요한 영역 숨김 처리
            var temp = $("section .tag li:contains('" + searchText + "')"); //input에 입력한 데이터가 있는 Element 찾기.
            $(temp).parents('section').show(); //입력한 데이터가 있는 Elemnet의 부모만 표시.
        });
    

a태그 클릭시 부드럽게 이동

#a #부드럽게 #스크롤이동

id값으로 이동 할 때 애니메이션 적용

        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();
            var target = $(this.hash);
            var target_height = $('#list10').height(); //원하는 위치 height값 가져오기
            var offset_top = target.offset().top - target_height; //해당 값만큼 -
            $('#contents').stop().animate({scrollTop: offset_top}, 500); //스크롤 원하는 영역
        });