본문 바로가기

DEVELOP

 (150)
[javascript] ES6 문법 ie에서 사용하기 babel의 browser.js을 사용하여 호환이 가능하다. 화살표 함수가 익스에서 인식이 되지 않았었는데 browser.js를 사용하면 인식이 될것이다.
[publishing] 단위 em, rem에 대하여 2탄 간단히 말하자면, rem은 html 폰트사이즈에 영향을 받는다. em은 해당 폰트사이즈에 영향을 받는다. 💡 만약 em에 font-size가 없다면? 🤔 상위 부모나 body의 font-size를 1em으로 설정한다. 상위 부모나 body font-size가 없으면? 🤔 브라우저마다 기본으로 정해둔 font-size가 있는데, 그걸 기준으로 따른다. 🧐 혹여나, 브라우저마다 기본 CSS를 * {} 에서 font-size를 정했다면, 그 기준을 1em으로 따르게 된다. 예를 들어, html 폰트사이즈를 14픽셀로 정의 하였다. html { font-size: 14px; } global-nav와 local-nav라는 클래스명의 요소 스타일에 패딩 좌우 값을 1rem을 주었다 하자, .global-nav, ...
[javascript] url 정규식으로 파악하기 HTML을 공통 적으로 사용하지만 특정 페이지에서만 커스텀하고 싶을 때, 정규식을 사용하여 해당 url을 파악후 작업한다. 특정 url : /article/best-review/12/166 (function(){ m = location.href.match(/article[\/][^\/]*[\/](\d+)[\/](\d+)[\/]/),brand_no=m?decodeURIComponent(m[1].replace(/\+/g, " ")):''; if(brand_no == '12') { n = location.href.match(/article[\/][^\/]*[\/](\d+)[\/](\d+)[\/]/),no=n?decodeURIComponent(n[2].replace(/\+/g, " ")):''; if(no ==..
[git] Command Line에 작업 반영 명령 줄곧 VSCode 터미널(커멘트 라인)에 명령어를 입력하여 작업물을 커밋하곤 했었는데 소스트리라는 GUI를 사용하게 되면서 명령어 입력하여 커밋하는 순서를 잊진 않을까 하여 기록으로 남기고자 한다. 😀 git status git add . git commit -m "커밋 내용" origin main git pull origin main git push origin main 여기서 main은 디폴트 브랜치를 뜻한다. 최근에 master에서 main으로 변경되었다. master는 종속의 관계 의미가 있기 때문에 평등?한 의미를 위해서 main으로 변경하였다고 하지만 실무에서는 master로 쓰이는 곳이 많다. 네이밍 변경에 관련해선 아래 링크를 참고해도 좋다. https://github.com/github/..
[plugin] swiper 중복 사용 tablet과 mobile 환경에서 슬라이더 플러그인 클래스는 동일한데 분리되어 보여야할 경우가 있다. 그럴 때 유용하게 쓰일수 있는 스크립트를 공유한다. 해당 슬라이더 개수를 파악하여 인덱스를 이용해 각각의 슬라이더에 자바스크립트로 아이디 값을 할당 후 스와이퍼를 동작 시킨다. html javascript $('.category-add-slider').each(function (i, v) { let sliderName = 'slider' + i; $('.category-add-slider')[i].id = sliderName; let sliderId = '#' + sliderName; let categoryAddSlider = new Swiper(sliderId, { loop: true, autopla..
[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'를 제거하면 해당 소스코드가 보일 것이다. 그 후 로컬에 연결하여 콘솔을 보면 노란색의 연결 이슈가 사라진것을 볼수 있다. 😊

티스토리툴바