Dev Log #8 - 7월 7일

Juhui_0304·2021년 7월 7일
CSSTILhtml대구AI스쿨
0

Dev Log

목록 보기
8/49

오늘 학습한 내용

✅ css 애니메이션 소개
✅ transform 속성
✅ transition 속성
✅ Animation 속성
✅ Kids Gao 움직이는 사자 구현
✅ 실무01 mouse-animation
✅ 실무02 move-box
✅ 실무03 outer-border, inner-border
✅ 실무04 슈퍼마리오 동전
✅ 실무05 이미지 확대 기능

1. CSS Animation 소개

  • 웹사이트에 다양한 인터랙션 효과를 주고자 할때 사용한다. 과거에는 javascript로 구현을 했어야했는데, css 언어가 발전하면서 javascript를 사용하지 않고도 일부 간단한 동작을 구현할 수 있게 되었다.

2. transform 속성

  • 오브젝트 크기를 축소 및 확대하거나, 각도를 회전 시키거나 위치를 변경시킬 때 사용한다.

  • rotate 속성은 2차원적인 회전 효과를 의미한다. 평면적으로 회전을 하게 되고 rotate안의 숫자는 양수 또는 음수 모두를 가질 수 있다.

  • scale 속성은 내가 선택한 영역의 크기를 비율로 키울 때 사용한다. 예를 들면, transform: scale(2, 3);은 앞의 숫자는 width 값을 2배로 키우겠다는 뜻이고 뒤의 숫자는 height값을 3배로 키우겠다는 뜻이다.

  • skew 속성은 선택한 영역의 각도에 미치는 속성이다. 3차원적인 효과를 적용한다. 예를들면, transform: skew(10deg, 20deg);에서 앞의 숫자는 x축에 영향을 미치고 뒤의 숫자는 y축에 영향을 미친다. 숫자는 양수 또는 음수 모두를 가질 수 있다. 정육면체를 만들 수도 있다.

  • translate는 내가 선택한 영역의 오브젝트를 위치를 변경할 때 사용한다. 첫번째 숫자로 전달된 값은 x축, 두번째 숫자로 전달된 값은 y축에 영향을 미친다.

  • 🚨주의점: 사용하고 있는 브라우저에는 고유한 버전들이 있는데, 각 브라우저의 하위버전까지 맞추어서 transform을 작성하고 싶을 때 프리픽스를 이용한다.

	-webkit-transform: rotate(10deg); /* 크롬, 사파리 */
	-moz-transform: rotate(10deg); /* 파이어폭스 */
	-ms-transform: rotate(10deg); /* 익스플로러 */
	-o-transform: rotate(10deg); /* 오페라 */

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="transform"></div>

</body>
</html>

👉 css

.transform {
	width: 300px;
	height: 300px;
	background-color: yellow;

	/*transform: rotate(-10deg);*/
	/*transform: scale(0.5, 0.5);*/
	/*transform: skew(-10deg, 20deg);*/
	/*transform: translate(100px, 300px);*/

	/*margin-left: 300px;*/
	/*margin-top: 200px;*/


	/*-webkit-transform: rotate(10deg);*/
	/*-moz-transform: rotate(10deg);*/
	/*-ms-transform: rotate(10deg);*/
	/*-o-transform: rotate(10deg);*/
	transform: rotate(10deg);
}

👉 결과물

3. transition 속성

  • 변화하는 과정을 보여주고 싶을 때 사용

  • transition-property: 변화를 주고자 하는 영역

  • transition-duration: 애니메이션이 진행되는 시간

  • transition-timing-function: 애니메이션이 움직이는 데 여러 속도의 성격을 지정할 수 있다. linear 속성값은 처음부터 끝까지 일정한 속도를 유지시키겠다는 뜻이다.

  • transition-delay: 약간의 딜레이를 적용한 이후에 애니메이션 효과를 발동시키는 속성이다.

  • 위의 transition 속성값들을 하나의 속성값으로 만들 수 있다.(용량을 줄이므로 로딩 속도가 빨라진다)

    • 🚨 주의점: 순서는 상관없는데 duration과 delay에 대해서만 순서를 신경써서 작성해야한다. 숫자가 두개가 있는 경우 가장 먼저 나오는 숫자가 duration이고 뒤에 나오는 숫자가 delay이다. 하나의 숫자만 기입하는 경우 duration으로 인식한다.(선 duration 후 delay)

  • 메뉴버튼에 마우스를 올렸을 때 바로 색상을 바꾸게 하게끔 아니라 자연스러운 색상변화를 적용하고자 할 때 transition속성을 이용한다.

  • 변화를 주고자 하는 속성은 ,를 사용해서 늘릴 수 있다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="transition"></div>

</body>
</html>

👉 css

.transition {
	width: 300px;
	height: 300px;
	background-color: yellow;

	/*
	transition-property: width;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 1s;
	*/

	transition: width 2s linear, height 2s linear; 
}

.transition:hover {
	width: 600px;
	height: 600px;

}

👉 결과물

4. Animation 속성

  • 자연스럽게 오브젝트를 자동으로 움직이는 효과를 만들고 싶을 때 사용하는 속성이다.

  • animation-name: 원하는 이름으로 작성

  • animation-duration: 애니메이션이 전체 동작하는 시간

  • animation-timing-function: 애니메이션이 움직이는 데 여러 속도의 성격을 지정할 수 있다. linear 속성값은 처음부터 끝까지 일정한 속도를 유지시키겠다는 뜻이다.

  • animation-delay: 약간의 딜레이를 적용한 이후에 애니메이션 효과를 발동시키는 속성이다.

  • animation-iteration-count: 애니메이션 진행 횟수

    • infinite: 무한대 반복

  • animation-direction: 애니메이션 진행 방향

    • normal: 정방향
    • alternate: 왕복효과 (🚨주의점! animation-interection-count와 맞물려서 고려해야한다. 왕복이기 때문에 animation-interection-count를 6으로 지정했다면 실제로는 3번 반복하게 된다. from에서 to로 1번, to에서 from으로 1번으로 책정하기 때문)

  • 애니메이션 속성을 사용할 때 같이 따라와야 하는 코드는 @keyframes이다. @keyframes + 지정한 animation-name

@keyframes changeWidth {
	from {
		width: 300px;
	}

	to {
		width: 600px;
	}
}

  • css속성을 추가해서 다양한 커스텀 효과를 가져올 수 있다. 배경 색깔 변화도 가능하다.

  • keyframes 안에서 from, to를 숫자로 표현할 수도있다. 지점을 따로 설정해서 작업이 가능하다.

@keyframes changeWidth {
	0% {
		width: 300px;
		height: 300px;
		background-color: yellow;
	}

	50% {
		background-color: blue;
	}

	100% {
		width: 600px;
		height: 600px;
		background-color: red;
	}
}

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="animation"></div>

</body>
</html>

👉 css

.animation {
	width: 300px;
	height: 300px;
	background-color: yellow;

	animation-name: changeWidth;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 1s;

	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes changeWidth {
	0% {
		width: 300px;
		height: 300px;
		background-color: yellow;
	}

	50% {
		background-color: blue;
	}

	100% {
		width: 600px;
		height: 600px;
		background-color: red;
	}
}

👉 결과물

5. Kids Gao 사이트에서 사자 움직이는 효과 구현

  • Animation 속성값들을 하나의 속성값으로 만들 수 있다.(용량을 줄이므로 로딩 속도가 빨라진다)

    • 🚨 주의점: 순서는 상관없는데 duration과 delay에 대해서만 순서를 신경써서 작성해야한다. 숫자가 두개가 있는 경우 가장 먼저 나오는 숫자가 duration이고 뒤에 나오는 숫자가 delay이다. 하나의 숫자만 기입하는 경우 duration으로 인식한다.

  • 하위버전으로 제작을 하는 경우 animation속성을 사용해야한다면 코드가 필연적으로 늘어날 수 밖에 없다.

  • 포물선 만들기(참고 사이트): https://jeremyckahn.github.io/stylie/

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="spin-lion"></div>

</body>
</html>

👉 css

.spin-lion {
	width: 150px;
	height: 150px;
	background-color: blue;
        margin: 0 auto;
	margin-top: 200px;


	/*
	animation-name: spinLion;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	*/

	-webkit-animation: spinLion 1.5s linear infinite alternate;
	animation: spinLion 1.5s linear infinite alternate;

}

@-webkit-keyframes spinLion {
	from {
		-webkit-transform: rotate(-10deg);
	}

	to {
		-webkit-transform: rotate(10deg);

	}
}

@keyframes spinLion {
	from {
		transform: rotate(-10deg);
	}

	to {
		transform: rotate(10deg);

	}
}

👉 결과물

6. Animation 실무 01_mouse-animation

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<nav class="mouse-animation">
		<ul>
			<li><a href="#">메뉴1</a></li>
			<li><a href="#">메뉴2</a></li>
			<li><a href="#">메뉴3</a></li>
			<li><a href="#">메뉴4</a></li>
		
		</ul>
	</nav>

</body>
</html>

👉 css

html, body {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

.mouse-animation li {
	width: 250px;
	background-color: rgba(0, 0, 0, 1);
	padding: 20px;

	border-top: solid 5px #dfdfdf;
	transition: opacity 0.5s, margin-left 0.5s
}

.mouse-animation li:hover {
	background-color: rgba(0, 0, 0, 0.5);
	margin-left: 10px;
}

.mouse-animation li a {
	color: red;
	font-size: 20px;
}

👉 결과물

7. Animation 실무 02_move-box

  • left와 top을 사용할 수 있는 이유는 position이 relative이기 때문이다.

  • animation-play-state:

    • running: 브라우저에 접속했을 때 애니메이션을 바로 동작 시키겠다
    • paused: 동작을 멈추고 싶다

  • animation-fill-mode:

    • backwards: 최초 0%에 입력된 상태를 기준으로 해서 보여주겠다.(굉장히 자주 쓰이는 기법)

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="move-box"></div>

</body>
</html>

👉 css

.move-box {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: red;

	animation-name: moveBox;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	animation-fill-mode: backwards; // 원래 move-box 배경색은 빨간색(red)이지만, backwards를 씀으로써 0%의 배경색인 green으로 따라간다.
}

@keyframes moveBox {
	0% {
		background-color: green;
		left: 0;
		top: 0;
	}

	25% {
		background-color: yellow;
		left: 500px;
		top: 0;
	}

	50% {
		background-color: grey;
		left: 500px;
		top: 500px;
		border-radius: 50%;
	}

	75% {
		background-color: blue;
		left: 0;
		top: 500px;
	}

	100% {
		background-color: red;
		left: 0;
		top: 0;
	}
}

👉 결과물

8. Animation 실무 03_outer-border, inner-border

  • 두가지 애니메이션 적용
  • scale은 scale을 적용한 영역의 자식에게까지 영향이 미치고 있다.
  • box-sizing: border-box; 안쪽의 박스 크기를 바깥 박스 크기를 넘어서지 않도록 하는 것

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="outer-border">
		<div class="inner-border"></div>
	</div>

</body>
</html>

👉 css

.outer-border {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 200px;
	height: 200px;
	border: solid 15px red;
	border-radius: 50%;

	margin: 0 auto;
	margin-top: 200px;

	animation: outerBorder 2s infinite;

}

@keyframes outerBorder {
	0% { border-color: red; transform: scale(1);}
	25% { border-color: yellow; transform: scale(1.2); }
	50% { border-color: blue; transform: scale(1.3);}
	75% { border-color: green; transform: scale(1.2);}
	100% { border-color: pink; transform: scale(1);}
}

.inner-border {
	box-sizing: border-box;
	width: 75px;
	height: 75px;
	border: 5px solid purple;

	animation: innerBorder 2s infinite alternate;
}

@keyframes innerBorder {
	0% { transform: rotate(0deg); }
	25% { border-color: blue; border-width: 10px;}
	50% { border-color: yellow; border-width: 20px;}
	75% { border-color: green;border-width: 30px;}
	100% { border-color: grey; border-width: 5px; transform: rotate(360deg);}
}

👉 결과물

9. Animation 실무 04_슈퍼마리오 동전

  • transform에서 쉼표를 사용하지 않고 여러가지 속성값들을 여러개 입력할 수 있다. 주의점은 띄어쓰기로 표현해야한다
  • y축 기준으로 이동할 경우는 translateY()를 적용한다.
  • y축 기준으로 회전효과는 rotateY()를 적용한다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


	<div class="mario-container">
		<div class="mario-coin"></div>
		<div class="mario-box"></div>
	</div>



</body>
</html>

👉 css

.mario-container {
	position: relative;
	width: 500px;
	height: 500px;
	border: solid 10px black;

	margin: 0 auto;
	margin-top: 200px;
}

.mario-container .mario-coin {
	position: relative;
	width: 70px;
	height: 70px;
	background-color: yellow;

	margin: 0 auto;
	margin-top: 100px;
	border-radius: 50%;

	animation: jumpCoin 1.0s infinite ;
}

@keyframes jumpCoin {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

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

	100% {
		transform: translateY(-100px) rotateY(360deg);
		opacity: 0;
	}
}

.mario-container .mario-box {
	width: 100px;
	height: 100px;
	background-color: blue;

	margin: 0 auto;

	animation: jumpBox 0.5s linear infinite alternate;

}

@keyframes jumpBox {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

👉 결과물

10. Animation 실무 05_이미지 확대 기능

  • %는 %를 사용한 지점의 부모가 누구인지에 따라 그 공간의 크기가 설정된다.

  • img 태그는 하단에 미세한 공백을 가지고 있다. 이를 해결(하단 공백 제거)하기 위해서는 vertical-align: middle;을 적용하면 된다. 이는 디폴드 값으로 넣어주어야 한다.

  • 부모가 2차원일 때 자식의 3차원적인 높이 값이 부모의 높이 값에 영향을 줄 수 없다. (부모 클래스인 hover-image가 자식 클래스인 image-info의 높이를 인식하지 못한다. 해결법으로 부모 position을 relative로 적용)

  • 부모가 3차원적인 특징을 갖고 있을 때(relative 포함)그리고 자식을 3차원으로 적용했을 때 width값을 부모를 기준으로 잡을 수 있다.

  • 부모가 3차원 특징을 갖고 있을 때 position 좌표 기준점은 부모를 기준으로 형성이 된다.(부모가 relative이므로 left, top 이동 가능)

  • overflow:hidden;을 적용해서 이미지가 hover-image 영역을 넘어서는 부분을 감춘다.

  • scale과 관련된 효과를 적용하고 싶을 땐 overflow를 같이 사용해야한다. 특정 영역을 벗어났을 때 감춤 효과를 적용하기 위해서

  • cursor: pointer; : 이미지에 마우스를 올렸을 때 클릭을 나타내는 손가락 모양으로 변경

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="hover-image">
		<img src="https://image.freepik.com/free-photo/sunny-day-with-sea-background_1160-233.jpg">

		<div class="image-info">
			<h2>Title</h2>
			<p>Paragraph</p>
		</div>
	</div>

</body>
</html>

👉 css

.hover-image {
	cursor: pointer;
	overflow: hidden;
	position: relative;
	width: 400px;
	border: solid 10px #000000;
}

.hover-image img {
	width: 100%;
	vertical-align: middle;
	transition: transform 0.3s linear;
}

.hover-image:hover img {
	transform: scale(1.3);
}

.hover-image .image-info {
	box-sizing: border-box;
	position: absolute;
	width: 100%;

	background-color: rgba(0, 0, 0, 0.5);
	padding: 20px;

	left: 0;
	bottom: -85px;

	transition: bottom 0.3s linears;
}

.hover-image:hover .image-info {
	bottom: 0;
}

.hover-image .image-info h2,
.hover-image .image-info p {
	margin: 0;
	padding: 0;
	color: #ffffff;
}

.hover-image .image-info h2 {
	font-size: 20px;
}

.hover-image .image-info p {
	font-size: 15px;
}

👉 결과물

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 css 애니메이션 속성에 대해서 학습했다. css 애니메이션은 많이 다뤄보지 않은 부분이라서 낯설기도 하고 익혀야 할 부분도 굉장히 많았다.하지만, 웹 브라우저에 오브젝트가 움직이고 반응하는 부분이 매우 흥미로웠고 재미있었다! 오늘 어려웠던 점은 슈퍼 마리오 동전 부분과 마지막인 이미지 확대하는 부분이 굉장히 어려웠다. 특히, css레이아웃 속성과 애니메이션 속성을 접목 시킬 때 이해하기가 어려워서 여러번 반복해서 학습했다. 오늘은 학습분량도 굉장히 많아서 내일은 처음부터 다시 강의를 반복해야할 것 같다..🥲 복습 철저히 해서 내일 수업에 지장이 없게끔 해야겠다!

profile
Juhui_0304
하루하루 성장하는 것을 목표로 합니다🌟
이전 포스트

Dev Log #7 - 7월 6일

다음 포스트

Dev Log #9 - 7월 8일

0개의 댓글