2021.07.07 CSS-6

정혜리·2021년 7월 7일
CSS개발일지애니메이션코린이프론트엔드
0

웹프로그래밍

목록 보기
8/11

Day8, 오늘은 애니메이션에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 P,Q,R으로 시작하는 태그에 대해서 복습하고 넘어가자.

Inline : <picture></picture>,<q></q>,<rt></rt>,<ruby></ruby>
Block :<p></p>,<pre></pre>

오늘 무엇을 배웠지?

애니메이션

:hover {}를 적용해 마우스커서를 가져다댔을때 변화를 볼 수 있다.

Transforms

  • transform : object에 위치변경, 각도 회전, 크기를 늘리거나 줄임 등의 효과를 적용
  • transform: rotate(45deg); -> 회전 () 음수는 좌로 회전, 양수는 우로 회전
  • transform: scale(3,2); ->크기를 비율에 맞춰 조정(확대/축소) (x,y) 숫자는 각 축의 배수를 의미
  • transform: skew(10deg, 20deg); -> 3차원으로 회전(x,y) x축으로 회전, y축으로 회전 ->정육면체 구현가능
  • transform: translate(100px,100px); -> object의 위치변경 (x,y) x축으로 이동, y축으로 이동

++사용시 주의점 : 사용가능한 브라우저의 버전이 있음
그 이하라면 prefix 사용 ->각각 브라우저의 버전을 지칭 하위버전에서 적용할때 사용
ex) -webkit- : 크롬, 사파리
-moz- : 파이어폭
-ms- : 익스플로러
-o- : 오페라

		-webkit-transform : rotate(10deg)
		-moz-transform : rotate(10deg)
		-ms-transform : rotate(10deg)
		-o-transform : rotate(10deg)
		transform : rotate(10deg)

w3school의 css transform보면 다양한 기능을 확인할 수 있음

Transition

  • transition : 애니메이션이 변화하는 과정을 보여줌
  • transition-property: width; ->변화하는 값
  • transition-duration: 2s; -> 변화하는 시간
  • transition-timing-function: linear; -> 속도 성향(점점빠르게, 점점느리게, 일정하게 등등)
  • transition-delay: 1s; -> 변화하기전 걸리는 시간
    ▶ transition: width 2s linear 1s; 으로 위의 4가지 값 정리 가능
    ( 하나의 숫자만 입력한 경우 그 숫자는 duration으로 인식, 두개의 숫자는 숫자 순서대로 duration, delay로 인식)

Animation 속성

  • 웹사이트를 실행했을 때부터 움직이거나 형태의 변화가 있음

  • animation-name: changewidth; -> 원하는 이름으로 설정

  • animation-duration: 3s; -> 효과가 적용되는 시간

  • animation-timing-function: linear; -> 효과의 속도

  • animation-delay: 1s; -> 효과가 적용되기 전 시간

  • animation-iteration-count: 6; -> 효과 진행 횟수 infinite(무한으로 진행)

  • animation-direction: normal; -> 효과 진행 방향 normal(기본값), alternate(왕복)
    이때, alternate와 interation-count영향을 주지는 않는다.

  • animation-play-state: running; -> 기본값, 효과적용상태를 말하고 paused 로 설정할 시 효과 멈춤

  • animation-fill-mode: backwards; -> 0%에 설정한 값을 최초에 표현되는 값으로 설정 할 수 있음.

  • "@keyframes 애니메이션이름 {}" 으로 애니메이션 상세히 설정 가능
    ① from {} to{}
    ② 0%{} 50%{} 100%{} - >0~100%의 어느 숫자의 퍼센트로도 설정가능(소숫점까지)
    방법으로 설정 가능

@keyframes changewidth {
	0% {width: 300px; height: 300px; background-color: yellow;}
	50% {background-color: blue;}
	100% {width: 600px; height: 300px; background-color: red;}
}

+++ TIP!
① Transition처럼 한줄로 설정가능 

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

② prefix를 사용할 수 있는데, animation에 prefix를 적용했다면 @keyframes에도 동일하게 prefix를 적용해야함!

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

③ 'stylie'사이트에서 애니메이션 설정에 도움을 받을 수 있다!
https://jeremyckahn.github.io/stylie/

실습하기

