오늘 수업은 어제 배운 개념들을 복습하는 느낌이었다!!
어제 배웠지만 새롭게 알게된 부분이나 헷갈렸던 부분들을 필기했다.

Animation

---

.animation{
	animation-name: changeWidth;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-delay:3s;
    animation-iteration-count:6;
    animation-direction: alternate;
}
    
@keyframes changeWidth{
	from {width: 300px;}
    to{width:800px;}
}

animation-delay: 애니메이션이 시작하기 전 딜레이할 시간을 설정하는 속성
animation-timing-function:애니메이션 속도 곡선을 제어하는 속성
animation-duration:애니메이션이 샐행되는 시간을 설정하는 속성
animation-iteration-count:애니메이션이 재생되는 횟수를 제한하는 속성
animation-direction: animation 진행 방향

• alternate: from --> to --> from
• normal: from --> to
• reverse: to --> from

미디어쿼리

---

pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 css 구문

• 반응형: 적응형에 비해 비교적 자연스러운 변화
• 적응형: 브라우저 크기가 줄어들면서 달라지는 폰트 크기나 사이즈들이 뚝뚝 끊어지면서 변화

미디어 쿼리 확인 방법

미디어 쿼리가 정상적으로 출력되는지 확인하는 방법
1. 크롬 개발자 도구
2. 다음 troy labs
다음에서 만든 서비스인 troy labs는 처음 접하게 되었는데 troy labs는 결과물이 서버에 등록되어 있어 url주소를 넣어야 한다고 한다.

미디어 쿼리 사용 시 주의사항

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어 쿼리가 제대로 작동하지 않는 문제가 발생할 수도 있기 때문에 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음!!
viewport : 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하며, 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나이다.
content

• width=device-width
  view port의 가로폭 = 디바이스의 가로폭
• initial-scale=1.0
  비율은 항상 1.0
  

css 속성 상속

미디어쿼리 외부 영역에 있는 css 속성을 상속 받음.
미디어쿼리 내부에 외부에 있는 속성을 따로 작성하지 않으면 외부 영역의 속성을 그대로 상속받게 됨!