3 :: 움직이고 반응하는 신기한 세계

3 :: 움직이고 반응하는 신기한 세계

엘리스 SW 엔지니어 트랙에서 배운것

오규석 코치님

CSS는 많이 해보는 수밖에 없다.

움직이고 반응하는 웹사이트

Transition

움직이는 과정을 보여주는 신기한 녀석

누구를 변화 시킬래? => transition-property

얼마 동안? => transition-duration

어떻게 움직일래? => transition-timing-function

딜레이 줄까? => transtion-delay

.transition { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }

*transition-property: all(기본값)

Transitions w3school 링크 => https://www.w3schools.com/css/css3_transitions.asp

Animation

Transition과 달리 이름 지정 가능하다

이름이 뭐니? => animation-name

얼마나? => animation-duration

어떻게? => animation-timing-function

딜레이 줄까? => animation-delay

몇 번 반복할까? => animation-iteration-count

방향을 어디로 진행할까? => animation-direction

@keyframes에 쓰는 이름은 animation-name가 같아야 한다.

.animation { animation-name: changeWidth; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; /* animation: changeWidth 3s linear 1s 6 alternate; */ } @keyframes changeWidth { from { width: 300px; } to { width: 100px; } }

Transform & Animation

transform과 animation을 합친 예시

.box1 { width: 300px; height: 300px; background-color: red; animation-name: rotation; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

반응형을 위한 미디어쿼리

미디어쿼리

반응형을 하려고 사용한다.

사용예시

320px < 브라우저 사이즈 < 800px

@media (min-width: 320px) and (max-width: 800px) { .box { width: 300px; height: 300px; background-color: yellow; border: 10px solid blue; } }

viewport

반응형 작업을 한다면 다음 코드를 반드시 써주자

모바일 마다 각자의 viewport를 가지고 있어서,

표현하고자 하는 크기가 제각각일 수도 있다.

크기를 통일하기위해 사용하는 코드

미디어 쿼리 실습~~~

엘리스 플랫폼내에서 미디어 쿼리 실습을 했다.

오늘의 감상

미디어 쿼리는 워드프레스를 사용하면서

해야 해서 조금 편안히 봤네

하지만 Transition, Animation 부분은 평소에 신경을 안썼다.

해보니 이건 또 새로운 세상이다.

신기한 것 투성이 새로운 것 투성이

배울 것 투성이다~

성장거리 투성이

이따가는 파이썬 반을 나누기 위한 테스트를 본다

파이썬은 문외한이라 기초반으로 가겠지

또 배울 것 투성이다 잘됐다 파이썬

자바스크립트 다음에 배울려고 했으니

이제 3일차 아직 에너지 충분

러너, 달리기 배우기 준비

runner by Malik Skydsgaard #unsplash

from http://forgottenknowledge.tistory.com/167 by ccl(A) rewrite - 2021-10-28 18:25:05