웹 사이트 생동감

CSS3 에는 Transform, Transition, Animation이 있다.

Transform

특정 영역을 각도, 크기 위치를 변경함

1. .rotate(각도)
   각도는 45deg 처럼 deg를 붙여 입력한다.
   입력한 각도만큼 회전. 음수도 가능함
   평면적 회전을 위함

2. .scale(2,3)
   확대, 축소에 영향. 비율로 키우기
   width를 2배로, height를 3배로
   축소시 소수점 이용

3. .skew(x,y)
   입력한 각도만큼 비튼다

4. .translate(x,y)
   좌표(위치) 변경
   prefix를 통해 모든 브라우저에 이용되게끔 함

Transition

자연스러운 변화 혹은 변화하는 것을 보여주고자 할 때

1. .property: width
   효과를 적용하고자하는 css 속성
   모두 적용하고 싶을 때는 all을 기입

2. .duration:2s
   효과 나타나는데 걸리는 시간. 소요시간.

3. .timing-function:linear
   효과의 속도. 속도 값에 영향을 미침

4. .delay:1s
   특정 조건 하에서 효과 발동. 1초 후 효과 발동

➡️ 한 줄로 작성 가능
숫자가 하나면 duration, 여러 개면 앞이 duration

가상 선택자 hover

css가 미리 만들어놓은 클래스
'마우스를 올렸을 때' transition을 통해 효과 발휘 됨

Animation

1. name
   내가 만들 애니메이션 이름 정의. 임의로 작성 가능

2. duration
   총 소요되는 시간

3. timing-function
   속도 곡선을 제어하는 애니 속성

4. delay
   지연시간

5. interaction-count
   에니메이셔 반복 횟수. 숫자 기입

6. direction
   애니메이션 진행 방향

   • normal : from > to
   • reverse : to > from
   • alternate : from > to > from
     반복효과

@keyframes name{
  from { width:300px;}
  to { width:600px;}
}

애니메이션 이름을 통해 결과를 지정함

• prefix를 적용하면 일관되게 모두 적용해야 함

모바일에 대응되는 웹사이트

미디어쿼리

pc+ 모바일, 태블리셍도 대응되는 웹사이트 개발
모바일에 대응되는 반응형, 적응형 웹사이트를 만들 때 사용되는 css 구문

@media (min-width:300px) and (max-width:800px) {
}

조건 안에 들면 안쪽 css를 적용한다.

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

디지털 기기의 화면 상에 표시되는 영역을 의미. 너비와 배율을 설정시 사용하는 메타 태그이다. html>head에 작성돼야 한다.
viewport : 기기화면, 이것으로 너비, 배율을 설정해야 모바일 device에서 의도한 화면을 볼 수 있다. 화면 상에 표시되는 영역을 뜻함
width=deivice-width: 디바이스 가로폭
initial-scale=1.0: 1.0 비율로
➡️ 구체적인 너비와 배율 설정