[css-flex]
Flex Container CSS Flex Items (ie11) flex-direction: row (기본값) order number 0 플렉스 항목의 순서지정 column flex-grow number 1 아이템 비해 얼마나 커질지 row-reverse flex-shrink number 1 아이템 비해 얼마나 작아질지 column-reverse flex-basis px auto 초기 길이를 지정 flex-wrap: nowrap (기본값) % wrap align-self auto align-items : 설정 재정의 align-content: normal (기본값) stretch center center flex-start flex-start flex-end flex-end space-around ba..
css .xxx { max-height : calc(100vh - 50px); max-height : calc(var(--vh, 1vh) * 100 - 50px); } js(jQuery) var vh = window.innerHeight * 0.01 document.documentElement.style.setProperty('--vh', `${vh}px`) window.addEventListener('resize', () => { var vh = window.innerHeight * 0.01 document.documentElement.style.setProperty('--vh', `${vh}px`) }) $(".xxx").css({ "max-height" : "calc(100vh - " + "50px..
# body 스크롤 중앙 도달시 클래스 추가/*** 바디 스크롤 중앙(_wH / 2) 클래스 추가 * 타겟 클래스 : .js-motions* 모션 클래스 : .m_active*/function motionActive() { var _wH = window.innerHeight; //$(window).innerHeight(); $('.js-motions').each(function() { var _t = $(this).offset().top + (_wH / 2); if ($(window).scrollTop() + _wH > _t) { $(this).addClass('m_active'); } else { ..
sass 변환 npx sass --watch css/style.scss css/style.css 내장 함수(Built-in Functions) Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다. 모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다. Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있습니다. []는 선택 가능한 인수(argument)입니다. Zero-based numbering을 사용하지 않습니다. 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color,..
// 이벤트 생성 (event_name)이름의 이벤트 var _eventItme = new Event("event_MyName", {bubbles : true}); // document 이벤트 발생 function event_excution(){ document.dispatchEvent(_endEvent); } // document 이벤트 받기 document.addEventListener("event_MyName", function(event) { console.log("========= >> EVENT Call"); });
fs = require('fs') 기본 세팅 설정 후 1. 파일 유무 체크 let jsonFile = "gulp.config.json"; fs.access(jsonFile, fs.constants.F\_OK, (err) => { if (err){ console.error(jsonFile + ' 파일이 없음.X'); }else{ console.error(jsonFile + ' 파일이 있음.O'); } })2. 비동기식 json 파일 읽기 fs.readFile( './gulp.config.json', 'utf8', (error, jsonFile) => { if (error) return console.log(error); let json..
function print_area($id) { var _body = document.body.innerHTML; window.onbeforeprint = function () { document.body.innerHTML = document.getElementById($id).innerHTML; } window.onafterprint = function () { document.body.innerHTML = _body; } window.print(); } // 호출 print_area(프린트할 영역 ID)
1. google map - map layer
# http://simbyone.com/demo/30-css-hover-effects-for-buttons/# https://tympanus.net/Development/CreativeButtons/# https://codepen.io/rauldronca/pen/mEXomp# http://ianlunn.github.io/Hover/#effects# https://codepen.io/davidicus/pen/emgQKJ# https://www.inserthtml.com/demos/css/button-styles/ # https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330 # 메테리얼 효과 : https://bashoo..
- Total
- Today
- Yesterday