学院60日目-CSS
2021.06.21
ex63_animation.html
animation
アニメーションアトリビュートは、アニメーションに関連するアトリビュートを一括して設定します.
アニメーション-delayアトリビュートは、アニメーションの遅延時間を設定します.
アニメーション-directionアトリビュートアニメーションのモーション方向を設定します.
アニメーション-durationアトリビュートは、アニメーションの移動時間を設定します.
アニメーション-fill-modeプロパティアニメーション終了後の状態を設定します.
アニメーション-iteration-countプロパティは、アニメーションの繰り返し回数を設定します.
アニメーション-nameプロパティアニメーションキーの名前を設定します.
アニメーション-play-stateプロパティアニメーションの進行状況を設定します.
アニメーション-timen-functionアトリビュートは、アニメーションモーションの速度を設定します.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="css/example.css" />
<style>
/*
인라인 태그에는 transform이 적용이 되지 않습니다. inline-block이나 block에만 적용됩니다.
transition -> animation
transition: 1 -> 10
animation: 1 -> (값의 변화를 개발자가 직접 조작) -> 10
*/
/*
블럭 태그의 height 속성
- % 이외의 단위: 적용O
- %: 적용X
- 부모 영역을 100%으로 하는 상대 단위 (***********)
<html>, <body>
- height: auto로 되어있음.
- 내용물의 높이가 자신의 높이
<body> 태그를 문서(브라우저창) 전체 높이로 설정하기
방법 1. CSS 2
1. <html>의 높이: 100% 지정
2. <body>의 높이: 100% 지정
방법 2. CSS 3
1. <xxx>의 높이: 100vh
- vh: viewport height, 눈에 보이는 창 크기만의 높이로 지정해라
*/
/* 최고 조상 */
html {
/* border는 width, height에 포함되지 않음 */
/* border: 50px solid gold; */
/* height: auto; */
/* 눈에 보이는 문서의 전체 높이가 <html>의 높이 */
/* height: 100%; */
/* width와 height에 padding과 border를 포함한다. */
/* box-sizing: border-box; */
}
body {
/* border: 50px solid black; */
margin: 0; /* <html> 와 <body> 사이의 여백 */
/* box-sizing: border-box; */
/* height: auto; */
/* height: 100%; */
height: 100vh;
}
.box {
margin-bottom: 10px;
}
body:hover #box1 {
animation-name: key1; /* 외부 참조 - 코드 재사용 가능 */
animation-duration: 1s;
animation-fill-mode: forwards;
}
body:hover #box3 {
animation-name: key1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
/* @keyframes : 애니메이션의 값의 변화 상태 처리,
약속한 이름을 사용해 해당 객체에 속성의 값 변화 명시 */
@keyframes key1 {
/* 어떤 속성 + 어떤 변화값 + 시간 순서 */
from { /* 시작, 처음상태 */
width: 200px;
}
to { /* 끝, 최종값 */
width: 600px;
}
}
/* transition */
body:hover #box2 {
transition: all 1s;
width: 600px;
}
/* ----------------------------------------------------------------------- */
body:hover #box4 {
animation-name: key2; /* 애니메이션에 정의된 이름 */
animation-duration: 1s; /* 애니메이션에 적용되는 소요 시간 */
}
@keyframes key2 {
/*
from {
width: 200px;
height: 200px;
}
to {
width: 400px;
height: 400px;
}
*/
/* 시간대별 속성값의 변화를 세분화 */
0% {
/* 0s */
width: 200px;
background-color: orange;
}
50% {
/* 0.5s */
width: 600px;
background-color: green;
}
100% {
/* 1s */
width: 200px;
background-color: orange;
}
}
/* ----------------------------------------------------------------------- */
body:hover #box5 {
animation-name: key3;
animation-duration: 10s;
}
@keyframes key3 {
0% { width: 200px; }
25% { width: 1000px; }
50% { width: 500px; }
75% { width: 800px; }
100% { width: 200px; }
}
#cat1 {
position: relative;
left: 0px;
top: 0px;
/* transition: all 1s; */
/* 애니메이션 시작 -> 평상시에 애니메이션을 건다. -> 새로고침해야 애니메이션이 시작된다.
animation-name: key4;
animation-duration: 10s;
*/
}
body:hover #cat1 {
/*
left: 300px;
top: 100px;
*/
/* 애니메이션 시작 -> 마우스를 올려야 애니메이션이 시작된다. */
animation-name: key4; /* transition-property 역할 */
animation-duration: 10s;
}
@keyframes key4 {
/* 시간배분에 따라 애니메이션의 움직임이 달라진다. */
/* 초반에는 빠른 변화 -> 후반에는 느리게 변화 가능. */
0% {
left: 0;
top: 0;
}
5% {
left: 100px;
top: 100px;
}
10% {
left: 1000px;
top: 100px;
}
15% {
left: 1000px;
top: 500px;
}
20% {
left: 1000px;
top: 100px;
}
100% {
left: 0px;
top: 0px;
}
}
/* ----------------------------------------------------------------------- */
#box6 {
margin: 100px;
}
body:hover #box6 {
animation-name: key5; /* 값 변화 */
animation-duration: 1s; /* 적용 시간 */
animation-iteration-count: 3;/* 반복 횟수 */
/*
normal: 정방향
reverse: 역방향
alternate: 사이클마다 정방향 -> 역방향 -> 정방향.. 으로 진행된다.
alternate-reverse: 사이클마다 역방향 -> 정방향 -> 역방향.. 으로 진행된다.
*/
animation-direction: normal; /* 값 변화의 방향 */
animation-delay: 5s; /* 지연 시간 */
}
@keyframes key5 {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(200px, 0px);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(0px, 200px);
}
100% {
transform: translate(0px, 0px);
}
}
/* ----------------------------------------------------------------------- */
#cat img {
display: block;
margin: 10px;
}
#cat:hover img {
animation-name: key6;
animation-duration: 3s;
animation-iteration-count: 2;
animation-direction: alternate;
}
#cat img:nth-child(1) { animation-delay: 0s; animation-duration: 1s; }
#cat img:nth-child(2) { animation-delay: 1s; animation-duration: 2s; }
#cat img:nth-child(3) { animation-delay: 0.5s; animation-duration: 3s;}
#cat img:nth-child(4) { animation-delay: 3s; animation-duration: 1.5s;}
#cat img:nth-child(5) { animation-delay: 2s; animation-duration: .5s;}
@keyframes key6 {
from { transform: translate(0px, 0px); }
to { transform: translate(800px, 0px); }
}
/* ----------------------------------------------------------------------- */
#box7 {
width: 500px;
height: 500px;
border: 10px solid black;
margin: 50px;
background-color: coral;
/* animation-name: key7;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: reverse; */
}
/* 부모가 한바퀴돌때 자식도 한바퀴 돌고 자식만의 한바퀴를 또 돈다. */
#box8 {
width: 50px;
height: 250px;
border: 10px solid black;
background-color: gold;
/* margin: 115px 115px; */
margin: 0px auto; /* 중앙정렬 */
animation-name: key7;
animation-duration: 60s; /* 시계의 초침, 분침, 시침을 만들 수 있음 */
animation-iteration-count: infinite;
animation-timing-function: linear; /* 속도 일정하게 */
transform-origin: center 250px; /* 회전 중심점 */
}
@keyframes key7 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- ex63_animation.html -->
<h1>애니메이션</h1>
<div id="box7">
<div id="box8">
</div>
</div>
<hr>
<div id="box6" class="box box-medium box-border3 bgcolor-yellow">box6</div>
<hr>
<div id="cat">
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
</div>
<hr>
<img src="images/catty01.png" id="cat1">
<div id="box1" class="box box-medium box-border3 bgcolor-red">box1</div>
<div id="box2" class="box box-medium box-border3 bgcolor-blue">box2</div>
<div id="box3" class="box box-medium box-border3 bgcolor-green">box3</div>
<div id="box4" class="box box-medium box-border3 bgcolor-orange">box4</div>
<div id="box5" class="box box-medium box-border3 bgcolor-blue">box5</div>
</body>
</html>
ex64_animaton.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#box {
border: 10px solid black;
width: 600px;
height: 1200px;
margin: 50px auto;
}
#ball {
width: 100px;
height: 100px;
background-color: gold;
border-radius: 50%;
box-sizing: border-box;
border: 10px solid black;
margin: 0 auto;
animation-name: key1;
animation-duration: 0.5s;
animation-iteration-count: infinite; /* 반복횟수 - 무한대 */
animation-direction: alternate; /* 움직임 방향 - 정방향 재생후 역방향 */
animation-timing-function: ease-in; /* 애니메이션 재생중 속도변화 - 천천히 시작되어 정상속도가 된다. */
}
@keyframes key1 {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 1100px);
}
}
</style>
</head>
<body>
<div id="box">
<div id="ball"></div>
</div>
</body>
</html>ex65_transition.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<style>
#html {
font-size: 5em;
color: tomato;
}
/* -------------------------------- */
button {
background-color: black;
border: 0px;
outline: none;
border-radius: 0;
padding: 10px;
color: white;
}
button > i {
color: gold;
}
/* -------------------------------- */
html, body {
height: 100%;
}
.char {
font-size: 5em;
color: tomato;
display: block;
width: 60px;
margin: 100px auto;
/* margin-top: 500px; */
transform: scale(100, 100); /* 크기가 커질때 중심을 기준으로 커짐. */
opacity: 0;
animation-name: keychar;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
.char:nth-child(1) { animation-delay: 0s; }
.char:nth-child(2) { animation-delay: 0.7s; color: gold; }
.char:nth-child(3) { animation-delay: 1.4s; color: cornflowerblue; }
@keyframes keychar {
0% {
transform: scale(100, 100);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}
</style>
</head>
<body>
<!-- 벡터(폰트) 기반: 수식, 확대/축소 능함 -->
<!--
<i class="fab fa-html5" id="html"></i>
<hr>
<button><i class="fas fa-trash-alt"></i> Delete</button>
-->
<i class="fab fa-html5 char"></i>
<i class="fab fa-css3-alt char"></i>
<i class="fab fa-js char"></i>
</body>
</html>ex66_flex.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/*
Flex
- Flexible Box, FlexBox
- 레이아웃 만들 때 내부 요소의 배치를 지정하는 상자
- float + position + margin
*/
#box {
border: 10px solid black;
/* 컨테이너 */
/* */ /* 컨테이너가 블럭태그 */
/* display: inline-flex; */ /* 컨테이너가 인라인태그 */
display: flex;
/*
축, Axis
- 기본축, Main Axis
- 수직축, 교차축, Cross Axis
*/
/*
flex-direction
- 아이템의 배치 방향 -> 메인축의 방향을 가로로 할지 세로로 할지 정함
- 기본축 or 수직축
*/
/* flex-direction: row; */ /* 메인축 */ /* 가로 배치 */
/* flex-direction: column; */ /* 수직축 */ /* 세로 배치 */
/* flex-direction: row-reverse; */ /* 역순으로 가로 배치 */
/* flex-direction: column-reverse; */ /* 역순으로 세로 배치 */
/*
flex-wrap
- 자동 줄바꿈
- 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
*/
/* flex-wrap: nowrap; */ /* 줄바꿈 X, 넘치면 삐져나감 */
/* flex-wrap: wrap; */ /* 줄바꿈 */
/* flex-wrap: wrap-reverse; */ /* 줄바꿈 -> 아이템을 역순으로 배치 */
/*
flex-flow
- 축약 속성, 그룹 속성
- flex-direction + flex-wrap을 한번에 지정할 수 있는 단축 속성
*/
/* flex-flow: row wrap; */
/*
justify
- 메인축 방향
align
- 수직축 방향
justify-content
- 메인축 방향으로 아이템을 어떻게 정렬?
*/
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* flex-direction: row-reverse; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* 메인축을 수직으로 했을 경우 */
/* flex-direction: column; */
/* height: 600px; */
/* justify-content: space-around; */
/*
******* flexbox는 기본적으로 모든 내부 요소의 높이가 상자의 높이와 동일하다.
align-items
- 수직축 방향으로 아이템을 어떻게 정렬?
*/
height: 600px;
/* align-items: stretch; */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}
#box .item:nth-child(2) {
font-size: 5em;
}
/*
float를 사용했을 때
#box::after {
content: '';
display: block;
clear: both;
}
#box .item {
float: left;
}
*/
#box .item:nth-child(3n) {
border: 10px solid tomato;
}
#box .item:nth-child(3n+1) {
border: 10px solid gold;
}
#box .item:nth-child(3n+2) {
border: 10px solid cornflowerblue;
}
#title1, #title2 {
font-variant: small-caps;
color: #333;
border-bottom: 1px dashed #999;
width: 600px;
}
#title1 small, #title2 small {
color: #777;
font-size: .6em;
}
/* 소제목을 오른쪽으로 옮기는 방법 */
/* 방법 1 - float사용 */
#title1 small {
float: right;
margin-top: 18px; /* 블럭태그의 성질때문에 수직축이 위로 맞춰진다. -> margin을 사용해 내린다. */
}
/* 방법 2 - justify-content사용 */
#title2 {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#box2, #box3 {
border: 15px solid black;
}
#box2 {
width: 320px;
height: 170px;
background-color: gold;
/* 안쪽 상자를 부모상자에 가운데 정렬하기 */
display: flex;
justify-content: center;
align-items: center;
}
#box3 {
width: 20px;
height: 30px;
background-color: tomato;
/* margin: 55px 135px; */
}
body {
margin-bottom: 500px;
}
</style>
</head>
<body>
<!-- ex66_flex.html -->
<div id="box">
<div class="item">1.딸기</div>
<div class="item">2.바나나</div>
<div class="item">3.포도</div>
<div class="item">1.딸기</div>
<div class="item">2.바나나</div>
<!-- <div class="item">1.딸기</div>
<div class="item">2.바나나</div>
<div class="item">3.포도</div>
<div class="item">1.딸기</div>
<div class="item">2.바나나</div>
<div class="item">3.포도</div>
<div class="item">1.딸기</div>
<div class="item">2.바나나</div>
<div class="item">10.파인애플</div> -->
</div>
<hr>
<h1 id="title1">Main Title<small>Sub Title</small></h1>
<h1 id="title2">Main Title<small>Sub Title</small></h1>
<hr>
<div id="box2">
<div id="box3"></div>
</div>
</body>
</html>
ex67.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* <html> 태그와 <body>태그 사이의 여백은 <body>태그의 마진값이다. */
/*
html, body {
border: 1px solid black;
}
html {
padding: 0;
}
*/
html {
/* height: 100%; */
}
body {
margin: 0;
/* border: 1px solid red; */
/* height: 100%; */
background-color: #CCC;
}
#main {
width: 800px;
/* height: 100%; */
height: 100vh;
/* background-color: gold; */
margin: 0 auto;
border-left: 1px solid #999;
border-right: 1px solid #999;
padding: 0px 50px;
background-color: white;
box-shadow: 0px 0px 5px #555;
}
#main > header {
width: 100%;
height: 200px;
/* background-color: tomato; */
}
#main > section {
width: 100%;
/* background-color: cornflowerblue; */
}
</style>
</head>
<body>
<!-- ex67.html -->
<div id="main">
<header>
Menu
</header>
<section>
lorem*50
</section>
</div>
</body>
</html>Reference
この問題について(学院60日目-CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@hi-dae-in/학원-60일차-CSSテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol