7월 7일 Velog

학습한 내용

CSS Animation

1. transform

[html]

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

(1) transform의 속성값

[css]

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

	transform: rotate(45deg);
	transform: scale(2, 3);
	transform: skew(10deg, 20deg);
	transform: translate(100px, 300px);

	margin-top: 300px;
	margin-left: 300px;
 }

• rotate(회전각) : 2차원적인 회전효과, 양수(오른쪽 회전)/음수(왼쪽 회전) 가능

• scale(width 비율, height 비율): 영역을 비율에 따라 축소/확대
  -> 비율>1 : 확대, 비율<1 : 축소

• skew(x축 회전각, y축 회전각)　: 차원적인 회전 효과, 양수/음수 가능

• translate(x축 변화량, y축 변화량) : 선택한 영역의 위치를 바꾸고 싶을 때
  -> 변화량>0 : x축 오른쪽/y축 아래쪽, 변화량<0 : x축 왼쪽/y축 위쪽

(2) 프리픽스

[css]

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

	margin-top: 300px;
	margin-left: 300px;
	
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	
	transform: rotate(10deg);
}

• transform은 explore 10.0 이상에서 사용 가능
  (확인 : https://www.w3schools.com/css/css3_2dtransforms.asp)

• 해결책 : 프리픽스+디폴트 사용

• 프리픽스 종류 : ms(= explore 9.0 버전 포함), webkit(크롬, 사파리), moz(파이어폭스), o(오페라)

2. transition

[html]

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

[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;
}

※ transition:hover -> 마우스를 올렸을 때의 동작을 표시하는 가상선택자

• 특정 행동(예: 마우스를 올린다)에 대해 영역이 변화하는 과정을 자연스럽게 나타내고자 할 때 사용
  • transition-property : 애니메이션을 줄 객체
  • transition-duration : 애니메이션 실행 시간
  • transition-timing-function : 애니메이션 실행 유형 (linear : 일정한 속도)
  • transition-delay : 애니메이션 실행 시작까지 걸리는 시간
• 위의 항목들을 한 줄로 정리할 수 있다
  • 항목 : property duration timing-function delay
  • 로딩 속도 개선
  • duration과 delay의 순서를 지켜줘야 한다.
    -> 숫자가 하나만 작성되면 duration으로 인식한다.
• 속성값에 쉼표(,)를 사용해서 더 많은 객체의 애니메이션을 지정할 수 있다.
• 변화 후의 설정을 hover에 반드시 저장

3. animation

[html]

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

[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 {
	from {	
		width: 300px;
		height: 300px;
		background-color: yellow;
	}

	to {
		width: 600px;
		height: 600px;
		background-color: red;
		border: solid 10px blue;
	}  
}

• 특정 행동 없이 자동 움직임 효과를 만들 때 사용
  • animation-name : 만들 애니메이션의 이름, 마음대로 정할 수 있다.
  • animation-duration : 애니메이션 동작 시간
    • normal : 정방향 시간
    • alternate : 편도 시간
  • animation-timing-function : 애니메이션 실행 유형 (linear : 일정한 속도)
  • animation-delay : 애니메이션 실행 시작까지 걸리는 시간
  • animation-iteration-count : 애니메이션 진행 횟수 (infinite : 무한대)
  • animation-direction : 애니메이션 진행 방향
    • normal : 정방향
    • alternate : 왕복
• @keyframes 애니메이션 이름 {} 와 함께 써야 한다.

※ alternate에서는 왕복 한 번을 횟수 2회로 간주

• from{} to{} 대신에 0%~100% 사이의 구간을 나눠 표현할 수 있다.

@keyframes changeWidth {
	0% {

		width: 300px;
		height: 300px;
		background-color: yellow;
	}

	50% {
		background-color: blue;
	}

	100% {
		width: 600px;
		height: 600px;
		background-color: red;
		border: solid 10px blue;
	}*
}

4. spin lion 실습

[html]

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

[css]

.spin-lion {
	width: 150px;
	height: 150px;
	background-color: blue;

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

	animation: spinLion 1500ms linear infinite alternate;
}

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

	to {
		transform: rotate(10deg);
	}
}

• animation-duration : 1.5s=1500ms

• animation의 속성들을 한 줄로 정리할 수 있다.
  -> name duration timing-function iteration-count direction delay

• duration(앞)과 delay(뒤)의 순서를 지켜줘야 한다.
  -> 숫자가 하나만 작성되면 duration으로 인식한다.

• 프리픽스

.spin-lion {
	width: 150px;
	height: 150px;
	background-color: blue;

	-webkit-animation: spinLion 1500ms linear infinite alternate;
	animation: spinLion 1500ms 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);
	}
}

• animation 프리픽스 사용할 때 @keyframes에도 프리픽스를 달아야 한다.
  -> @-webkit-keyframes
• keyframe 하위 내용이 자동으로 프리픽스 되는 것은 아니다, 필요하다면 따로 달아줘야 한다.

※ https://jeremyckahn.github.io/stylie/ : 다양한 애니메이션 구현

Animation 실습

1. mouse animation

[html]

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

[css]

ul {
	list-style: none;  
}

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

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

	border-top: solid 5px #dfdfdf;

	transition: background-color 0.5s, margin-left 0.5s;
}

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

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

※ ul { list-style: none; } : 점 제거
※ a { text-decoration-line: none; } : 언더바 제거

• opacity : 투명도(0:투명 ~ 1:원색)
  : opacity가 적용되는 태그 내부의 모든 내용을 투명화시킨다.
• 글자에 opacity를 주고 싶지 않을 때 -> background-color: rgba();
• rgba( a, b, c, d) : http://hex2rgba.devoth.com/ 에서 변환
  • a/b/c : 색상 코드
  • d : 투명도
  • #000000 = rgba(0, 0, 0, 1)
• transition: background-color 0.5s, margin-left 0.5s;
  : hover 기능이 자연스럽게 움직이는 효과

2. move box

[html]

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

[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-play-state: paused;*/
	animation-fill-mode: backwards;
}

@keyframes moveBox {
	0% {
		/*background-color: red; -> 일반적  */
		background-color: green;
		left: 0;
		top: 0;
	}

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

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

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

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

• left/top 사용할 수 있는 이유 : position : relative;이기 때문에
• animation-play-state : running(동작 진행), paused(동작 중지)
• 0%와 속성값과 초기값을 같은 값으로 맞춰주는 것이 일반적이다.
• animation-fill-mode : backyard(0%의 속성값과 초기값이 다를 때 0%의 속성값이 메인에 보이게 함)

3. outer border, inner border

[html]

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

[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: solid 5px purple;

	animation: innerBorder 2s infinite alternate;
}

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

• 부모 태그의 scale 변화가 적용됨

※ flex로 중앙 정렬 : https://flexbox.help/
※ border-radius: 50%; : 원형 border
※ margin: 0(상하) auto(좌우); : x축 중앙 자동 정렬
※ box-sizing: border-box;
: width/height 변화 없이 안쪽 방향으로 border 형성 -> 정사각형 기본 크기 유지

4. mario box, coin

[html]

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

[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;
	border-radius: 50%;

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

	animation: jumpCoin 1s linear 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(0px);}
	50% {transform: translateY(-10px);}
	100% {transform: translateY(0px);}
}

• transform: translateY() : y축에만 영향을 미치는 속성, 속성값이 음수일 때 위로 상승
• transform: translateY(0) rotateY(180deg); : 두 개의 속성값을 한번에 입력 가능
• transform: rotateY() : y축 기준으로 회전

5. hover 이미지 확대

[html]

	<div class="hover-image">
		<img src="https://t1.daumcdn.net/thumb/R720x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/5K5C/image/hs8wTSVCAi1_XpqhX4njjLK5yTA.jpg">

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

[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 linear;
}

.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;
}

• .hover-image img { width: 100% } : 부모 태그(.hover-image)의 width에 100%로 맞춤 -> 높이값 자동 설정
• vertical-align: middle; -> 이미지 하단의 공백 제거
• 부모 태그 - relative(3차원) + 자식 태그 - absolute(3차원)
  : 부모의 width값을 기준으로 설정할 수 있다.
  : 자식 태그 내의 left/top/bottom/right은 부모 영역을 기준으로 좌표점이 형성된다.
• transform: scale(1.3);을 이용하여 border 안으로 image를 확대하는 hover 효과를 만들고 싶을 때 'border 영역'에 overflow: hidden;을 같이 사용해준다.
• cursor: pointer; : 마우스를 올렸을 때 손가락 모양으로 바뀌는 효과
• image-info의 bottom 값을 -85px -> 0 으로 transform을 줘서 상승하는 효과를 준다.

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

오늘 수업을 들으면서 의문점이 두가지 생겼다.
의문점 1 : 브라우저 크기 변화에 따른 border와 이미지 사이의 공백 존재 변화의 이유
의문점 2 : 부모 태그의 scale 변화는 적용, border-color는 적용?

해결 방법 작성

구글링에 익숙치 않아서인지는 모르겠지만 원하는 자료를 찾을 수 없어 멘토님께 질문을 드렸다.

[의문점 1]
브라우저에서는 부모의 크기를 계산하기 위해서 자식 요소들의 크기를 계산하게 된다. 자식 요소의 구조가 어떻게 되어 있느냐에 따라서 크기를 딱 맞게 설정될 수도 아닐 수도 있다. 딱 비율과 크기에 맞게 할 수 있는 방법은 브라우저가 html 요소를 렌더링할 때 크기를 계산하는 방법을 통해 알 수 있다.
브라우저 렌더링 과정 중 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계는 Layout이다. 그리고 렌더링 과정 이후 Reflow 과정에서 Layout 과정을 다시 수행하여 렌더링을 최적화한다.
이 과정에서 어떤 문제(?) 오류(?)로 공백이 계속해서 발생했던 것 같다.

[의문점 2]
첫번째로 inner border의 border-color 초기값이 outer border의 @keyframes보다 아래에 있어서 우선순위가 초기값에 있다고 생각하여 inner border의 초기값을 위로 배치했지만 결과는 달라지지 않았다.
두번째로 구글에 검색하여 http://www.devdic.com/css/refer/properties 링크를 참조하였으나 오히려 transform도 상속 불가라고 명시되어 있었다.
세번째로 멘토님께 질문을 드렸고 답을 받았다.
표준은 transform(scale), border-color 둘 다 상속이 되지 않는다. 상속은 부모 요소에 설정된 값이 자식 요소에 별다른 설정이 해당되는 값으로 적용되게 한다.
참조 : https://developer.mozilla.org/ko/docs/Web/CSS/inheritance

학습 소감

많은 내용을 배우면서 점점 시각적으로 결과물을 확인할 수 있어서 성취감도 들고 재미도 있지만 그만큼 헷갈리는 부분도 많고 아직은 구글링이 많이 부족하다는 것을 느꼈다.