본문 바로가기

분류 전체보기

 (254)
[javascript] var, let, const, 호이스팅, 스코프에 관하여 * 호이스팅(Hoisting)이란 var로 선언된 변수, 함수가 어떤 코드 보다 위로 끌어올려져 실행되는 자바스크립트가 갖는 특징을 말한다. var 변수 선언과 var로 선언된 함수선언문에서만 호이스팅이 일어난다. 일어나는 순서는 1. var 변수 선언 2. var로 선언된 함수선언문 * 함수선언문 var inner = function(){} let inner2 = function(){} * 함수 표현문 function funcName(){} * 선언, 초기화, 할당, 참조 - 선언 : 자바스크립트 엔진에게 해당 변수 존재를 알려줌 - 초기화 : 값을 저장하기 위한 메모리 공간 확보 - 할당 : 변수에 값을 저장 - 참조 : 변수에 저장된 값을 읽어 들이는 것 * 브라우저별 사용하는 자바스크립트 엔진 -..
[plugin] slick.js 자동재생 멈춤 메서드 slick.js 플러그인을 입힌 자동재생 슬라이더에서 특정 슬라이드에 머물게 하는 메서드가 있다. slickPause 또한 hover, focus시에 멈추게 하는 값이 있다. pauseOnHover: true, pauseOnFocus: true 하나의 슬라이더에 slick.js 를 입힌 후에 1. hover시 멈추게, 2. focus시 멈추게, 3. 특정 엘리멘트를 클릭 시 멈추게하는 예시는 아래와 같다. $('.single-slick').slick({ autoplay: true, autoplaySpeed: 5000, dots: true, pauseOnFocus: true, pauseOnHover: true, responsive: [ { breakpoint: 1081, settings: { arrows:..
[plugin] swiper version6 이상 로컬 연결하기 swiper 예전 버전에선 압축 파일을 다운로드하여 로컬에 연결하면 되었었는데, 최신으로 변경 되면서 로컬로 연결하면 console 창에 swiper-bundle.min.js.map 연결이 원활하지 않다고 나온다. 따라서 https://swiperjs.com/get-started#download-assets 이 주소로 접속하여 아래 세가지 파일을 다운받는다. 1. swiper-bundle.min.css 2. swiper-bundle.min.js 3. swiper-bundle.min.js.map 다운 받는 방법은 해당 파일을 클릭하면 나오는 url에서 'browse'를 제거하면 해당 소스코드가 보일 것이다. 그 후 로컬에 연결하여 콘솔을 보면 노란색의 연결 이슈가 사라진것을 볼수 있다. 😊
[plugin] slick.js slide 컨텐츠 너비로 설정하기 slidesToShow 설정 후에 슬라이드 너비가 셋팅되어있기 때문에, 캡처본 처럼 두 줄이상으로 보일 경우가 있다. 그럴 경우에는 slick.js의 옵션인 variableWidth값을 셋팅 해주면 된다. 아래는 해당 옵션 추가 예시이다. let slidetNavIdSetting = { variableWidth: true, slidesToShow: 4, slidesToScroll: 1, swipe: false, infinite: false, asNavFor: sliderId, dots: false, centerMode: false, focusOnSelect: true, } $(sliderNavId).each(function(index, val){ if($(val).find('.menu-item').len..
[plugin] swiper Thumbs gallery 컨텐츠 높이 자동 조절 tab style 구현을 swiper Thumbs gallery 스타일로 나타낼 경우, effect를 'fade' 형태로 주면 되지만, 각 탭 컨텐츠 높이가 상이한 경우 swiper는 기본적으로 젤 높은 높이를 측정하여 통일 적용하기 때문에 각 컨텐츠 높이별로 영역을 잡고자 한다면 아래 옵션을 추가해주면 된다. const newSlider = new Swiper('.test-slider', { effect: 'fade', autoHeight : true, });
[css] 왼쪽, 오른쪽 화살표 만들기 html Previous Next css .card-tab-menu .slick-arrow { width: 60px; height: 68px; background-color: #fff; border: 1px solid #eee; font-size: 0px; } .card-tab-menu .slick-arrow::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; z-index: 1; border: 1px solid #b8b8b8; border-width: 0 2px 2px 0; margin-left: -2px; padding: 10px; } .card-tab-menu .slick-prev::after { left: 6..
[github] 기존 레파지토리 로컬에 연동 1. 기존 레파지토리 주소를 레파지토리에서 복사한다. 2. 로컬에서 해당 레파지토리를 연동할 위치에서 git bash를 실행한다. git bash는 git 홈페이지에서 설치하면 오른쪽마우스 클릭시 GUI와 Bash가 보일것이다. 3. 다음과 같은 명령어로 해당 레파지토리를 다운로드 받는다. git clone https://해당 레파지토리 주소 4. 그 후 자신이 사용하는 에디터에서 해당 레파지토리 경로를 오픈 후 터미널을 실행한다. 개인적으로 비주얼 스튜디오 코드 에디터를 추천. 5. 소스 수정후 아래와 같은 명령을 입력하여 해당 레파지토리에 푸시한다. git add . git commit -m "동기화" git pull origin main git push origin main 6. 해당 레파지토리 커..
[javascript] window 팝업 띄우기 스크립트 * ES6 script 문법을 사용하였습니다. marketing-agree-more 클래스 명을 가진 자세히보기 버튼을 클릭시 크기 커스텀된 윈도우 팝업 오픈하기. html 서비스 및 상품 추천, 각종 이벤트 소식을 받습니다. 자세히보기 > javascript const marketingBtn = document.querySelector('.marketing-agree-more'); marketingBtn.addEventListener('click', () => { const maketingPopup = window.open('mypage_member02_marketing_agree_popup.html', '_blank', 'width=583, height=816'); maketingPopup.onloa..

티스토리툴바