프론트 개발 블로그

mousewheel 이벤트를 통해 페이지 스크롤 시에 스무스하게 스크롤링 되는 것을 표현하고자 했다. TweenMax와 ScrollTopPlugin으로 y 값을 조정하는 것이었는데 이 코드가 계속 실행이 안되는 것이었다. 알고보니 css 속성 중에 html {scroll-behavior: smooth;} 를 넣은 것 때문에 자바스크립트가 제대로 동작하지 않았던 것이었다. scroll-behavior: smooth; scroll-behavior 속성은 사용자가 스크롤 가능한 상자 내의 링크를 클릭할 때(Ex. 상단으로 가기 버튼 등) 직선 점프 대신 스크롤 위치에 부드럽게 애니메이션을 적용할 지 여부를 지정하는 속성이다. 기본 값은 auto; 아마도 window.scrollTop을 사용하면서 내부에 있는 ..

크롬, 사파리 브라우저 등에서 input 에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다. 해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다. input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #000 inset; } * input의 배경색처럼 보이지만 box-shadow로 변경해야 한다. 추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -text-fill-color 프로퍼티로 변경 가능하다. -webkit-text-fill-color

window.addEventListener('scroll', function() { ... }); 1. 갑자기 잘 작동하던 스크롤 이벤트 핸들러가 작동되지 않아서 당황함. 2. html 요소에 overflow-y: hidden; 을 준 것 때문이었음. 3. html 요소에서 해당 스타일을 삭제하니 해결됨. 이런 경우에 DevTools에 에러 혹은 경고 멘트도 나오지 않는다. 스크롤을 숨겼으니 이벤트가 동작되지 않는 것인데, 내가 html 요소에 class로 overflow: hidden 스타일을 준 것을 잊고 있어서 다른 코드에 문제 있는 줄 알고 코드 확인 하느라 시간을 할애했다. 😮‍💨 이외에도 스크롤은 화면보다 컨텐츠 요소가 클 경우 발생되기 때문에 높이 자체를 100%나 100vh 로 지정할 경우..

서적 [모던 자바스크립트 Deep Dive / 이웅모 지음] 정리 1. 즉시 실행 함수 2. 재귀 함수 3. 중첩 함수 4. 콜백 함수 5. 고차 함수 6. 순수 함수 / 비 순수 함수 1. 즉시 실행 함수 함수 정의와 동시에 즉시 호출되는 함수(IIFE, Immediately Invoked Function Expression) - 즉시 실행 함수는 단 한번만 호출되며 다시 호출할 수 없다. - 즉시 실행 함수는 ( ) 그룹 연산자로 감싸야 된다. → 그렇지 않으면 에러 발생 (function () { // 즉시 실행 함수 IIFE }()); - 그룹 연산자로 ( ) 로 묶은 이유는 먼저 함수 리터럴을 평가해서 함수 객체를 생성하기 위함. 즉, 함수 리터럴을 평가해서 함수 객체를 생성 후 함수를 실행 하..

typeof typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다. console.log(typeof 42); // output: 'number' console.log(typeof 'text'); // output: 'string' console.log(typeof true); // output: 'boolean console.log(typeof undeclaredVariable); // output: 'undefined' console.log(typeof {a:1}); // output: 'object' console.log(typeof [1,2,3]); // output: 'obejct' console.log(typeof function() {}); // output: 'fun..

[번역] Apple 제품 페이지 스크롤 애니메이션 https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/ 기본 개념 빠르게 연속되는 이미지 시퀀스와 같은 애니메이션을 만드는 것. (플립북같은) 복잡한 WebGL 이나 고급 Javascript 라이브러리가 필요하지 않습니다. 각 프레임을 사용자의 스크롤 위치와 동기화하여 사용자가 페이지를 아래로(또는 위로) 스크롤 할 때 애니메이션을 재생할 수 있습니다. https://res.cloudinary.com/css-tricks/video/upload/v1588889054/flipbook_tisnxf.mp4 마크업과 스타일로 시작하기 HT..

GA(구글 애널리틱스 / Google Analytics) 구글에서 제공하는 무료 웹 트래킹 툴 구글의 통계 및 머신러닝 기술로 웹/모바일 방문자들의 행동 데이터를 분석하고 마케팅 실적 또는 웹/모바일 사이트의 경험을 개선해줄 수 있도록 도와주는 도구. (무료 이기 때문에 가장 많이 사용 중) 행동 데이터란? 어떤 사용자가 방문하는 지, 어떤 경로를 통해 방문 하는 지, 사이트에서 어떤 행동을 취하는 지에 대한 분석한 데이터 왜 트래킹 툴을 사용하는 가? - 사이트 유입 수 - 친화적인 사이트 UI, UX - 사용자 인사이트(연령, 성별, 위치, 관심사 대한 정보 등 수집) - 어떤 사이트에서 유입하는 지 - 사이트 방문자들이 어떤 컨텐츠를 좋아하는 지 - 사용되는 기기 및 운영체제, 브라우저 정보, 언어..

https://typescript-kr.github.io/pages/tutorials/ts-for-oopers.html 내가 이해하기 위해 정리한 TS for OOP Programmers(en) TypeScript는 C#, Java와 같이 정적 타이핑을 사용하는 언어에 익숙한 프로그래머들에게 인기 있는 선택입니다. 👉🏻 정적 타이핑이란? 타입(Type)을 체크해주는 것을 나누어 설명한 것. 정적 타이핑(Static Typing) : 컴파일 시간에 체크 예) C#, Java 동적 타이핑(Dynamic Typing) : 런타임 시간에 체크 예) JavaScript, Python 해당 페이지는 기존에 C#, Java를 사용하는 프로그래머들을 위해 기존의 OOP 언어와 TypeScript를 다른점을 설명합니다...

Gulp 셋팅 다시 함. 이전 버전은 https://maybe-b50.tistory.com/26 파일 구조 dist node_modules src html index.html html_eng img sprite del.jpeg inc bottom.html footer.html header.html js ui.js lib scss component _base.scss _mixin.scss _var.scss vendor _sprite.scss style.scss .gitignore babel.config.js gulpfile.bable.js package-lock.json package.json README.md gulpfile.bable.js // gulpfile.bable.js const { series..

요소 밖으로 넘치지 않게 줄 바꿈을 할 때 사용하는 word-wrap MDN 문서로 확인해보니 overflow-wrap 으로 사용하고, word-wrap 은 동의어가 되었다고 한다. https://developer.mozilla.org/ko/docs/Web/CSS/overflow-wrap overflow-wrap - CSS: Cascading Style Sheets | MDN overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다. developer.mozilla.org 일단 적어두고 테스트 하자