CSS을 활용한 예제 연습
- 다크 모드 구현
- 영상 매체를 활용한 백그라운드 영상 재생
- 반응형 애니메이션 구현 (sliding menu)
- 반응형 UI 제작
- white 모드 (Default)
- dark 모드
const dayNight = document.querySelector(".day");
const menu = document.querySelector(".menu");
const body = document.querySelector("body");
const navigation = document.querySelector(".navigation");
dayNight.onclick = function(){
body.classList.toggle("dark");
dayNight.classList.toggle("active");
};
menu.onclick = function(){
menu.classList.toggle("active");
navigation.classList.toggle("active");
};결과 : CSS내 active 옵션에 따른 출력 결과 조정
- html5 기능 중 하나로 Video 태그를 활용한 백그라운드 영상 반복 재생
- 특정 버튼 클릭시 왼쪽에서 메인 화면으로 슬라이딩 하는 메뉴 화면 구현
- 사용자가 메뉴 등장에 따른 지루함을 느끼지 않도록 이동 화면 구현
- 디바이스에 맞는 해상도에 따른 적절한 화면 크기 조정
- 화면 크기 조정에 따른 지연시간 최적화
- 해당 화면은 540x670 상의 디바이스에서 동작하는 화면
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent