본문 바로가기

javascript23

[slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item .slick-slide { margin: 0 30px; // space(여백)/2 } .slick-list { margin: 0 -30px; // space(여백)/-2 } Parameter for space between slides · Issue #582 · kenwheeler/slick I noticed that all your demos are applying no space between the slides but rather you are creating the appearance of space by using heading tags as the content in each slide, which have equal margi... github.com [slide] slick 사용법(+반응형.. 2021. 10. 23.
[e.g.] Drag and drop element in a list (+placeholder, clone item) See the Pen Drag and drop element in a list (+placeholder, clone) by plancktime_ (@plancktime_) on CodePen. 1. structure A B C D E 2. css .opacity { /* */ opacity: 0.5; } .drag { /* */ position: fixed; box-shadow: 0 8px 12px rgba(0, 0, 0, 0.16); } .placeholder { /* */ margin-bottom: 10px; height: 4px; margin-top: -14px; /* default space + placeholder height */ transform: translateY(7px); /* plac.. 2021. 10. 23.
[javaScript] 문자열의 이스케이프 시퀀스 script: var str = "I am a \"double quoted\" string inside double quoted"; console.log(str); console: I am a "double quoted" string inside double quoted \' 따옴표 single quote \" 쌍따옴표 double quote \\ 역슬래시 single backslash \b 백스페이스 backspace \r 캐리지 리턴 carriage return \n 줄바꿈 newline \s 스페이스 space \t 수평탭 tab \v 수직탭 tab \f 폼피드 form feed \0 null 2021. 1. 31.
[slide] swiper v5부터 ie 미지원! 2020년 3월에는 youtube가 버리더니, 플러그인들도 하나 둘 IE를 버리고 있다. 바라컨데, 이왕 이렇게 된 거 모든 플러그인들이 IE를 버려줬으면 좋겠다. 아예 이도 저도 안되면, 언젠가 IE를 버리지 않겠는가. IE 없는 세상이 오길 바라며. 아래는 swiper 버전 별 CDN을 확인할 수 있는 링크이다(IE 고려시, 무조건 v5 미만으로!) Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fas.. 2021. 1. 16.
[툴팁] tooltip, 쉽고 쉽게 만들기: tippy.js tooltip은 일반적으로 :hover나 toggleClass()로 제어되는데, 플젝에 따라, show/hide 외 스크롤에 따른 액션이 요구될 때가 있다. tippy.js과 함께라면, 스크립트와의 싸움을 피할 수 있다. tippy.js는 popper.js를 기반으로 업그레이드화된 플러그인으로, popper.js의 스크롤 액션이 default로 들어가 있다. 여기서 스크롤 액션이란, 예로, tooltip의 위치를 상단으로 설정(placement: 'top')하였을 때, 스크롤에 의해 tooltip이 안 보이게 될 시, 자동으로 tooltip의 위치를 아래로 내려준다. 또 스크롤을 올리면, 다시 상단으로 올려준다. 1. 플러그인 연결 make tooltip! 2. tippy API 중 placement s.. 2021. 1. 12.
[slide] slick 사용법(+반응형) How to use slick.js 1. css 2. html / script jQuery가 필요한 슬라이더로, 요구되어지는 jQuery의 버전은 최소 1.7 이상이다. 기본형(default) : pager, prev/next button, loop 기능을 가진 full size의 슬라이드가 구현된다. Slide 1 Slide 2 Slide 3 3. 옵션 swiper만큼이나 역시 정~말~ 다양한 옵션들이 있는데, 실무 작업시 자주 사용하는 옵션만 정리해보았다. Parameter Type default 기능 dots boolean false dot 모양의 pager infinite boolean true 무한 스와이프 slidesToShow number 1 한 화면에 보이는 슬라이드 개수 variableWidth boolean false 각.. 2021. 1. 10.
[slide] swiper 사용법(+반응형) [플러그인/슬라이드] swiper v5부터 ie 미지원! 어제 인터넷 사업하는 친구에게서 연락이 왔다. 친 : 야, 플래시 왜 이래? 나 : 12월 31일에 플래시랑 이별인사 안 했어?ㅎ 했어야지~ 보내줘~ 친 : 슬라이드가 안돼! 나 : 응? 에??? 슬라이드가 플래 fresh-mint.tistory.com 1. css 위와 같이 CDN을 가져와도 되고, 다운로드하여 사용해도 된다. 단, 내용 변경은 안되고, 커스텀은 프로젝트.css에서 선택자를 가져와 수정한다. (최신버전의 CDN 혹은 파일다운로드는 공식 사이트: https://swiperjs.com 에서, 이전 버전은 https://cdnjs.com/libraries/Swiper 에서 확인 가능하다) 1-1. scss 2. html / script.. 2021. 1. 10.
[템플릿] gulp-ejs : 사용법 1. 혹, 아래와 같이 변수 지정 여부로 분기 처리가 되어있은데, false로 값을 넘기고 싶을 때엔, 따로 변수를 기입하지 않아도 된다(예: ). 단, 하이픈(-)은 반드시 있어야 한다, if ( ON ) { is On } else { is Off } 2. : 변수값 삽입용 + 와 의 경우 줄바뀜이 있으면, 오류가 난다. 반드시, '%>' 닫힘 태그 삽입이 필요하다. var a = = 1 위처럼 'var 변수명 = '과 같이 사용 가능한데, 비추천한다. 자바스크립트 코드를 담을 땐 를 사용하고 변수값을 담을 땐 를 사용하는 식으로, 완전한 분리 사용을 해야, 추후 관리에 용이하다. 3. : 자바스크립트 코드 삽입용 gulp-ejs에서는 을 이용하여 자바스크립트를 내장할 수 있다. 다만, 위의 글처럼 는.. 2021. 1. 9.
[템플릿] gulp-ejs : 설치 및 gulpfile.js 설정 1. 설치 npm install --save-dev gulp-ejs 2. gulpfiles.js 설정 const gulp = require("gulp"); const ejs = require("gulp-ejs"); gulp.task('gulpEjs', function() { return gulp .src("./src/html/*") .pipe(ejs()) .pipe(gulp.dest("./dist/html")) }); gulp.task( "default", gulp.parallel("gulpEjs") ); 2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :( 2021/01/09 - [web/gulp] - [템플릿] gulp-ej.. 2021. 1. 9.
[템플릿] gulp-file-include 사용법 1. @@include('템플릿 파일 위치') @@include('템플릿 파일 위치') @@include('파일위치', { 변수명 : 변수값 }) 2. @@var : 변수값 삽입용 @@변수명 3. @@if : 오직 if만 존재 @@if (변수 === 변수값){ 결과물 } 4. @@for @@include('템플릿 파일 위치', { 배열이름 : [아이템1, 아이템2, 아이템3] }) @@for (var i = 0; i html > index.html: @@include('./include/content.html') src > html > about-gulp-file-include.html: @@include('./inclu.. 2021. 1. 9.
[템플릿] gulp-file-include 설치 및 gulp-file 설정 1. 설치 npm install --save-dev gulp-file-include 2. gulpfile.js 설정 const gulp = require("gulp"); const fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { return gulp.src([ "./src/html/*", // ★★★★ 불러올 파일의 위치 "!" + "./src/html/include*" // ★★★★ 읽지 않고 패스할 파일의 위치 ]) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('./dist/html')); // ★★★★ 변환한 파일의 저.. 2021. 1. 9.
[로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자 모바일 프로젝트는 웬만한 모든 게 정상작동하기 때문에 큰 문제가 없는데, pc/반응형 web 작업의 경우, 우리의 못난이 익스플로러. 그 못난이 덕분에 크로스 브라우징 확인이라는 조금의 수고가 필요하다. 이에 대한 수고를 덜어주는 플러그인이 browser-sync + gulp-sass 조합이다. 마치 비쥬얼 스튜티오의 live server + live sass compiler 같은 조합으로, browser-sync은 로컬 서버를 생성하고, gulp-sass는 scss를 css로 컴파일하는 플러그인인데, 이 gulp-sass에 browser-sync를 연결해두면, scss 수정과 동시에 서버에 업데이트를 해줘, 새로고침 없이 바로 서버에서 확인 가능하다. 그럼 먼저 browser-sync를 설치해보자. 1.. 2021. 1. 8.
[css 초기화] gulp-sass + node-normalize-scss 1. 설치 npm install node-normalize-scss@3.0.0 2. gulpfile.js 설정 const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const Fiber = require('fibers'); const dartSass = require('dart-sass'); const autoprefixer = require('autoprefixer'); const postcss = require('gulp-postcss'); const apfBrwsowsers = [ 'ie >= 8', ]; gulp.task('sass', function(){ const options = { sass : { .. 2021. 1. 8.
[gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2 이제, 브라우져 버전에 맞춰 css 컴파일해보자. 1. 설치 npm install --save-dev gulp-postcss autoprefixer@9.8.5 2. gulpfile.js 설정 const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const Fiber = require('fibers'); const dartSass = require('dart-sass'); const autoprefixer = require('autoprefixer'); // ★★★★ 고려할 브라우저 버전 설정 const postcss = require('gulp-postcss'); // ★★★★ 위 브라우저에 맞춰 css 컴파일 .. 2021. 1. 8.
[gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 1 사스(sass), 비쥬얼스튜디오를 사용하면 Live Sass Compiler를 이용해 쉽고 간단하게 사용할 수 있지만, 공동작업이 많은 개발환경의 특성상, 다른 작업자분들의 환경을 고려하지 않을 수 없다. 그래서 찾은 방법이 gulp-sass이다. gulp에 연결해두면, 타 환경에서도 npm만 돌리면 되기에 gulp-sass 설치를 추천한다. 다음은 dart sass를 사용하기 위한 설정 방법인데, 자세히 적기엔 너무 많아서 그러하지 못하였고, 어떤 플러그인을 설치해야하는지, 각 플러그인이 어떤 용도인지 정도만 기입하였다. 그럼 오늘도 즐거운 코딩! 1. 설치 npm install --save-dev gulp-sass gulp-sourcemaps fibers dart-sass 2. gulpfile.js .. 2021. 1. 8.

티스토리툴바