javascript
-
[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.01.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.01.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.01.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.01.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.01.10
-
[템플릿] gulp-ejs : 사용법
1. 혹, 아래와 같이 변수 지정 여부로 분기 처리가 되어있은데, false로 값을 넘기고 싶을 때엔, 따로 변수를 기입하지 않아도 된다(예: ). 단, 하이픈(-)은 반드시 있어야 한다, if ( ON ) { is On } else { is Off } 2. : 변수값 삽입용 + 와 의 경우 줄바뀜이 있으면, 오류가 난다. 반드시, '%>' 닫힘 태그 삽입이 필요하다. var a = = 1 위처럼 'var 변수명 = '과 같이 사용 가능한데, 비추천한다. 자바스크립트 코드를 담을 땐 를 사용하고 변수값을 담을 땐 를 사용하는 식으로, 완전한 분리 사용을 해야, 추후 관리에 용이하다. 3. : 자바스크립트 코드 삽입용 gulp-ejs에서는 을 이용하여 자바스크립트를 내장할 수 있다. 다만, 위의 글처럼 는..
2021.01.09
-
[템플릿] 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.01.09
-
[템플릿] 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.01.09
react
-
React Hook - { useEffect }
Q. 화면이 등장하여, 2초가 지나면 alert 문구, "The maximum number of guests is 2 guests."를 삭제해보자. 단 업데이트될 때 재등장하지 않으며, 2초가 되기전 화면을 나갔다가 다시 돌아와도 2초가 유지되어야 한다. 앞서 useEffect를 배우고, 활용하여 작성해 보자. 1. uesEffect을 import 한다. import React, { useState, useEffect } from "react"; // useEffect 추가 2. uesEffect를 변수에 담지 말고, 바로 실행시킨다. useEffect( ()=> { 실행될 코드~~~ } ) 위 코드에서 useEffect의 "실행될 코드"가 실행되는 순간은, 1 컴포넌트가 그려질 때와 2 컴포넌트가 업데..
2021.11.06
-
React Router 리액트 라우터 활용편 + { useHistory } 뒤로가기
뒤로가기 버튼을 구현해보자(react-router-dom v5 이상, react v16.3 이상 사용 가능) 1. useHistory기능을 사용하기 위해 import 해온다. import { useParams, useHistory } from 'react-router-dom'; // useHistory 추가 2. useHistory를 변수가 담아준다. let history = useHistory(); 3. goBack() 함수를 실행한다. { history.goBack() }}>Back to main import React from "react"; import { useParams, useHistory } from 'react-router-dom'; function Detail(props){ let { ..
2021.11.06
-
React Router 리액트 라우터 활용편 - 상세페이지 제작 Answer
1. App.js import { Route } from 'react-router-dom'; 2. Item.js import { Link } from 'react-router-dom'; { props.item.country }, { props.item.city } { props.item.price } won 3. Detail.js import { useParams } from 'react-router-dom'; let { id } = useParams(); let matchedItem = props.items.find(function(item){ return item.id == id; }); props.item[item위치] ➜ matchItem import { useState } from 'react'..
2021.11.06
-
React Router 리액트 라우터 활용편 - 상세페이지 제작 Quiz
Q. 아래 코드를 변경하여, 각 컴포넌트 아이템(여행 상품)을 클릭하였을 때, 데이터 Id값을 path값으로 지닌 detail 페이지로 넘어가 보자. (예: /Detail/1~3) export default [ { id: 1, country : "Africa", city : "Sahara", price : "4,500,000" }, { id: 2, country : "Italy", city : "Venice", price : "2,000,000" }, { id: 3, country : "Turkey", city : "Cappadocia", price : "3,560,000" } ] import { useState } from 'react'; import './App.css'; import itemList..
2021.11.06
-
React Router 리액트 라우터3 { Link }
Q. { Link }를 이용하여, 각 단어를 클릭하면 "/", "/Article", "/Contact"로 이동되도록 변경해보자. import './App.scss'; function App() { return ( Home Article Contact ); } export default App; 1. { Link }를 import 선언한다. import { Link } from 'react-router-dom'; 2. 로 감싼다. Home 3. HTML 결과 Home import './App.scss'; import { Link } from 'react-router-dom'; function App() { return ( Home Article Contact ); } export default App; 부..
2021.11.06
-
React Router 리액트 라우터1 { Route, Switch }
1. react-router-dom@5 설치 npm install react-router-dom@5 yarn add react-router-dom@5 2. index.js에 설정 추가 import를 선언해 주고, 을 로 감싸준다. import { BrowserRouter } from 'react-router-dom'; 3. 'url/'와 'url/A'로 페이지를 나눠보자. 3.1. app.js에 import 먼저 선언 import { Route, Switch } from 'react-router-dom'; 3.2 를 이용해 분기 처리 의 path="" 안에 원하는 경로명을 지정해준다. 기본 페이지입니다. A 페이지입니다. 결과: http://localhost:3001/ 기본 페이지입니다. http://l..
2021.11.05
-
data.js에 있는 데이터를 useState()에 담기. feat.map()
Q. 국가명과 도시명, 가격을 별도의 데이터파일로 저장하고, 이를 useState()에 담아 가져와 list를 작성해보자. /* eslint-disable */ import { Navbar, Container, Nav } from 'react-bootstrap'; import './App.css'; function App() { return ( Africa, Sahara 4,500,000 won Italy, Venice 2,000,000 won Turkey, Cappadocia 3,560,000 won ); } export default App; 1. 작명.js 파일을 생성하고 export 시킨다. 다른 컴포넌트에서도 사용할 수 있도록 export 선언해주고 그 안에 작성한다. export/import ..
2021.10.30
-
내보내기 export /가져오기 import
1. export: 내보내기 export default export default는 어떤 파일의 코드를 타파일에서 사용하고 싶을 때 사용하는 코드로, 뒤에는 변수명이나, 함수가 들어갈 수 있다. 예로, 'mint coding'이 여러 곳에서 사용되어야 할 경우, 이를 name에 담아 export 해주면 그 어떤 파일에서도 간단히 name으로 해당 값을 넣어줄 수 있다. const name = 'mint coding'; export default name; export는 맨 마지막 줄에 위치하여, 한 파일에서 단 한번만 사용할 수 있다. 2. import 가져오기 import 작명 from './경로.js'; // .js를 생략해도 괜찮다. import name from './경로.js'; // 꼭 nam..
2021.10.30
-
bootstrap 연결 방법
1. bootstrap 설치 npm install react-bootstrap bootstrap 2. public > index.html에 bootstrap 연결 3. 클래스 사용 Danger 4. 컴포넌트 사용 import { Nav } from 'react-bootstrap'; // { } 안에 사용할 컴포넌트 명 삽입 Active Link Link import { Nav } from 'react-bootstrap'; import './App.css'; function App() { return ( Active Link Link ); } export default App; React-Bootstrap : React-Bootstrap The most popular front-end framework, ..
2021.10.30
-
input 입력값을 가져와, 기존 state에 추가해보자.
Q. 아래 코드를 변경하여, input에 입력된 메뉴를 메뉴 리스트에 추가하여 오늘 메뉴에 선택할 수 있게 변경해 보자. import React, { useState } from 'react'; import './App.scss'; function App() { let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']); let [menuNum, menuNumFunc] = useState(0); return ( { menuTit.map( ( menu, i )=>{ return ( { menuNumFunc(i) } } key={i} >{ menu } ) }) } 입력 ); } function Today(props){ return ( 오늘은 { props.men..
2021.10.30
css
-
[css] 망할 놈의 다크 모드 대응하기 3부: Chrome으로 확인
1. 개발자도구(F12)를 열어, 더보기 > More tools > Render 선택 2. 하단에 추가된 Render에서 Emulate CSS media feature prefers-color-scheme의 옵션을 dark로 변경 [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' fresh-mint.tistory.com [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통..
2023.08.25
-
[css] 망할 놈의 다크 모드 대응하기 2부: 이미지
1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통해 간단히 이미지 전환할 수 있다 부수적인 이야기로, 다크모드 관련하여 검색해 보면, 순수한 흰색 배경의 이미지는 피하자는 글을 만날 수 있다. 어두운 배경으로 인해 빛 번짐 현상이 발생하며, 무엇보다 사용자의 눈의 피로도를 높이기 때문이다. 덧붙여, 이미지의 밝기를 줄이고 대비를 높이거나 그레이스케일을 낮춰 보다 피로도를 낮추자는 글들도 심심치 않게 찾을 수 있다. body.dark img { filter: brightness(.8) contrast(1.2); } @media (prefers-color-scheme: dark) { img { filter: brightness(.8..
2023.08.25
-
[css] 망할 놈의 다크 모드 대응하기 1부
간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' 를 외치며 dev에 올려보면, '내가 이제 복붙도 못하는 지경인가' 싶을 것이다. 아니다. 지원율이 너무나 낮을 뿐이다. 현재로서 스크립트 없이 우리가 선택할 수 있는 방법은 prefers-color-scheme 이다. 'prefers-color-scheme' 은 { } 안에 모든 컬러를 재정의하면 된다. .link { color: blue; } @media (prefers-color-scheme: dark) { .link { color: yellow; } } 다만 위와 같이 작성하면, 불필요하..
2023.08.25
-
[scss] @at-root가 아닌 @mixin으로 최상위 부모에 클래스 추가하기
.parent.bold .child span { font-weight: bold }를 지정하고자 할 때 @at-root를 잘못 활용하는 경우가 있다. .parent { .child { span { @at-root .bold & { font-weight: bold; } } } } 위의 컴파일 결과물은 .bold .parent .child span { font-weight: bold } 이다. @at-root를 이용하여 .parent에 .bold 클래스를 추가하고자 한다면 귀찮더라도 클래스명을 다 적어줘야 한다. .parent { .child { span { @at-root .parent.bold .child span { font-weight: bold; } } } } 그런데, 이를 간단히 해결해 주신 분이..
2022.05.04
-
[css] 텍스트 길이에 맞춰 너비 조절하기 grid-template-columns: minmax(최소너비, max-content) 1fr;
HTML 삽입 미리보기할 수 없는 소스 위와 같은 경우, 간혹 "텍스트 길이에 맞춰 너비가 늘어나게 해주세요~" 라는 요청 때문에 로 변경하는 경우가 있다. 더이상 그러지 말자, 우리에겐 grid가 있다. HTML 삽입 미리보기할 수 없는 소스 grid-template-columns: minmax(최소너비, max-content) 1fr; 예로, grid-template-columns: minmax(100px, max-content) 1fr; 일 때, grid 첫번째 요소의 기본 너비는 100px이다. 하지만 콘텐츠가 길어 너비가 120px이 된다면, 화면에 그려지는 너비는 grid-template-columns: 120px 1fr과 같다. 결론은 과 이별하자. 가나다 가나다라마바사아자차카파타하 .gri..
2022.01.25
-
[css] Text Gradient with Gradient Rotate Animation 텍스트 그라디언트 효과
HTML 삽입 미리보기할 수 없는 소스 HTML 구조: Text Gradient scss 버전: .text-gradient { overflow: hidden; position: relative; display: inline-block; vertical-align: top; font-size: 40px; font-weight: 900; line-height: 1.4; &:before { content: ''; position: absolute; width: 110%; padding: 50% 0; top: 50%; left: -5%; transform: translateY(-50%) rotate(0deg); transform-origin: center; background-image: linear-gradi..
2022.01.23
-
[css] filter를 이용해 이미지를 white/black 실루엣 이미지로 변경
1. 화이트 실루엣으로 변경하기 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); HTML 삽입 미리보기할 수 없는 소스 2. 블랙 실루엣으로 변경하기 -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); HTML 삽입 미리보기할 수 없는 소스
2022.01.22
-
[css] n번째부터 m번째까지 선택하기 :nth-child(n+n):nth-child(-n+m)
div:nth-child(1), div:nth-child(2), div:nth-child(3) { CSS 삽입 } 위 코드는 유지보수하기 곤란하다. 간단히 작성하자. div:nth-child(n+1):nth-child(-n+3) { CSS 삽입 } 예시: 13부터 33까지 선택 div:nth-child(n+13):nth-child(-n+33) { CSS 삽입 }
2022.01.22
-
W3C가 어려우면 게임으로 이해하면 되지, CSS 게임!
1. FLEX Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. GRID Grid Garden A game for learning CSS grid layout cssgridgarden.com 3. CSS selector CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io
2021.10.29
-
[PC] Gradient Doughnut 2 / Loading
See the Pen Untitled by plancktime_ (@plancktime_) on CodePen. .loading { display: flex; height: 100px; width: 100px; animation: spin 1s infinite linear; position: relative; } .start-point { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background-color: #00dbde; z-index: 1; } .doughnut { width: 50%; height: 100%; box-sizing: b..
2021.09.25
