Frontend Developer를 향해 !

해당 디바이스의 뷰포트(device-width, height)를 수학공식?처럼 이론적으로 쉽게 구하는 방법입니다. 최근에 프로젝트를 하면서 보안때문에 인터넷이 막힌 상황에서 태블릿 device-width, height 값을 모른채로 일단 작업을 하긴 했었는데 퍼블리싱 작업을 하고 나서 태블릿에서 확인해보니 생각보다 많이 디자인과 멀어져? 있는 화면이 출력되어서 좀 당황 했었습니다. width값은 크게 상관은 없었지만 특정기기(하이브리드 앱이었습니다.)를 놓고 맞춰야 하는 상황이어서 device-height값을 꼭 알아야 하는 상황이었습니다. 그리고 디자인 자체가 스크롤이 생기면 안되는 화면이 많아서 더더욱 필수로 height값을 알아야 했구요. 제일 확실한 방법은 자바스크립트로 window.documen..

설명이 잘 되어있는 블로그 공유 합니다. https://its-easy.tistory.com/12

스크롤 매직 : https://github.com/janpaepke/ScrollMagic https://nykim.work/30 http://scrollmagic.io/examples/ Examples - ScrollMagic ScrollMagic Examples Let's start showing off some magic... Please note: Most of the examples are not optimized for mobile devices, so the sourcecode can be as simple as possible. The obvious exceptions are the examples on mobile support. scrollmagic.io [ScrollMagic] 스크롤매..

스크롤링시 백그라운드 이미지의 속도를 조절하여 패럴럭스 느낌을 나게 해주는 스크립트 소스입니다. 응용하여 일반 태그에도 사용 가능합니다. 코드펜 URL : https://codepen.io/roborich/pen/wpAsm Scrolling Background-Image Paralax ... codepen.io Normal 1/2 Speed Parallax 1/4 Speed Parallax Fixed Position * { margin: 0; padding: 0; } div { height: 3000px; width: 20%; margin: 2.5%; float: left; background: white; background-image: linear-gradient(#ECF0F1 50%, #bdc3c7..

마크다운 문법 (Mark Down) 제목 this is a H1 this is a H2 this is a H3 this is a H4 this is a H5 this is a H6 인용구 this is a first blockqute. this is a second blockqute. this is a third blockqute. 순서있는 리스트 첫번째 두번쨰 세번째 순서없는 리스트 빨강 빨강2 빨강3 녹생 파랑 Code 블럭 (1) this is a normal paragraph: this is a code block. end code block. Code 블럭 (2) HTML 내용 css .center {text-align:center;} js const a = 1; const apple = '사과..

ES6 문법으로 다시 시작하는 자바스크립트 ES6 문법으로 다시 시작하는 자바스크립트 - Hudi - 유사 프로그래머 ES6 (=ECMAScript 2015) 가 발표된지도 어언 3년이 다 되어가고 있다. 하지만, 이미 구세대의 기술이 되어버린 Jquery 와 ES5는 아직 많이 사용되고 있다. 현재 자바스크립트 생태계는 Angular, React, Vue 등의 hudi.kr 정리가 잘된 사이트를 소개합니다. 위 링크에서 확인 부탁드립니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* style 작성 */ } 해당 구문을 작성해서 해결 가능합니다. IE10+ 부터 적용 됩니다.

// jQuery $('.selector'); $('#selector'); $('div.selector').find('.btn'); // javascript document.getElementsByClassName('selector'); document.getElementById('selector'); document.querySelector('.selector').querySelector('li'); // jQuery $('[data-foo-bar="someval"]'); // javascript document.querySelectorAll('[data-foo-bar="someval"]'); // jQuery $('#myForm:invalid'); // javascript document.queryS..

VsCode에 익스텐션에 아래 3개가 설치되어있어야 합니다. 1. https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented 2. https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass 3. https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint (선택) Live Sass Compiler - Visual Studio Marketplace OverviewQ & ARating & Review Live Sass Compiler [If you like the extension, please leave..