코딩튜토리얼
웹폰트/아이콘
구글 폰트
구글 Material Design Icon
Font Awsome v4.7
애니메이션효과주기
transfrom알기 (이동, 회전, 확대..)
animate(반복된 움직임)
transition(마우스를 올렸을때(반복), class가 추가되었을때 1회성 실행)
가속도 제어하기 (transition-timing-function 의 값으로 주기)
레이아웃 구성
(block요소, inline요소)
block요소와 line요소 구분하기/특징 이해하기
float와 inline-block의 특징을 구분하기, float 문제 해결하기
float와 inline-block을 이용하여 코딩시 주의사항
넓이에 영향을 미치는 요소들 (border, padding)
다양한 레이아웃 코딩방식
(초간단 버전) 요소를 가운데 정렬하기
요소를 가운데 정렬하기
레이아웃 코딩 시 주의사항 (필독★★)
★CSS3 레이아웃 Flexbox★
★Flexbox 익히기 게임★
가상요소 활용하기
:first-child, :last-child, :nth-child selector 활용하기
::before, ::after selector 활용하기
★selector 익히기 게임★
배너 만들기 1
(한번에 하나씩 보기)
슬라이드 배너1 (좌우로 이동, 한번에 1개만 보이는 형태)
슬라이드 배너2 (좌우로 이동, 가운데 1개 좌우로 이전/다음 배너가 보이는 형태)
fade-in/out 배너 (자연스럽게 다음 배너으로 opacity가 변하면서 넘어가는 형태)
배너 만들기 2
(한번에 여러개 보기)
일반배너 (데스크탑 버전만 가능, 한번에 보이는 갯수 조절 불가, 모든 배너를 다 보면 다음버튼이 안눌림)
반응형배너 (desktop pc/mobile 갯수 7조절가능, auto play, 모바일 터치슬라이드 가능)
스크롤 제어하기
TOP버튼을 누르면 상단, 버튼 누르면 원하는 위치로 이동
스크롤을 빠르게 하기
선그리기
메뉴에 마우스를 오버하면 하단에 메뉴까지 선그리기
모바일에서만 슬라이드 배너
pc에서는 모두 보이고 모바일에서만 슬라이드 배너
화면에 꽉차는 페이지
(window의 높이와 동일한 높이의 컨텐츠)
하나의 section이 한 화면에 가득차는 구성
패럴랙스(차원, 시차를 이용한 효과) & 자동 스크롤 (데스크탑버전 전용)
패럴랙스(차원, 시차를 이용한 효과) & 자동 스크롤 (모바일도 적용)
동영상을 화면에 가득차게
패럴랙스(차원, 시차를 이용한 효과) & 겹치기 스크롤