티스토리

TRstory
검색하기

블로그 홈

TRstory

turfrain.tistory.com/m

개인적인 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • 구글 번역 API - 기본 전역 사용 - 동적 스크립트 로드후 사용 공감수 2 댓글수 1 2024. 11. 29.
  • [js]현재 연도 현재 년도 공감수 0 댓글수 0 2024. 9. 10.
  • [API]IntersectionObserver new IntersectionObserver(callback[, options]);Intersection Observer API 의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트 가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.DOC : https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver 메서드설명.observe(targetElement)루트 내에서의 가시성 변화를 감지할 element입니다. 루트 요소의 자손이어야 합니다. 루트가 현재 문서의 뷰포트일 경우 이 요소도 문서 내에 위치해야 합니다.반환값 : undefined.di.. 공감수 0 댓글수 0 2024. 5. 16.
  • Plugin CDN CDN : https://cdnjs.com/ jQuery : https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.jsgsap :    https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.jsScrollTrigger : https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js 공감수 0 댓글수 0 2024. 5. 14.
  • [javascript] 수식 100/1초 시간을 (시:분:초:100/1초) 변환 // total => 100 / 초 funciton HMSsm(total){ let totalS = Math.floor(total / 100); // totle (초) let timeH = Math.floor(totalS / 3600); // 1시간 3600초 (시) let timeM = Math.floor(totalS % 3600 / 60); // 나머지 를 / 60 몫 (분) let timeS = Math.floor(totalS % 60); // 나머지 (초) let timeMs = (total % 100); // 100/1 초 timeH = String(timeH).padStart(2,"0"); timeM = String(timeM).padStar.. 공감수 0 댓글수 0 2024. 4. 4.
  • [CSS] 선언방법 CSS 선언 인라인(inline) 방식 html 에서 적용 ... 내장(internal) 방식 html 에서 style 태그로 적용 링크(external) 방식 html 에서 적용 @import(inport) 방식 css 에서 적용 @import url("./css/style.css"); 공감수 0 댓글수 0 2024. 2. 6.
  • [API]scrollIntoView 인터페이스 Element의 메서드는 호출된 요소가 사용자에게 표시 scrollIntoView()되도록 요소의 상위 컨테이너를 스크롤합니다. element.scrollIntoView(true) doc : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView- element : 스크롤 타겟- element.scrollIntoView(true) : 스크롤 타겟의 포커스 이동에 따라 부모 스크롤 이동. (상단 기준)- element.scrollIntoView(false) : 스크롤 타겟의 포커스 이동에 따라 부모 스크롤 이동. (하단단 기준) 공감수 0 댓글수 0 2023. 10. 31.
  • Node.js Module System CommonJS(CJS) vs ECMAScript Modules(ESM) node js 의 모듈 시스템 - es5 의 모듈 시스템 (CJS) 확장자를 "*.cjs"로 사용하면 (CJS)로인식 - es6 의 모듈 시스템(ESM) 확장자를 "*.mjs"로 사용하면 (ESM)로 인식 or - package.json 에서 {type:"commonjs"} 선언시 (CJS)로 인식 - package.json 에서 {type:"module"} 선언시 (ESM)로 인식 or - 기본적으로 "*.js" 파일을 사용하지만 위처럼 강제할 수 있음. CommonJS - cjs 모듈 확장자(.cjs) - moduleES5CommonJS.cjs const sum = ($a, $b) => { return ($a+$b); } con.. 공감수 0 댓글수 0 2023. 3. 28.
  • vue3_cli_start vue3 CLI 초기 세팅 node.js (v14.13.0), npm (v8.11.0) vue CLI 기본 설치 초기 세팅 (설치 i, 삭제 r) npm 설치 (1,2 버젼 'vue-cli'), (3 버젼 '@vue/cli') ~~npm i -g vue-cli~~ npm i -g @vue/cli 업데이트 npm update -g @vue/cli yarn 설치 npm install -g yarn yarn add @vue/cli 업데이트 yarn global upgrade --latest @vue/cli vue, vue cli 설치 npm install -g @vue/cli 실행 개발 : npm run dev 배포 : npm run build 프로젝트 생성 vue create [.. 공감수 0 댓글수 0 2023. 3. 27.
  • PAGINATION # 넘버링 - 결과 HTML 삽입 미리보기할 수 없는 소스 - 소스 공감수 0 댓글수 0 2023. 2. 28.
  • 퍼블리싱_초급 doc HTML 1. 시맨틱마크업 html5 테그 머리말 (섹션해더) 본문 (독립섹션) 문서에서 독립적인 하나의 콘텐트를 구분하는데 사용한다. 뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수있는 독립된 영역을 지정한다. (보조섹션) 문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다. 광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다 글 영역 사전적 의미 그대로 웹 문서의 한 부분, 한장을 구분하는데 사용한다 문서 내영역의 범위를 한정하며 문서의 아웃라인을 구성한다. 네비게이션(탬색 링크의 섹션 정의) 메뉴(도구모음 및 목록 양식 컨트롤, 명령) 문서의 제목을 그룹화 하는데 사용한다. 예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 요소와 요소로 제목, 부제목을 정의하며 이들 제.. 공감수 0 댓글수 0 2023. 2. 16.
  • [FileZilla] backup 경로 : C:\Users\유저이름\AppData\Roaming\FileZilla FTP 파일 : sitemanager.xml 공감수 0 댓글수 0 2022. 11. 4.
  • [EditPluse] backup 경로 : C:\Users\유저이름\AppData\Roaming\EditPlus 환경설정파일 : editplus_u.ini FTP 파일 : ftp2_u.ini 공감수 0 댓글수 0 2022. 11. 4.
  • [popup] # sweetalert2 Website: https://sweetalert2.github.io/ 공감수 0 댓글수 0 2022. 9. 14.
  • [select2] 플러그인 데이터 변경 공감수 0 댓글수 0 2022. 8. 11.
  • [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.. 공감수 0 댓글수 0 2022. 8. 11.
  • [Mobile height] 체크 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.. 공감수 0 댓글수 0 2022. 7. 27.
  • [NODE.JS] nvm (버젼관리) # NVM(Node Version Manager)- nvm 설치 방법(1)https://github.com/coreybutler/nvm-windows/releases  (nvm-setup.zip) All version: Index of /download/release/ (nodejs.org)  Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com - 버젼확인 (현재 버젼에 "*" 표기된다)nvm ls- 특정버젼 설치nvm install 16.15.1- 특정 버젼 이동nvm use 16.15.1- 특정.. 공감수 0 댓글수 0 2022. 7. 20.
  • [window scroll target positon] # 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 { .. 공감수 0 댓글수 0 2022. 4. 21.
  • html 템플릿 엔진 (ejs, gulp-file-include) - 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 공감수 0 댓글수 0 2022. 3. 24.
  • [scss]sass 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,.. 공감수 0 댓글수 0 2021. 12. 10.
  • JS [EVENT] 생성 // 이벤트 생성 (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"); }); 공감수 0 댓글수 0 2021. 11. 1.
  • 퍼블리싱 스텝 코딩 툴의 이해 및 툴확장 (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.. 공감수 0 댓글수 0 2021. 2. 26.
  • [NODE.JS] fs 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.. 공감수 0 댓글수 0 2021. 1. 28.
  • iPhone 화면 크기 아이폰 기종 pixels render at x points 아이폰 12 Pro Max 1284 X 2778 3x 428 X 926 아이폰 12 pro, 아이폰12 1170 X 2532 3x 390 X 844 아이폰 12 mini 1080 X 2340 3x 360 X 780 아이폰 XS Max, 아이폰 11pro max 1242 X 2688 3x 414 X 896 아이폰X, 아이폰 XS, 아이폰11 pro 1125 X 2436 3x 375 X 812 아이폰XR, 아이폰11 828 X 1792 2x 414 X 896 아이폰 6플러스, 6S+, 7+, 8+ 1080 X 1920 3x 360 X 640 아이폰 6, 6S, 7, 8, SE2 750 X 1334 2x 375 X 667 아이폰 SE (1세대) 640.. 공감수 0 댓글수 0 2021. 1. 18.
  • [WEBPACK] tip path & __dirname webpack.config.js path사용 const path = require("path"); module.exports = { mode: "development", entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve("./dist"), }, } __dirname사용 module.exports = { mode: "development", entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: __dirname + '/dist', }, } 공감수 0 댓글수 0 2020. 10. 22.
  • [window.print()] 원하는 영역 인프린트 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) 공감수 0 댓글수 0 2020. 4. 3.
  • map API 1. google map - map layer 공감수 0 댓글수 0 2020. 4. 2.
  • [bve-del] @bve/del-cli npmjs url : bve-del Initial Setup nodejs 설치후 ( https://nodejs.org/en/ ) @bve/del-cli 전역 설치 npm install -g @bve/del-cli 사용법 구성파일 생성 후실행 bve-del init bve-del run 직접 실행 (현 디렉토리에서 하위 node_modules 삭제) bve-del run node_modules ./ 공감수 0 댓글수 0 2019. 9. 26.
  • Adobe Xd UI KIT 공감수 0 댓글수 0 2019. 7. 18.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.