변형과 transform 속성

변형이란, 요소의 크기나 위치를 바꾸는 것을 뜻함
이때 크기나 위치는 요소의 x축과 y축을 기준으로 바뀜

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

transition 속성을 이용한 변화

• transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태의 변형임. transition 속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화시킬 수 있음


• transition은 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과르 만들 수 있음


• transition속성은 단축 속성으로, 변화를 주고자 하는 속성이나 실행 시간, 실행 방법, 그리고 지연 시간 등에 대한 정보를 포함할 수 있음

transition 하위 속성

접미사	설명
-property	변화 대상 속성 지정
-duration	변화가 실행될 시간 지정
-delay	변화 시작 전 지연시간 지정
-timing-function	변화 실행시 실행 곡선 방식 지정

trasition-timing-function

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

---

애니메이션 효과

애니메이션 사전적 정의 - 움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영기법 또는 그렇게 만들어진 영화

CSS는 웹페이지 상에 표시되는 콘텐츠가 TV애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation 속성 지원

@keyframes

애니메이션을 표현하는 여러 개의 프레임은 @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	애니메이션 적용 여부

.ball{
  animation-name: moving;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  
  /*한줄완성코드*/
  animation: moving 2s 0s linear infinite alternate;
}

@keyframes moving{
  from{left:30px;}
  to{left:120px;}
}

---

상속과 공용키워드

상속(Inheritance)

하위 요소가 상위 요소의 스타일 속성값을 물려받는 것

상속 여부 속성

상속 된다	상속 안 된다
color, font-family, font-size, font-weight, text-align, cursor 등	background-color, background-image, background-repeat, border, display 등

상속확인 사이트

공용 키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, CSS에서는 스타일 속성의 상속 여부를 제어할 수 있는 3개의 키워드를 별도로 지원함

이들은 모든 속성에 적용할 수 있는 키워드로 '공용키워드' 또는 '전역키워드'라 부르기도 함

키워드	의미
inherit	상위 요소로부터 해당 속성의 값을 받아 사용
initial	(브라우저에 지정되어 있는)해당 속성의 기본값을 요소에 적용
unset	상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용

---

반응형 웹과 뷰포트 단위

반응형 웹

다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법

뷰포트

현재 화면에 보여지고 있는 영역

기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타남

뷰포트 설정 < meta >

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

화면 크기에 반응하는 단위

단위	설명
vw	뷰포트 너비의 100분의 1
vh	뷰포트 높이의 100분의 1
vmin	뷰포트 너비와 높이 중 작은 쪽의 100분의 1
vmax	뷰포트 너비와 높이 중 큰 쪽의 100분의 1

작업이 까다로워질 위험도 있으므로 꼭 필요할 때만 적절히 사용!

---

미디어 쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)

모든 미디어 쿼리는 두가지 구성요소를 지니고 있음

• 미디어 타입
• 조건에 대한 물음(쿼리)

@media 미디어_타입 and (조건에_대한_물음) {
  /*
  미디어 타입과 조건을
  모두 만족할 때 덮어씌울
  스타일 선언문
  */
}

@media screen and (max-width: 768px) {
  /*
  화면(screen)의
  너비가 768px 이하일 경우에
  여기에 정의된 스타일 선언문을
  추가 적용할 것이다
  */
}

미디어 쿼리 종류

속성명	정의	속성명	정의
mid-width	디스플레이 영역의 최소 너비	orientation	portrait 또는 landscape 감지
max-width	디스플레이 영역의 최대 너비	color	기기의 색상당 비트 수
min-height	디스플레이 영역의 최소 높이	color-index	출력 기기의 색상 테이블 수
max-height	디스플레이 영역의 최대 높이	aspect-ratio	디스플레이 영역의 너비와 높이의 비율

---

모듈화 디자인

반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 해도 과언이 아님

웹 개발에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻함

컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아짐

모듈화 디자인의 이점

• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 됨
• 스타일 재사용이 용이함. 필요한 경우 추가 스타일을 적용하면 됨
• 페이지의 일관성 유지 용이