학원 60일차 - CSS

90874 단어 CSS학원CSS

2021.06.21

ex63_animation.html

animation

  • animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.

  • animation-delay 속성은 애니메이션 지연 시간을 설정합니다.

  • animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.

  • animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.

  • animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.

    • forwards : 애니메이션이 끝난 후 그 지점에 그대로
    • backwards : 애니메이션이 끝난 후 시작점으로
  • animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다.

  • animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.

  • animation-play-state 속성은 애니메이션 진행 상태를 설정합니다.

  • animation-timing-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>

  • space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 준다.
  • space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다.
  • space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.


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>

좋은 웹페이지 즐겨찾기