[CSS] 기본 익히기 PART 9
Animation
- 요소에 적용된 스타일을 다른 스타일로 부드럽게 전환 시켜 준다.
- @keyframes를 사용하여 지정할 수 있다. - 애니메이션의 중간상태를 말한다고 한다.
- transition보다 더 정밀한 효과를 구현할 수 있다.
keyframes 정의하기
- from ~ to로 지정하기
@keyframes shape {
from {
border: 1px solid transparent;
}
to {
border: 1px solid #000;
border-radius: 50%;
}
}
- from ~ percent ~ to로 지정하기
@keyframes background {
from { background-color: red; }
50% { background-color: green; } /* percentage로 중간 스타일을 적용 */
to { background-color: blue; }
}
Animation속성
- animation-name - 애니메이션의 중간상태를 지정하기 위한 이름을 정의한다.
- animation-duration - 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
- animation-delay - 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
- animation-iteration-count - 애니메이션이 몇 번 반복할지 지정할 때 사용하며 infinite로 지정하면 무한으로 반복이 가능하다.
.animation1 {
animation-name: shape-color;
animation-duration: 3s;
animation-iteration-count: 3;
}
@keyframes shape-color {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: blue;
}
}
- animation-paly-state - 애니메이션을 멈추거나 다시 시작할 수 있다.
- animation-timing-function - 중간 상태들의 전환을 어떤 시간간격으로 진행 할지 지정한다.
- animation-fill-mode - 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
- animation - 위의 속성들을 한꺼번에 작성 할 수 있다.
/* rotate 애니메이션, background 애니메이션 동시에 실행 시키기 */
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
원본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animation Loading</title>
<style>
body {
margin: 0;
padding: 0;
}
.circle {
width: 20px;
height: 20px;
background-color: blue;
border-radius: 50%;
position: absolute;
animation: move-the-circle 1.5s infinite;
}
.circle:nth-child(2) {
left: 30px;
animation-delay: 0.1s;
}
.circle:nth-child(3) {
left: 60px;
animation-delay: 0.2s;
}
.circle:nth-child(4) {
left: 90px;
animation-delay: 0.3s;
}
.circle:nth-child(5) {
left: 120px;
animation-delay: 0.4s;
}
.circle:nth-child(6) {
left: 150px;
animation-delay: 0.5s;
}
.circle:nth-child(7) {
left: 180px;
animation-delay: 0.6s;
}
.circle:nth-child(8) {
left: 210px;
animation-delay: 0.7s;
}
@keyframes move-the-circle {
0% {
transform: translate(0, 0) scale(1);
background-color: blue;
}
50% {
transform: translate(0, 50px) scale(0.5);
background-color: red;
}
100% {
transform: translate(0, 0) scale(1);
background-color: blue;
}
}
</style>
</head>
<body>
<div class="animation-wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>
반응형 웹 사이트
웹사이트를 pc뿐만이 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 홈페이지
뷰포트
- 웹 브라우저에 실제 내용이 표시되는 영역
- 디바이스마다 viewport가 다르다
- viewport mera태그를 사용해서 디바이스에 맞게 화면을 보여준다.
지정하는 방법
- <meta name = "viewport" content = "속성1=값, 속성2=값, ....">로 사용할 수 있다.
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=1, user-scalable=yes"
/>
태그 속성
- width - 뷰포트 가로
- height - 뷰포트 세로
- user-scalable - 사용자 확대/ 축소 가능 여부
- initial-scale - 초기 화면 비율
- maximum-scale - 최대 화면 비율
- minimum-scale - 최소 화면 비율
뷰 포트 단위
- vw - 뷰포트 너비를 나타내며 100vw는 뷰포트 width의 100%를 말한다.
- vh - 뷰포트의 높이를 나타내며 100vh는 뷰포트 height의 100%를 말한다.
- vmin - 뷰포트의 너비와 높이 중에서 작은 값.
- vmax - 뷰포트의 너비와 높이 중에서 큰 값.
미디어 쿼리
문법
- 접속하는 디바이스나 뷰포트에 따라 특정 CSS를 사용하는 방법이다.
- @media 키워드를 사용한다.
- breakpoint(중단점)에서 어떤 CSS를 적용할 것인지 지정한다.
- media [only | not] 미디어 유형 [and 조건] * [and 조건]로 활용한다.
- only - 거의 사용하지 않자미나 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다.
- not - not 다음에 지정하는 미디어 유형을 제외한다.
- and - 조건을 여러개 연결할 수 있다.
미디어 유형
- all - 모든 장치에 적합하다
- print - 인쇄 결과물 및 출력 미리보기 화면에서 표시된다.
- screen - 주로 화면에서 보여진다.
- speech - 음성 합성장치에서 실행된다.
자주 사용하는 미디어 쿼리
- min-width - 웹 뷰포트의 최소너비를 나타낸다
- max-width - 웹 뷰포트의 최대 너비를 나타낸다.
원본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Query</title>
<style>
/*
min-width
max-width
0 ~ 400px blue
401px ~ 600px red
601px ~ yellow
*/
@media (max-width: 400px) {
body {
background-color: blue;
}
}
@media (min-width: 401px) and (max-width: 600px) {
body {
background-color: red;
}
}
@media (min-width: 601px) {
body {
background-color: yellow;
}
}
@media print {
h1 {
font-size: 120px;
}
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facere
expedita nesciunt quibusdam, itaque, sapiente voluptatem deleniti
consequatur tenetur vel nisi corrupti blanditiis harum aut praesentium. Ex
nesciunt rerum molestiae.
</p>
</body>
</html>
참고한 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/animation
animation - CSS: Cascading Style Sheets | MDN
animation 단축 CSS 속성은 스타일 사이에 에니메이션을 적용합니다. animation-name (en-US), animation-duration, animation-timing-function (en-US), animation-delay, animation-iteration-count (en-US), animation-direction, animation-fill-mo
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries
미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN
CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트
developer.mozilla.org
유투브 짐코딩
https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
Screen sizes, viewport sizes and CSS media queries for Devices | Find Viewport Size | YesViz
Yesviz.com is a significant database of screen sizes, viewport sizes, css media queries and resolution for all kind of devices including phones, tablets, smart watches and laptops.
yesviz.com