7월 11일_CSS(트랜지션 속성, 기능, 반응형 웹, 미디어쿼리)

# 트랜지션 속성

transition	요소에 적용할 모든 트랜지션 속성을 지정	property duration timing-function delay
transition-property	트랜지션을 적용할 CSS 속성 지정	all, width, opacity
ransition-duration	트랜지션의 지속 시간 설정	0.3s, 1s, 1000ms
transition-timing-function	트랜지션의 타이밍 함수 설정	ease, linear, ease-in-out
transition-delay	트랜지션의 지연 시간 설정	0.2s, 500ms

 

# transition-timing-function 함수의 기능

ease	기본값입니다. 천천히 시작하여 중간에 빨라지고 끝에서 천천히 줄어듭니다.
linear	시작부터 끝까지 일정한 속도로 움직입니다.
ease-in	천천히 시작하여 끝에서 빠르게 줄어듭니다.
ease-out	빠르게 시작하여 끝에서 천천히 줄어듭니다.
ease-in-out	천천히 시작하여 중간에 빨라지고 다시 천천히 줄어듭니다.
cubic-bezier	사용자 정의 베지어 곡선을 통해 시간에 따른 속도를 조절할 수 있습니다.
steps(n, start/end)	시간을 일정 간격으로 나누어 특정 시점에서 즉시 상태를 변경합니다.
initial	기본값으로 설정합니다.
inherit	부모 요소에서 상속받은 값을 설정합니다.

 

---

# 반응형 웹 & 미디어 쿼리

 

반응형 웹이란?

• 웹사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법
• 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어줌

뷰포트?

• 실제 내용이 표시되는 영역

뷰포트 단위

• vw : 너비의 1%
• vh : 높이의 1%
• vmin : 너비와 높이 중 작은 값
• vmax : 너비와 높이 중 큰 값

미디어 쿼리

• 접속하는 장치(미디어)에 따라 특정한 CSS스타일을 사용하는 방법
• @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정
• 중단점 (breakpoint) : 서로 다른 CSS를 적용할 화면 크기