TIL 008 | CSS Animation & Perspective & Media Query

dhforb123·2021년 11월 12일
0

HTML/CSS TIL

목록 보기
8/14
post-thumbnail

Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- Animation.
- Perspective.

✏️ Animation ✏️

Keyframes 란?

@keyframes는 변화가 일어나는 지점을 설정하여 특정 시간 동안 해당 속성 값을 변화시킨다. 아래는 keyframes를 통해 구현한 간단한 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
    <style>
        /* 키프레임 이름 == 애니메이션 이름 */
        @keyframes rotate {
            0% {
                background-color: rosybrown;
                transform: translate(0, 0);
            }

            100% {
                background-color: royalblue;
                transform: translate(300px, 0) rotate(360deg) scale(2);
            }
        }

        div {
            margin: 200px;
            width: 100px;
            height: 100px;
            animation: rotate 3s infinite;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

transition과 animation의 차이

transiton은 요소의 상태가 변화되어야 실행할 수 있지만,
animation은 요소의 상태 변화와 관계없이 실행할 수 있다.

keyframes의 규칙

@keyframes는 애니메이션이 만들어지는 부분으로
아래와 같이 from 부터 to 까지 혹은 0% 부터 100% 까지 설정한 스타일로 점차 변화되면서 애니메이션이 재생된다. ( 0%와 100% 사이 중간 값 설정 가능 )

@keyframes rotate {
	from {
		/* 처음 상태 */
	}

	to {
    	/* 마지막 상태 */
	}
}

@keyframes rotate {
	0% {
		/* 처음 상태 */
	}
    
    	50% {
		/* 중간 상태 */
	}

	100% {
    	/* 마지막 상태 */
	}
}

animation 속성

animation의 단일 속성으로는 아래와 같다.

animation-name : 애니메이션의 이름 ( = @keyframes 명 )
animation-duration : 애니메이션 총 지속 시간
animation-iteration-count : 애니메이션 재생 횟수
animation-direction : 애니메이션 재생 방향
animation-timing-function : 애니메이션 재생 속도 조절
animation-delay : 애니메이션 시작 지연
animation-play-state : 애니메이션 재생여부

✏️ Perspective ✏️

Perspective 란?

perspective는 원근법으로 우리가 대상을 보는 위치와 거리를 설정할 수 있다.
아래 예시는 크기가 같은 요소가 우측 중앙에서 바라 보았을 때 화면 정면에서 비춰지는 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>perspective</title>
    <style>
        .original {
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto;
            perspective: 400px;
        }

        .rotate {
            width: 200px;
            height: 200px;
            background: aqua;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="original">
        <div class="rotate"></div>
        <div class="rotate"></div>
        <div class="rotate"></div>
        <div class="rotate"></div>
        <div class="rotate"></div>
        <div class="rotate"></div>
    </div>
</body>
</html>

✏️ Media Query ✏️

Media Query 란?

@media는 특정 조건( 단말기의 유형, 화면 해상도, 뷰포트 너비 등 )에서 특정 스타일만 적용되도록 하는 것으로 반응형 웹 구현에 이용된다. 아래는 media를 통해 구현한 간단한 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>media query</title>
    <style>
        body {
            background-color: tomato;
            color: white;
        }

        @media screen and (max-width: 1000px) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
<body>
</body>
</html>

출력 유형

자주 사용하는 출력 유형은 다음과 같다.

all : 모든 장치를 대상
print : 인쇄 결과물 및 출력 미리보기 화면에 표시
sereen : 모니터나 스크린이 있는 디바이스

출력 조건

자주 사용하는 출력 조건은 다음과 같다.

webkit-min(max)-device-pixel-ratio : 출력 장치의 최소, 최대 픽셀 비율
min(max)-width : 스크롤 바를 포함한 뷰포트의 최소, 최대 넓이

0개의 댓글