분류 전체보기235 제이쿼리 셀렉옵션 커스텀 셀렉옵션 분석하기 토글이 아닌 a로 감고 리스트형식 분석 본아이에프는 버튼식을 넣었음 롯데몰의 셀렉옵션을 응용하여 본아이에프에 적용해보기 $('.select_custom .select a').on('click', function () { console.log($(this).text()); // select 커스텀 $('.select_custom .btn_select').on('click', function () { $(this).toggleClass('on'); $('.select_custom .select').toggle(); }); html 메서드는 태그 까지 다 가지고옴 $('.select_custom .select a').on('click', function () { // $(this).text(.. 2022. 11. 1. 제이쿼리 util - toggle , trigger('focus'), tabindex="0" 검색표시 클릭시 아이콘 변경 & 하위요소 나오게 하기 먼저 css 로 자리와 on 적용시 바뀔수 있게 설정 #header .util_wrap .btn_toggle { width: 51px; height: 51px; margin-left: 5px; border: 1px solid rgba(225, 225, 225, 0.5); text-indent: -9999px; background: url(../images/gnb_util.png) no-repeat; float: left; } #header .util_wrap .btn_toggle.on { background-position-y: -50px; background-color: #FFF; } 제이쿼리 함수 입력 $('#header .util_wrap .bt.. 2022. 10. 31. 제이쿼리 애니메이션 효과 gnb 메뉴에 마우스를 가다대면 창이 늘어나며 하위요소 보이게 하기 css, before 제이쿼리 수정 너무길어 함수명을 에미네이션으로 한번더 감아준다 $(function () { // header, gnb 바 애니메이션 function animateHeader() { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); // 각 li안의 >a(포지션이 아니어도됨)의 기준(.i.. 2022. 10. 31. 제이쿼리 애니메이션 바 추가 mouseenter 기존코드 뜯어보기 $(function () { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); // 각 li(포지션이 아니어도 됨) 의 기준(.inner)에서의 좌우 위치 var posX = $(this).find('>a').position().left; var w = $(this).find('>a').outerWidth(); $('#header .gnb_bar').css.. 2022. 10. 31. 제이쿼리 li 메뉴 > depth02 보이기 $(function () { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); }); $('#header').on('mouseleave', function () { $('#header').removeClass('on'); // 헤더에서 마우스 빠졌을때만 서브메뉴 안보이게 $('#header .gnb .depth02').hide(); }); }); 원본참고 https://ww.. 2022. 10. 31. 제이쿼리 스크롤+애니메이션 공통클래스로 효과 주기 '[class*=animate_fade]' animate_fade 를 포함하는 .each 각각 선택하여 반복하라 var st = $(this) 윈도우임 wiondow 가능 이만큼을 높이를 빼줘야한다. $(function () { $('[class*=animate_fade]').each(function () { // each안에서 $(this)는 앞에서 선택된 요소 var _this = $(this); $(window) .on('scroll', function () { var posY = _this.offset().top; var st = $(this).scrollTop(); console.log(posY, st); if (st >= posY - $(this).outerHeight() + 150) { _t.. 2022. 10. 28. CSS :nth-child(n) even, 2n 짝수번째 설정 1열로 나열된 컨텐츠들을 짝수요소만 오른쪽으로 가게 재배치 공통클래스로 동알한 클래스에 :nth-chiled(even) .about_page .desc_wrap:nth-child(even) .desc_img { float: right; } .about_page .desc_wrap:nth-child(even) .txt_wrap { float: right; } 또는 공통클래스로 동알한 클래스에 :nth-chiled(2n) .about_page .desc_wrap:nth-child(2n) .desc_img { float: right; } .about_page .desc_wrap:nth-child(2n) .txt_wrap { float: right; } nth-child 는 형제요소들의 선택이 가능한 가상선택자.. 2022. 10. 28. 스크롤 애니메이션 AOS 라이브러리 사용해보기 페이지 방문시 다양한 효과를 볼 수 있다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 하단으로 내리면 제공 소스를 볼수있음 CDN? content distribution network 의 약자 서브로 전송되는 데이터이 때문에 느려서 직접 다운받아보자 페이지 상단 이 귀여운 캐릭터 클릭시 깃헙으로 이동 내용을 보면 v2 버전이 더안정화 됬다고 나온다 v2 버전 이동후 깃헙에서 파일을 다운로드하자 downloadzip 각각 css js 파일에 넣어준다. 링크연결 필수! 초기화코드 복사 자바스크립트 파일에 소스 코드 추가 사.. 2022. 10. 28. 단어 한단어씩 줄바꿈 word-break: keep-all , word-wrap: break-word /* 한글을 한단어씩 줄바꿈 */ word-break: keep-all; /* 부모보다 단어가 길 경우는 한글자씩 내려가게 */ word-wrap: break-word 2022. 10. 28. 네이밍 컨벤션 분류별 Prefix 부가설명분류prefix부가설명 타이틀 tit 일반적인 타이틀 영역 section 제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양) wrap 일반 영역의 묶음 (선택적 사용, 중첩사용 지양) inner 부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우 내비게이션 gnb 서비스 전체 내비게이션 lnb 지역 내비게이션(gnb 영역) snb 사이드 내비게이션(좌측메뉴) 탭 tab 테이블 tbl 목록 list 일반 목록(ul, ol, 리스트 형식의 dl) 폼 tf textfield (input 타입 text / textarea) inp input 타입 radio, checkbox, file 등 opt selectbox lab label fld .. 2022. 10. 27. 제이쿼리 스크롤시 애니메이션 추가 라이브러리를 계속 쓰는건 권장하지않음 숙지하여 응용할 수 있게 먼저 예제를 만들어보자 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 기존 AOS 를 뜯어보면 공통클래스 사용하였다 이유는? 스크롤로 각각 위치판단후 제이쿼리를 개별 적용하게되면 변수가 너무 많기때문 초기화 코드 공통클래스를 사용하여 적용해보자 /* 애니메이션 공통 */ .animate_fade_down { transform: translate(0, -100px); opacity: 0; transition: all 1s; } .animate_fade_up { t.. 2022. 10. 27. 자바스크립트 false 판정 / ! false 판정 - 0, -0, '빈칸', NaN, undefined, false , null true 로 변경시 ! 사용 (반대로도 사용가능) function test() { // 서브페이지에서 실행하면 안되는 경우, 존재여부 판단하여 return if (!$('main_about .box').length) return; console.log($('main_about .box').offset().top); } test(); 빈페이지에서 스크롤을 테스트해보았다. length 가 없는 false 상태이기 때문에 아무것도 나오지 않으므로 ! 를 줘서 true 로 리턴시켜라 . 참고 : 10_파크원(스크롤애니메이션,페이드슬라이더,슬라이드내부애니메이션) 그럼 false 상태에서 top 을 찾을 수 없다고 나오지.. 2022. 10. 27. 이전 1 ··· 6 7 8 9 10 11 12 ··· 20 다음
