수업 4일차
한주를 마무리 하기전 정신력이 떨어져가는 날이다.
실습 내용은 엘리스의 과제여서 아주 쉬운 것으로 대신 탑재한다.
이론
- CSS
Transform : 웹사이트의 특정 영역에서 오브젝트의 각도, 위치 변경
rotate : 입력한 각도만큼 회전, 음수도 입력가능
scale : 확대, 축소, 숫자는 비율을 의미
skew : 입체적으로 각도를 비틀때 사용
translate : 선택한 오브젝트의 좌표 변경(위치 변경)
prefix 접두사 : CSS 최신버전 내용이여서 다른버전의 브라우저에서의 실행을 원할경우 작성
webkit(크롬, 사파리), moz(파이어폭스), ms(익스플로러), o(오페라)
Transition : 변화하는 과정을 보여주는것
transition-property : 효과를 적용하고자 하는 css 속성
transition-duration : 효과가 나타나는데 걸리는 시간
transition-timing-function : 효과의 속도, linear(일정하게)
transition-delay : 특정 조건 하에서 효과 발동(1s : 1초뒤에 효과 시작)
hover : css에서 미리 만들어 놓은 클래스, '마우스를 올렸을 때' 라는 조건
transition : width 2s(duration) linear 1s(delay) - 먼저 나오는 숫자는 duration 두번째 delay
Animation : 시각적 효과를 만들때 사용
animation-name : 만드는 애니메이션 이름 정의
animation-duration : 애니메이션이 동작하는데 걸리는 시간
animation-timing-function : 효과의 속도
animation-delay : 애니메이션이 특정 조건 하에서 효과 발동
animation-iteration-count : 애니메이션 반복 횟수
animation-direction : 애니메이션 진행 방향
alternate : from -> to -> from
normal : from -> to, from -> to
reverse : to -> from, to -> from
@keyframes : 변화를 줄 결과값을 입력
미디어쿼리 : pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 사용되는 구문
min- width,max-width : 브라우저 가로폭 설정
viewport : 미디어 쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 너비와 배율을 설정해야함
실습
keyframes를 적용 하여 우로 10도 좌로 10도 왕복하는 이미지 완성
```
Document ```<!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>
.box1 {
width: 300px;
height: 300px;
background-color: red;
animation: rotation 1500ms linear infinite alternate;
}
@keyframes rotation {
from {
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html> 
브라우저 너비가 320px 이상 800px 이하일때
media를 사용하여 변경한다
```
Document ```<!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>
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 100px;
height: 100px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="media"></div>
</body>
</html>
코린이 입니당 :)