[til] 220316 -css transformations, animations, media queries

⌨️ 오늘 한 일 ⌨️

☑️ 코코아톡 챌린지 3일차 과제

☑️ CSS - Transformations, Animations, Media Queries 강의

☑️ 코코아톡 클론코딩 ~splash screen animation

이코테 구현 강의+예제

OSSP 리눅스 깃 사용법 복습

 

 

CSS - Transformations, Animations, Media Queries :

✔️ semantic tag: 의미론적 태그 -> 목적/의미를 담고 있는 태그..

예를 들어, <section>, <h1> 등.

반대로 non semantic tag는 div 등 태그의 목적/의미보다는 시각적으로 어떻게 보여지는지를 나타내는 태그. 

 

✔️ transform

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform: rotateY(*deg) rotateX(*deg) rotateZ(*deg);

=> *도만큼 Y,X,Z 축으로 회전 가능. 

transform: scaleX(4) => X방향으로 4배됨. 

transform: scale(2,2) =>X,Y 방향으로 2배됨.

transform: traslateX(-1000px); => X방향으로 -1000px 움직임. (왼쪽 1000px)

단, translateX, translateY는 다른 요소 (sibling) 의 box를 변형시키지 않고 원하는 요소를 이동시킴.

예를 들어 만약 옆에 다른 span이 있을 때 translateX(100px)로 오른쪽으로 이동해도 옆의 span이 함께 이동하지 않고 그 span을 덮어써버림. span에는 영향을 미치지 않음.

왜? transformation은 페이지의 픽셀의 다른 부분에서 일어나기 때문. box의 차원에서 일어나지 않는다.

 

 

✔️ transform 과 transition 결합

img {
   transition: transform 2s ease-in-out;
}
img:hover {
   transform: rotateZ(90deg);
}

반드시 transition 속성이 img{}에 들어가야 마우스를 떼어도 transition은 계속 적용됨.

img:hover{}에 들어가면 마우스 뗄 때 그냥 transition 없이 바로 원상복귀 됨.

 

✔️transform 과 animation 결합

=> 사용자가 동작을 하지 않아도 작동. 페이지가 로드되자마자 작동.

@keyframes superSexyCoinFlip {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg) translateY(-100px);
    }
}

img {
    margin: 100px;
    height: 500px;
    width:500px;
    border: 5px solid black;
    border-radius: 50%;
    animation: superSexyCoinFlip 5s ease-in-out;
}

@keyframes namename { from {transform: value} to {transform: value} }

animation 속성에 infinite 밸류 값 넣어주면 5초에 한 번 씩 계 ~ 속 애니메이션 작동함. 

@keyframes superSexyCoinFlip {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(180deg) translateY(-100px);
    }
    100% {
        transform: rotateY(0);
    }
}

img {
    margin: 100px;
    height: 500px;
    width:500px;
    border: 5px solid black;
    border-radius: 50%;
    animation: superSexyCoinFlip 5s ease-in-out infinite;
}

from{}to{} 로 안하고 진행률에 따라서 설정해줄 수 있음. > translateY로 위로 갔던 게 from{}to{} 로 한 첫 번째 방법에서는 다시 돌면서 안 돌아오고 그냥 한 번에 (transform 작동 없이) 원상복귀만 되는데, 진행률에 따라 두 번째 방법으로 하면 다시 돌면서 (transform: rotateY 작동하면서) 돌아옴. 

📍 animation 과는 꼭 transform 속성 뿐만 아니라 다른 속성 모두 적용시킬 수 있음. 예를 들어 keyframe 에 color, opacity... 

📍 animation-delay: 2s;   >> plays animation after 2 sec

📍(아래 코드) visibility: hidden; 속성   >> opacity:0으로 우리 눈에는 안 보여도 브라우저는 계속 보이기 때문에 그 아래 있는 것을 클릭하거나 할 수 없음 (가리고 있기 때문). 따라서 visibility: hidden; 으로 브라우저가 그 element를 무시하도록 할 수 있음.

@keyframes hideSplashScreen {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden; /* browser ignores the elem */
    }
}

📍❓ 아래가 잘 이해가 안 된다....

@keyframes appearBtnAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.nav__btn {
    /* transform 을 anim 이 아니라 기본 속성으로 둔 이유:
    2,3,4번째 child 버튼들은 animation-delay를 가지고 있기 때문에 처음 n초 동안은 
    transform이 적용 안 되고 default대로만 있을거라서. */
    transform: translateY(50px);
    opacity: 0;
    animation: appearBtnAnimation 0.3s ease-in-out forwards;
}
.nav__btn:nth-child(2) {
    animation-delay: 0.2s;
}
.nav__btn:nth-child(3) {
    animation-delay: 0.5s;
}
.nav__btn:last-child {
    animation-delay: 0.8s;
}

 

 

* animation 예시들

https://animista.net/

Animista - CSS Animations on Demand

 

✔️ media query: css 만을 이용해서 사용자의 스크린 사이즈를 알 수 있는.. 스크린의 condition을 추가할 수 있음. condition이 참일 때만 수행. 

div {
    margin: 200px;
    height: 300px;
    width: 300px;
    background-color: teal;
}
@media screen and (max-width: 600px) {
    div {
        background-color: tomato;
    }
}

@media screen and (max-width: 600px) { div {} 등 any css 코드 } => 사용자의 스크린이 최대 600px 일때까지만 div에 적용. 

위의 예에서 스크린이 600보다 작을 때는 tomato 색이고 600을 넘어가면 teal 색깔 됨.

@media screen and (min-width: 200px) and (max-width: 600px)

 

📍크롬에서 inspect > design toolbar 폰에서 보는 것처럼 화면 제공. 폰이 가로모든지 세로모든지도 감지 가능.

@media screen and (orientation: portrait/landscape) => 각각 세로모드/가로모드

 

@media screen{}

@media print{} >> 프린트하려고 할 때 적용할 css

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Using media queries - CSS: Cascading Style Sheets | MDN