유튜브&강의를 보고 작업한 내용들을 저장하는 레포지토리입니다.
-
HTML & CSS
완전 똑같이 따라하는 것이 아니라, BEM 방법론을 적용하거나 CSS를 좀 더 효율적으로 수정하거나, 시맨틱 마크업을 적용해 만들고 있습니다.
목표는
HTML&CSS와 친해지는 것입니다 😉 -
어쩌다보니
JS도 추가 ✋
- ✨ 스타벅스 랜딩페이지 - 포지션과 정렬
- ✨ 비디오 백그라운드 - 비디오를 배경으로 사용하기
- ✨ 반응형 웹페이지1 - 반응형 웹페이지 전체를 만들어보기
- ✨ 파도 CSS 애니메이션 - 간단한 애니메이션과 clip-path CSS
- ✨ 캘린더 - 외부 라이브러리를 사용하지 않고 캘린더 만들어보기
- ✨ text 코너 패럴렉스 - 자바스크립트를 사용한 마우스 좌표값 얻기
- ✨ 그리드 갤러리 - Grid CSS 사용하기 & 이벤트 위임
- ✨ CSS 애니메이션 - HTML과 CSS만을 사용한 애니메이션 만들기
- ✨ 드롭다운 - HTML&CSS로 드롭다운, JS로 리액트를 흉내내서 드롭다운 만들어보기
- ✨ 반응형 랜딩페이지 - flex와 미디어 쿼리를 사용해 랜딩페이지 만들기
- ✨ 캔버스 사용해보기 - 캔버스
- ✨ Glassmorphism 마우스 모션 카드 - perspective와 backdrop-filter, getBoundingClientRect로 요소 크기/위치 정보 가져와 사용해 움직이는 카드 만들기
- ✨ Isometric 효과 CSS로 만들기 - css로 입체적인 애니메이션 효과 만들기, CSS 가상 클래스와 가상 요소의 차이
- ✨ 체크박스 - 입체적인 체크박스 만들어보기
- ✨ Glitch 효과 - css로 간단하게 Glitch 효과 만들기
- ✨ Glow 효과 - 3d를 사용해 빛나는 등 만들기
[모던_자바스크립트_입문] (https://github.com/gilbutITbook/006960)