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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

 

 

미디어 쿼리 실습~~~

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

 

 

 

오늘의 감상

미디어 쿼리는 워드프레스에서 조금 사용해봐서,

비교적 편안히 봤다

 

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

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

 

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

배울 것 투성이다~

성장거리 투성이

 

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

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

 

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

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

 

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

 

러너, 달리기 배우기 준비

 

 

runner by Malik Skydsgaard #unsplash