CSS 더 화려하고 효율적으로 만들기

18.변형과 전환

transform

css의 transform 속성을 통해 요소의 크기나 위치를 변형시킬 수 있다

함수	설명
translate(x,y)	지정한 값만큼 x축, y축 방향으로 이동
scale(x,y)	x축, y축으로 몇 배 확대, 축소 할 것인지
skew(deg)	지정한 각도만큼 x축, y축으로 비틀어 왜곡
rotate(deg)	지정한 각도만큼 회전

transition

css의 transition 속성은 원래 요소에 지정되어 있는 스타일을 완전히 다른 스타일로 변화시킬 수 있음
단축 속성으로, 변화를 주고자 하는 속성이나 실행 시간, 실행 방법, 그리고 지연 시간등도 설정할 수 있음

접미사	설명
-property	어떤 속성을 바꿀 것인지
-duration	변화가 실행될 시간
-delay	변화가 시작되기 전 지연 시간
-timing-function	변화가 실행되는 동안의 속도를 어떻게 제어할 지

transition-timing-function

transition에 의한 변화가 실행될 시간(duration)을 지정해 원하는 시간 동안 변화가 일어나게 할 수 있는데, 여기에 transition-timing-function-속성을 추가하여 실행 시간 동안의 속도 변화 방식을 지정할 수 있음

• ease: 기본값, 점점 속도가 빨라지다가 끝날 때 다시 느려지는 방식
• linear: 처음부터 끝까지 같은 속도로 진행됨
• ease-in: 느리게 시작했다가 점점 빨라짐
• ease-out: 빠르게 시작했다가 점점 느려짐

19. 애니메이션 효과

css의 @keyframes 모듈과 animation 속성을 이용해 콘텐츠의 동적 움직임을 구현할 수 있음

@keyframes

애니메이션을 표현하는 프레임은 백분율을 이용해 나누거나, 별도의 키워드로 간단하게 나눌 수 있음

예시)

@keyframes 애니메이션_이름{
	from{ width: 100px; }
    to{ width: 200px; }
}

@keyframes 애니메이션_이름{
	0%{ width: 100px; }
    33%{ width: 133px; }
    66%{ width: 166px; }
    100%{ width: 200px; }
}

애니메이션

animation은 단축 속성이며, 하위 속성들을 지정하면 실행시간이나 방식등을 추가로 정의할 수 있음

접미사	설명	접미사	설명
-name	적용할 키프레임 이름, 무조건 있어야함	-direction	동작 진행 방향
-duration	애니메이션 지속 시간	-iteration-count	반복 횟수
-delay	시작되기 전 지연 시간	-fill-mode	전후 상태 설정, 처음 상태로 돌아갈 건지 끝난 상태로 있을 건지
-timing-function	속도 조절 그래프	-play-state	애니메이션 적용 여부

-iteration-count

• infinite: 무한 반복

-direction

• normal: 정방향
• reverse: 역방향
• alternate: 정방향과 역방향을 번갈아 실행

-play-state

• running: 실행
• paused: 멈춤

20. 상속과 공용키워드

상속

상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것
e.g., ul의 속성값이 li에도 적용이 됨

상위 요소로부터 상속이 되는 속성과 안되는 속성

• 상속 되는 속성:
  color, font-family, font-size, font-weight, text-align, cursor 등

• 상속 안되는 속성:
  background-color, background-image, background-repeat, border, display 등

공용 키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, css에는 상속 여부를 제어할 수 있는 키워드가 있음
이들은 모든 속성에 적용할 수 있는 키워드이므로 '공용 키워드' 혹은 '전역 키워드'라 부름

키워드	의미
inherit	상위 요소로부터 해당 속성 값을 강제로 상속 받도록 함
inital	상속 받지 않고 해당 속성의 기본값을 적용
unset	상위 요소로부터 상속 받을 값이 있으면 inherit, 상속 받을 값이 없으면 initial처럼 적용

21. 반응형 웹과 뷰포트 단위

뷰포트

뷰포트란 현재 화면에 보여지고 있는 영역
기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면이 크기가 다르게 보임

뷰포트 설정하기

meta 태그에 아래와 같이 설정하면 기기의 크기에 맞춰 웹페이지 요소 크기를 조정해줌

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

뷰포트 기반 단위

• vw: 뷰포트 너비의 100분의 1
• vh: 뷰포트 높이의 100분의 1
• vmin: 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
• vmax: 뷰포트 너비와 높이 중 큰 쪽의 100분의 1

22. 미디어 쿼리

@media 미디어_타입 and (쿼리: 화면의 크기, 배율 등){
	/* 미디어 타입과 조건을 모두 만족할 때
    덮어씌울 스타일 선언문 */
}

플렉스박스 레이아웃

flexbox

행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식

• 플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소
• 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소

display: inline-flex;
플렉스 컨테이너를 인라인 레벨 요소로 설정

flexbox 주요 속성들

• flex-flow: flex-direction과 flex-wrap의 단축 속성
• flex-grow: 여백이 남는 상태에서 flex-grow의 상대값 만큼 아이템들의 크기가 커질 수 있음 (기본값: 0)
• flex-shrink: 공간이 부족할때 아이템이 찌그러질 수 있음 (기본값: 1)
• flex-basis: flex 아이템은 콘텐츠가 차지하는 만큼만 크기를 가짐, flex-basis를 주면 flex 아이템의 기본 크기값을 지정할 수 있음
• flex: flex-grow, flex-shrink, flex-basis의 단축 속성

플렉스 아이템은 플렉스 컨네이너가 아니기 때문에 플렉스 아이템 안의 요소들은 플렉스의 레이아웃을 따르지 않음