하위 태스크 1
Transform 학습
translate,rotate,scale,skew등 Transform 함수 사용법 학습
변형은 특정 요소의 크기·형태 등 스타일이 바뀌는 것이다. 요소를 변형하려면 transform 속성에 변형 함수를 전달해야 한다. 일부 변형 함수의 목록은 다음과 같다.
translate: 전달받은 이동 방향과 거리에 따라 요소를 이동시킨다.rotate: 전달받은 각도만큼 요소를 시계 방향 또는 반시계 방향으로 회전시칸다.scale: 전달받은 크기만큼 요소를 확대 또는 축소한다.skew: 전달받은 각도만큼 요소를 비틀어 왜곡한다.
하위 태스크 2
Transition 적용
transition-property,transition-duration등을 사용한 전환 효과 구현
transition-property속성: 트랜지션을 적용할 속성을 선택한다.transition-duration속성: 트랜지션 진행 시간을 설정한다.
하위 태스크 3
Animation 구현
@keyframes와animation속성을 사용한 애니메이션 효과 구현
@keyframes속성: 애니메이션의 상태가 바뀌는 지점을 설정한다.animation속성:animation-name·animation-duration·animation-timing-function·animation-delay·animation-iteration-count·animation-direction속성을 하나의 속성으로 줄인 단축 속성이다.
하위 태스크 4
Transform과 Animation 결합
Transform과 Animation을 결합한 고급 인터랙티브 효과 구현
하위 태스크 5
가변 그리드 구현
width: 100%,max-width등을 사용한 가변 레이아웃 구현
하위 태스크 6
반응형 이미지 적용
max-width: 100%,height: auto등을 사용한 반응형 이미지 구현
하위 태스크 7
가변 폰트 적용
vw,vh,rem등 가변 단위를 사용한 반응형 타이포그래피 구현
하위 태스크 8
미디어 쿼리 작성
@media규칙을 사용하여 다양한 화면 크기에 대응하는 스타일 작성
하위 태스크 9
브레이크포인트 설정
모바일, 태블릿, 데스크톱 등 디바이스별 브레이크포인트 설정
하위 태스크 10
Flexbox 기본 사용
display: flex,flex-direction등을 사용한 Flexbox 레이아웃 구현
하위 태스크 11
Flexbox 정렬
justify-content,align-items등을 사용한 Flexbox 정렬 구현
하위 태스크 12
Flexbox 고급 속성
flex,order,align-self등 Flexbox 고급 속성 활용
하위 태스크 13
반응형 웹 페이지 제작
미디어 쿼리와 Flexbox를 결합한 완전한 반응형 웹 페이지 제작