[CSS] 애니메이션 관련 스타일 속성 / 반응형 웹디자인

애니메이션 관련 스타일 속성

animation은 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes로 구성되어 있다.

@keyframes 
: 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성 
→ 상태(백분율 또는 키워드 - from, to)에 따른 CSS 스타일을 정의하여 애니메이션 효과를 제공할 수 있다.
→ 반드시 시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태를 작성해주어야 한다.

/* 시작상태 */
	from {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}
/* 종료상태 */
	to {
		top: 0;
		left: 600px;
		background: url("images/f2.png") no-repeat center;
	}

 animation-name
: 박스모델에 적용될 애니메이션의 이름을 속성값으로 설정

animation-duration
: 박스모델에 적용될 애니메이션의 지속시간을 속성값으로 설정 

animation-iteration-count
: 박스모델에 적용될 애니메이션의 반복 횟수를 속성값으로 설정 
→ 속성값 : 정수 또는 infinite(무제한) 

animation-direction
: 박스모델에 적용될 애니메이션의 진행 방향을 속성값으로 설정 
→ 속성값 : normal(정방향 - 기본값), reverse(역방향), alternate(정방향 -> 역방향), alternate-reverse(역방향 -> 정방향) 

---

반응형 웹디자인(Responsive Web Design)

: 장치 또는 해상도에 따라 다른 스타일의 페이지를 제공하기 위한 웹디자인 기법
디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다.


장치의 폭 또는 브라우저의 해상도가 다르기 때문에 출력에 대한 이상현상이 발생될 수 있다. 
meta 태그의 name 속성값을 이용해 veiwport를 설정해주면, 스마트기기의 해상도에 맞게 태그내용이 출력된다. 
또한 content 속성값으로 장치에 대한 폭과 높이를 확대 또는 축소 설정이 가능하다.

<!-- meta 태그의 name 속성값을 이용해 veiwport를 설정하고 content 속성값으로 확대 및 축소를 설정-->
<meta name="viewport" content="width=device-width">

content="width=device-width"
: 웹 페이지의 크기가 모니터의 실제 크기를 따라가도록 만든 설정으로 모니터, 스마트폰 등의 화면에 맞는 비율로 화면이 뜨도록 돕는다.

반응형 웹디자인 구현을 위해서 유동성 구조로 박스모델을 설정한다. 

/* 크기 단위를 px 대신 % 또는 em을 사용하는 것을 권장한다. */ 
#container { 
	width: 80%;
	margin: 0 auto;
}

미디어쿼리(Media Query)

@media 
: 장치 또는 해상도에 따라 다른 CSS 스타일을 적용하기 위한 시스템 속성

형식 ) @media 장치 [and 조건] [and 조건] ... { 선택자 {속성: 속성값; ...} ... }

 

장치 : all, screen, print, tv, aural, braille(점자) 등

@media screen and (max-width:360px) {
	body {
		background: yellow;
	}
}

@media screen and (min-width:361px) and (max-width:768px) {
	body {
		background: orange;
	}
}

@media screen and (min-width:769px) and (max-width:1024px) {
	body {
		background: olive;
	}
}

모니터의 해상도에 따라 body의 색이 다르게 출력된다. (반응형)