근래에 이직을 위해 면접을 보는 과정에서 많은 회사들이웹 표준과 웹 접근성에 대해서 면접질문이 많아서 확실하게 공부도 할 겸 기록하기 위해 작성하려 한다. 웹 표준은 어떤 환경에서도 이용할 수 있는 웹페이지를,웹 접근성은 어떤 사람이든 이용할 수 있는 웹페이지를 만들

라고 한다면 prompt창에 How old are you?라고 뜰것이다.이 값에 15라는 값을 넣으면 이 것은 문자가 아닌 숫자로 처리된다.혹 숫자도 아닌 "lalalalalala"를 적는다면 콘솔창에 NaN(Not a number)가 출력된다. isNaN은 boole

SCSS ➡ CSS 컴파일 퍼블리셔들이 많이 사용하는 vs code에서 SCSS로 쉽게 작업하고 컴파일하고 html에 적용하는 방법을 정리해두려고 합니다. 참고로 SCSS는 웹이 직접 적용할수 없기 때문에 반드시 CSS로 컴파일한 후에(바꿔준 후) html에 적용해야

첫 코딩테스트를 진행하게 되었다.제시되는 모바일 사이트를 HTML / CSS / JS (바닐라)를 사용하여 2시간이라는 시간 내에 완성시켜야 했었다. ( 바닐라 자바스크립트는 더 공부해야겠다 ㅜ)결과는 참담했고, 자신있던 마크업과 CSS에서도내 스스로에게 한심하다 느꼈

CSS 구조를 가독성 있게 만들어주고 유지 보수가 편리하도록 만들어 주는 도구이며종류로는 SASS (SCSS), LESS, Stylus등이 있습니다. 저는 여기서 주로 많이 사용하는 SASS (SCSS)를 정리해보고자 합니다. 기존 CSS를 사용하다 보면 단순 반복되는

디자인 작품 포트폴리오 🔎 작업내용 사이트명: Rising Tech 작업 기간: 3일 유형: 디자인 작업, 웹, swiper, Gsap, 특징: 현재 근무중인 회사의 디자인 작품의 포트폴리오 사이트, gsap 스크롤트리거와 드래그를 사용 ✅ Gsap 드래그 gs

위와같이 애플에서 주로 보게 되는 이미지 시퀀스,스크롤시 끊김이 없이 자연스럽게 이미지가 교체가 되어시각적으로 편안한 이미지 시퀀스를 구현해준다.canvas를 쓰지 않고 이미지를 교체하면 깜빡이며 끊김 현상이 나타남,canvas를 사용한다면 모닥불같은 효과나 3d효과도

웹사이트 스크롤을 할 때 마우스 휠에 따라 살짝 살짝 끊기는 형태를 많이 보았을 것이다.이런 부분이 없이 스무스~하게 스크롤이 되도록 하는 라이브러리를 찾아 기록해두려 한다.위의 이미지와 같이 일반적인 스크롤 할 때의 모습은 이러하다.lenis 라이브러리를 사용한다면

youtube API 유투브의 api를 받아와 json을 활용해보자! API 파헤치기 >https://www.googleapis.com/youtube/v3/search?part=snippet&q=먹방&maxResults=3&key=AIzaSyCv 나의 api 코드 주

똑같은 마크업과 스타일의 반복이 아닌 데이터 비동기 처리 방식으로json 파일과 자바스크립트 fetch 함수를 활용한 공부를 해보았다.자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.일반적으로 서버에서 클라이언트

사이트명: tvN작업 기간: 3일유형: 모바일, json, swiper, 클론 코딩특징: json을 이용하여 데이터를 활용한 모바일 사이트

사이트명: MONCOLONY작업 기간: 2.5일유형: 반응형, GSAP, swiper, 클론 코딩특징: gsap을 이용한 스크롤트리거 활용, 웹/모바일 반응형 사이트, 세계시간 표시

프로젝트 작업중 이미지들이 위의 핀터레스트 이미지들 처럼 배열을 하고 싶어져 css로 고군부트를 했는데...masonry라는 간단한 라이브러리를 알게되어 정리를 하려고 한다.아래의 링크로 들어가 js를 복붙하여 사용한다.🔗 masonry.js 링크width의 고정법

사이트명: Few작업 기간: 5일유형: 웹, GSAP, 클론 코딩특징: 마우스 포인터 커스텀, 무한 슬라이드 효과, 마우스 좌표 인식한 애니메이션 효과, GSAP 라이브러리를 사용한 애니메이션 효과마우스 포인터를 따라다니는 원형 포인터를 생성하고,마우스 포인터에 필터

어떤 애니메이션 효과를 만들지 만큼 중요한 것이언제 효과를 보여줄 것인가이다.내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다.공식 사이트 혹은 CDN 혹은 npm 등 편한 방법

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다.하지만!! 사용자

웹 페이지 특정 요소에서 스크롤이 작동은 하지만 스크롤은 보이지 않게 하는 방법에 대해 정리해 보겠습니다.test라는 id를 부여받은 div 요소가 있다고 가정하겠습니다.너비를 200px로 고정시켰고, 배경색은 하늘색을 넣어줬습니다. 이 div 요소의 높이를 한정시킨

for와 forEach의 사용법이 확실한 구분을 짓기위하여간단하게 정리하여 구분짓기 쉽도록 하기 위함의 정리글!!빠르고 단순하며, 효율적이다.건너뛰기, 종료 가 가능하다 ( continue, breake 사용이 가능 ) 반복문의 범위를 지정할수 있다 ( i ++ 또는

dasharray, dashoffset의 속성, 선 길이를 구하는 간단한 함수를 이용해기초적인 애니메이션 효과를 학습할 수 있다!!codepenyeaseula/embed/rNZByEQ?default-tab=html%2Cresultstroke-dasharray : 점의