마우스커서를 가져다 댔을 때 투명해지면서 이동하는 메뉴 탭 만들기

  1. new file-save(index0707-2.html), save(style0707-2.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style0707-2.css">
</head>
<body>

</body>
</html>
  1. 목록 전체를<nav></nav>태그로 공간을 구분짓고 ->디자인을 위해 "class=mouse-animation" 설정
  2. 동일한 탭이기 때문에 '목록' 태그 사용 -> 메뉴는 동급 정보 -> <ul></ul> -><li></li>
  3. 클릭하면 원하는 페이지로 넘어가도록 <a></a> 태그로 메뉴 탭 이름을 설정한다.
  4. 이제부터 CSS언어로 디자인
    6-1. "html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    6-2."ul {list-style: none;}" 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다.
    6-3. "a { color: #000000; text-decoration: none;}" 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다.
    6-4. ".mouse-animation li {width: 250px; background-color: #000000; padding: 20px; border-top: solid 5px #dfdfdf;}"으로 메뉴탭의 너비와 배경색을 설정하고 메뉴 탭 사이의 간격을 padding으로 설정한다. 또, 위쪽 테두리 선의 굵기, 색등을 설정한다.
    6-5. ".mouse-animation li a {color: #ffffff; font-size: 20px;}" <a>태그의 글자 색과 크기를 설정한다.
    6-6. ".mouse-animation li:hover {opacity: 0.5; margin-left: 10px; transition: opacity 0.2s, margin-left 0.5s;}" 메뉴탭의 영역에 마우스커서를 가져다 대면 투명해지도록 opacity로 투명도를 설정하고 왼쪽으로 이동하도록 maring-left로 이동값응ㄹ 설정한다. 이때, 효과가 자연스럽게 적용되도록 'transition'으로 opacity와 margin-left가 적용되는 시간을 설정한다.
    +++tip! opacity는 글자와 배경색 모두에 투명도를 적용한다. 배경색에만 적용하고 싶다면, background-color를 적용할 때, hex값이 아닌 rbga 값으로 설정한다.
.mouse-animation li {width: 250px;	background-color: rgba(0,0,0,1); padding: 20px;	border-top: solid 5px #dfdfdf;}

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

색이 변하면서 움직이는 사각형 만들기

  1. new file-save(index0707-2.html), save(style0707-2.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style0707-2.css">
</head>
<body>

</body>
</html>
  1. <div class="move-box"></div> <div>태그로 영역을 만들고 class를 설정한다.
  2. CSS언어로 디자인!
    4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    4-2. ".move-box { position: relative; width: 200px; height: 200px; background-color: darkred; animation-name: moveBox; animation-duration: 4s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate;}" 으로 영역의 너비와 색깔, 위치속성을 설정하고 어떤 효과를 적용할 것인지 설정한다.
    4-3. "@keyframes moveBox {
    0% {background-color: red; left: 0; top: 0;}
    25% {background-color: yellow; left: 500px; top: 0px;}
    50% {background-color: gray; left: 500px; top: 500px;}
    75% {background-color: green; left: 0px; top: 500px;}
    100% {background-color: red; left: 0px; top: 0px;}
    }
    "으로 background-color의 변화와 위치 변화를 설정한다.

슈퍼마리오 동전 효과 만들어보기

  1. new file-save(index0707-2.html), save(style0707-2.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style0707-2.css">
</head>
<body>

</body>
</html>
  1. <div class="move-box"></div> <div>태그로 영역을 만들고 class를 설정한다.
<div class="mario-container">
		<div class="mario-coin"></div>
		<div class="mario-box"></div>
	</div>
  1. CSS언어로 디자인!
    4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    4-2. ".mario-container { position: relative; width: 500px; height: 500px; border: solid 10px black; margin: 0 auto; margin-top: 200px; }" 으로 동전과 상자를 나타낼 영역을 표현한다.
    4-3. ".mario-container .mario-coin { position: relative;
    width: 70px; height: 70px; background-color: yellow;
    margin: 0 auto; margin-top: 100px;
    border-radius: 50%;
    animation: jumpCoin 0.8s linear infinite; }" 으로 마리오 코인이 4-2에 설정한 영역에 속하도록 설정하고 크기와 색,위치를 설정한다. 또 border-radius:50%로 설정해 원으로 표현하고 적용할 animation의 이름을 jumpCoin이라고 설정하고 0.8초동안 효과가 일정하게 무한으로 적용되도록 설정한다.
    4-4. "@keyframes jumpCoin {
    0%{ transform: translate(0); opacity: 1;}
    50%{ transform: translateY(-100px) rotateY(180deg); opacity: 0; }
    100%{ transform: translateY(-100px) rotateY(360deg); opacity: 0;}
    }" 으로 동전에 대한 애니메이션 효과를 상세히 설정한다. 처음에는 설정한 위치에 있다가 시간이 지나면서 위로 올라가도록 transform: translateY()로 설정한다. 또 회전하면서 사라지는 효과를 적용하기 위해 rotateY()와 opacity를 이용해 표현한다.
    4-6. ".mario-container .mario-box { width: 100px; height: 100px; background-color: blue; margin: 0 auto;
    animation: jumpBox 0.5s linear infinite; alternate; }"으로 마리오 코인이 들어있는 상자를 표현한다. 크기를 설정하고 색과 위치를 설정한다. 적용할 애니메이션 이름은 jumpBox로 정하고 효과가 0.5초동안 일정한 속도로 무한하게 왔다갔다하면서 적용되도록 설정한다.
    4-7. "@keyframes jumpBox {
    0%{ transform: translate(0px); }
    50%{ transform: translateY(-10px); }
    100%{ transform: translateY(10px); }
    }" 으로 상자가 살짝 위로 뜨는 것을 표현하기 위해 transform: trnaslateY()로 설정한다.

