데이터 변경
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..
# NVM(Node Version Manager) - nvm 설치 방법(1) https://github.com/coreybutler/nvm-windows/releases (nvm-setup.zip) Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com - 버젼확인 (현재 버젼에 "*" 표기된다) nvm ls - 특정버젼 설치 nvm install 16.15.1 - 특정 버젼 이동 nvm use 16.15.1 - 특정 버젼 삭제 nvm uninstall 14.13.0
# body 스크롤 중앙 도달시 클래스 추가 # 타겟 위치에 따른 X스크롤 중앙이동 $('.js-utiltab_mb-list a').on('click', function($e) { $e.preventDefault(); var tar = $(this).position().left; var js_tar = $(this).closest(".js-utiltab_mb-list"); var scrollX = tar - ( js_tar.parents(".scroll_system-type").width() / 2 ) + $(this).width() / 2; if ($(this).parents('li').hasClass('active')){ return false; }else{ js_tar.find("li").remov..
- EJS --- 사용 --- - file-include @@include('../_include/_in_panel_title.html', { "txt_tit" : "Title 1 line Title 1 lineTitle 1 lineTitle 1 lineTitle 1 line ", "txt_desc" : "Description 1 line Description 2 line Description" }) --- 사용 --- @@p_title
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"); });
코딩 툴의 이해 및 툴확장 (brackets, atom, VS code) / 각각 1시간 툴의 장단점, 플러그인 사용 Brackets: 서비스 종료 ATOM VS Code, (https://demun.github.io/vscode-tutorial/) 구조적인 코딩 방법, 네이밍 / 1시간 .con-panel .con-header, con-body, con-footer 네이밍규칙 jQuery 활용 및 확장 / 1 시간 선택자, 메서드 sass 문법 및 활용 / 1 시간 중첩 : {}; 변수 : $G-width: 1200px; 임포트 : @import 'base"; | @import url('base.css'); 믹스인 : @mixin funcitonName($param){}; | @include funct..
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..
- Total
- Today
- Yesterday