[엘리스sw] 1주차 3일 - CSS 애니메이션, 반응형 웹

---

◆ 움직이는 웹사이트 제작
◆ 반응형 웹사이트 제작

---

◆ 움직이는 웹사이트 제작

CSS3에 등장한 속성 = Transform, Transition, Animation

 

Transform

특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용

transform 속성은 순서대로 적용되는 것이 아니라, 가장 마지막에 적용된 속성만 적용되는 특성임.

→ 만약 모든 transform 속성을 적용하려면 여러 개의 transform 속성을 한 줄에 모두 적기

<style>
    .my-element {
        transform: translateX(50px) rotate(45deg) scale(1.5);
    }
</style>

 

• rotate(45deg); 평면회전, 입력한 각도만큼 회전, 음수도 입력 가능 (-45deg)

• scale(2, 3); 비율만큼 확대, 숫자는 비율을 의미, width를 2배, height를 3배 확대

<style>
	.transition {
	transform: rotate(45deg);  /* 회전 */
	transform: scale(2, 3);  /* 확대 축소 */
	}
</style>

 

• skew(10deg, 20deg); x축, y축을 기준으로 입력한 각도만큼 비틃

• translate(100px, 200px); 선택한 오브젝트의 좌표 변경

<style>
	.transition {
    transform: skew(10deg, 20deg);  /* 각도 변경 */
    transform: translate(100px, 200px);  /* 위치 변경 */
    }
</style>

 

prefix 접두사 

다른 브라우저에서 실행을 원할 경우

Transform은 CSS의 최신 버전에서만 실행 가능한 키워드이지만, prefix를 추가하면 하위 버전의 브라우저에서도 실행 가능

<style>
	.transition {
    -webkit-transform: translate(100px, 200px);  /*크롬, 사파리*/
    -moz-transform: translate(100px, 200px);  /*파이어폭스*/
    -ms-transform: translate(100px, 200px);  /*익스플로러 9.0*/
    -o-transform: translate(100px, 200px);  /*오페라*/
</style>

 

prefix 작성 시 유의사항

100ms = 1s

앞에 prefix가 똑같은 것끼리 되야 됨. → transform 앞에 webkit을 붙여줘야 함.

.box1 {
	-webkit-animation: rotation 1500ms linear infinite alternate;
}


@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(-10deg); }
	to { -webkit-transform: rotate(10deg); }
}

---

Transition

변화하는 과정을 보여주고 싶을 때, 자연스러운 변화의 효과 연출

•  property : 효과를 적용하고자 하는 css 속성

•  duration : 효과가 나타나는데 걸리는 시간

•  tirming-function : 효과의 속도, linear은 '일정하게'라는 의미

•  delay : 특정 조건 하에서 효과 발동, 1s는 '1초 후'라는 의미

<style>
	.transiton {
    transition-property: width;
    transition-duration: 2s;  /* 2초*/
    transition-timing-function: linear;
    transition-delay: 1s;
    }
</style>

 

•  가상 선택자 : hover

CSS에서 미리 만들어놓은 클래스 '마우스를 올렸을 때'라는 조건

<style>
	.transition: hover { width: 300px; }
</style>

 

• 효과적인 transition 사용 방법

<style>
	.transition {
    transition: width 2s linear 1s;  /* 2초동안, 1초 후*/
    }
    
    .transition: hover { width: 300px; }
</style>

마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안 일정한 속도로 변하는 효과

앞에 나오는 숫자가 duration, 뒤에 나오는 숫자가 delay

숫자 1개인 경우 duration

---

Animation

• .iteration-count : 애니메이션 반복 횟수

• .direction : 애니메이션 진행 방향

- alternate : from → to → from

- normal : from → to, from → to

- reverse : to → from, to → from

.animation {
	animation-name: changeWidth;  /* 임의로 작성 */
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alterante;  /* 진행방향 */
}

@keyframes changeWidth {
	from { width: 300px; } /* 시작 */
    to { width: 600px; } /* 끝 */
}

 

메뉴 영역 애니메이션 

→ hover 가상선택자 이용

 

메뉴 영역에 마우스를 올렸을 때 글자 색이 변하는 효과

#intro nav ul li a {
	transition: color 1s;
}

#intro nav ul li a: hover {
	color: #917f7f;
}

 

본문 영역에 마우스를 올렸을 때 

 

배경색이 달라지는 효과

#main article.one {
	transition: background-color 1s;
}

#main article.one: hover {
	background-color: #8683bd;
}

 

이미지가 커지는 효과

#main article img {
	transition: all 1s;
}

#main article img: hover {
	transform: scale(1.1);
}

---

◆ 반응형 웹사이트 제작

미디어쿼리

모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 사용함.
· 반응형 : 브라우저 크기를 줄이거나 늘렸을 때 효과가 자연스럽게 나타나는 사이트
· 적응형 : 브라우저 크기를 줄이거나 늘렸을 때 효과가 자연스럽지 않은 사이트

 

미디어쿼리는 '@media (min-width: 320px) and (max-width: 800px)' 이 범위 자체임.
어느 기기로 접속했는지는 기기의 가로폭 사이즈로 유추할 수 있음.

.media {
	width: 500px;
	height: 500px;
	background-color: red;
}

@media (min-width: 320px) and (max-width: 800px) {
	.media {
		width: 300px;
		height: 300px:
		background-color: yellow;
	}
}

미디어쿼리의 기능은 min-width와 max-width로 브라우저 가로폭 설정
브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미

 

미디어쿼리가 정상적으로 출력이 되는지 확인하는 방법

- 크롬 개발자도구에 접속하여 모바일 화면 확인
- 더 정확한 방법은 태블릿이나 스마트폰으로 확인

저 버튼 누르면 모바일로 출력됨

 

---

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

viewport

· 'name="viewport"'가 없으면 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있음.

· viewport로 너비와 배열을 설정해야 모바일 디바이스에서 의도한 화면이 보임.

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

 

.width=device-width : viewport의 가로폭 = 디바이스의 가로폭

.initial-scale=1.0 : 비율은 항상 1.0

 

CSS 속성 상속

· 미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음

· 상속을 받고자 하면 'inherit'을, 상속을 받지 않고자 하면 속성값으로 디폴트 값(none, initial)을 입력한다.

  (강의에는 'none'을 입력하라고 했는데, 그건 none이라는 속성값이 유효한 속성에만 해당됨.)

    body {
      font-size: 16px;
    }

    @media (min-width: 600px) {
      body {
        font-size: inherit;
      }
    }

  <style>
    p {
      color: red;
      font-style: italic;
      font-size: 150px; /* 미디어쿼리 바깥 */
    }

    @media (min-width: 300px) and (max-width: 800px) {
      p {
        color: rgb(204, 214, 204);
        font-style: initial;
        font-size: initial; /* 미디어쿼리 내부 */
      }
    }
  </style>

font-style, font-size와 같은 속성은 'none'으로 입력하면 인식이 안 됨.

'initial'이라는 속성값을 입력해주어야 상속이 안 된 상태의 디폴트로 나옴.