이미지에 마우스커서를 갖다댔을때 이미지가 확대되는 효과 만들어보기

  1. 2.는 앞의 1. 2.와 동일함
  2. <div>태그로 영역을 만들고 class를 설정한다. 안에 삽입할 이미지를 <img>태그로 설정하고 그림에 대한 설명을 할 <div>태그를 설정한다. 그 태그 안에 <h2>,<p>태그로 설명을 입력한다.
	<div class="hover-image">
		<img src="#">

		<div class="image-info">
			<h2>Title</h2>
			<p>paragraph</p>
		</div>
	</div>
  1. CSS언어로 디자인!
    4-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
    4-2. ".hover-image {cursor: pointer; overflow: hidden; position: relative; width: 400px; border: solid 10px #000000;}" 으로 이미지영역에 마우스 커서를 갖다댔을때 커서의 모양이 포인터로 바뀌고 이미지가 커졌을때 영역밖으로 나가지 않게 overflow: hidden;으로 설정한다. position은 relative로 설정해 속한 태그들이 설정값을 영향받을 수 있도록 하고 크기와 테두리를 디자인한다.
    4-3. ".hover-image img {width: 100%; vertical-align: middle; transition: transform 1s linear;}" 으로 이미지의 크기를 부모태그의 영역에 맞춰 설정하고 태그의 기본값으로 설정된 공백을 지운다.(vertical-align->img태그의 공백을 지울때도 사용) 또, 적용한 애니메이션 효과가 자연스럽게 표현되도록 transition으로 입력한다.
    4-4. ".hover-image:hover img {transform: scale(1.3);}" 이미지에 마우스커서를 갖다댔을 때 이미지가 커지도록 설정한다.
    4-5. ".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: 0;}" 박스의 사이즈가 border-box가 되도록 설정하고 크기또한 부모태그의 크기를 따르도록 설정한다. 배경색을 설정하고 패딩값과 위치를 설정한다.
    4-6. ".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;}" title, paragraph 태그의 margin, padding 값을 없애고 글자색,크기를 설정한다.

무엇이 어려웠지?

점심을 먹고 슈퍼마리오 동전만들기를 해보는데 졸음과 싸우다 보니 수업을 들으면서 코딩을 했던게 다 틀렸다. 처음에 적용한걸 확인해봤을 때 움직이는 검은 영역안에 노란 동그라미와 파란 상자가 나와야하는데 그냥 노란 상자 하나만 덩그러니 있었다. 그랬을 때 당황스러움이란..

어떻게 해결했지?

알고보니 모든 코드에 하나씩 다 오탈자가 있었던것, ;을 빠뜨린경우가 굉장히 많았다. 노란 동그라미를 만드는것도 border-radius: 50%라고만 입력을 해서 적용이 되지 않았었다. 또 파란 상자가 나오지 않았던것은 정확한 name을 적지 않았고, 검은 큰 영역이 없었던건 border의 px에서 ox라고 오탈자를 적었던것.. 이외에도 조금더 실수가 많아서 6번정도 다시 고치고 확인했다...

그래서?

오늘은 이번주 중에 가장 양으로나 개념으로나 어려운 수업이 아니었나 생각이 든다. 정말... 쉽지 않다... 점점 배우면 배울수록 배웠는데 왜 모르지 하는 자괴감이 든다. 그리고 선생님이 하라고 한대로 했는데 안될때 마다 문득문득 소리지르고 싶어진다... 물론 내 손가락 잘못, 내 눈 잘못, 내 뇌 잘못이긴 한데.. 코딩할때 오탈자를 절.대. 안내는 그런 초능력이 있었으면 좋겠다.

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0707

profile
정혜리
.
이전 포스트

2021.07.06 CSS-5

다음 포스트

2021.07.08 CSS-7

0개의 댓글