04-1 콘텐츠 모양을 자유롭게 변형하기

속성명	속성값	설명
transform(2D)	scale	선택한 요소의 크기를 확대·축소. 현재 크기의 비율을 기준으로 1보다 크면 확대, 1보다 작으면 축소
	skew	선택한 요소를 x축 또는 y축으로 비틀어서 변형. 원하는 각도를 지정하여 기울기 조절
	translate	선택한 요소를 현재 위치 기준에서 ㅌ축 또는 y축으로 이동
	rotate	선택한 요소를 회전. 원하는 각도를 지정하여 회전
transform(3D)	rotateX, rotateY	선택한 요소를 x축 또는 y축으로 입체감 있게 회전
	translateZ	선택한 요소를 z축으로 입체감 있게 보이면서 이동
perspective	px	3D효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 perspective 속성을 적용하여 원근감 부여
transform-style	preserve-3d	3D효과가 적용된 요소에 모션처리를 하면 해당3D효과가 풀리는데, 이때 부모 요소에 preserve-3d 속성을 적용하여 3D효과를 유지시킬 수 있다.
transform-origin	가로축, 세로축	요소 변형이 일어나는 중심축을 가로축, 세로축 기준으로 변경 가능

04-2 사용자 행동에 반응하는 전환 효과 만들기

속성명	속성값	설명
transition-property	속성명	전환 효과를 줄 CSS 속성명을 지정. 속성명은 여러 개 지정할 수 있고, all을 입력하면 전체 속성 사용 가능
transition-duration	지속시간(초)	전환 효과가 발생할 때 지속시간을 나타냄. 지속시간은 초(s) 단위로 지정
transition-delay	지연시간(초)	전환 효과가 발생할 때 지연시간을 나타냄. 지연시간은 초(s) 단위로 지정, 이 속성을 사용하면 지연 시간 이후 전환 효과가 나타남
transition-timing-function	가속도	전환 효과의 가속도를 나타냄. 가속도 효과는 다음의 키워드를 입력하여 적용 linear: 등속 효과 ease: 가속효과 ease-in: 모션 시작 시 가속 ease-out: 모션 종료 시 가속 ease-in-out: 모션 시작, 종료 시 모두 가속 cubic-bezier: 사용자가 지정한 가속 효과 적용
transition	속성명 / 전환시간 / 가속도 / 지연 시간	모든 전환 효과 관련 속성값을 한꺼번에 축약해서 사용 가능

cubic-bezier 웹 사이트를 활용하면 복잡한 연산과정없이 가속도 구문을 쉽게 만들 수 있다.

04-3 자동으로 움직이는 애니메이션 효과 만들기

속성명	속성값	설명
@keyframes	애니메이션 세트 지정	애니메이션의 시작과 끝을 등록하여 사용자 모션을 등록. 0%는 시작 지점, 100%는 끝 지점, 중간 지점 여러 개 추가 가능.
animation-name	이름	키프레임으로 등록한 모션의 이름을 호출
animation-duration	지속 시간(초)	키프레임 모션 한 세트를 얼마동안 동작하게 할지 초 단위로 등록
animation-timing-function	가속도	키프레임 모션을 실행할 때 가속도를 설정. 사용방법은 trasition과 같음
animation-iteration-count	횟수	키프레임 모션 한 세트가 몇 번 동작하는지 횟수를 숫자로 설정. 무한 반복은 infinite 지정
animation-delay	지연 시간(초)	키 프레임 모션을 실행할 때 지연 시간을 지정
animation-play-state	running/paused	키 프레임 모션을 실행할 때 동작 상태를 지정. running은 모션 그대로 진행, paused는 일시정지
animation	이름 / 진행시간 / 가속도 / 지연 시간 / 반복 횟수	키프레임으로 등록한 모션의 이름을 호출

04-4 벡터 이미지 파일 제어하기

비트맵 이미지와 벡터 이미지의 차이

비트맵 이미지	벡터 이미지
수많은 픽셀을 조합해 이미지를 출력	좌푯값을 연결하여 이미지를 출력
확대하면 이미지 품질이 떨어짐	확대해도 이미지 품질이 떨어지지 않음
파일 용량이 큼	비트맵 이미지보다 파일 용량이 작음

• 사진처럼 많은 색상을 표현하는 이미지는 비트맵 방식으로 처리, 아이콘 같이 모양이 명확하고 표현할 색상 수가 적으면 벡터 방식으로 처리

SVG 파일을 웹 브라우저에 출력하기

1. 폰트 어썸 웹 사이트에서 SVG 파일 내려받기
2. 에디터에서 SVG 파일을 열고 HTML 파일에 복사하기

3. CSS 파일 만들기

SVG의 path 스타일 변경하기

1. path 속성을 이용해서 선 모양 바꾸기

2. viewBox 속성값을 수정해서 패스 제어하기
   

• viewBox 속성 값 앞에서부터 x좌표, y좌표, 영역의 너빗값, 영역의 높잇값

• x, y 좌푯값을 양수로 -> 왼쪽 상단으로 이동

  path에 stroke를 지정하면 상하좌우 모두 미세하게 잘리기 때문에 x, y축을 음숫값으로 약간 조절하고, 실제 영역을 조금 늘려서 정상 출력

패스의 stroke-dasharray와 stroke-dashoffset 속성 이해하기

• stroke-dasharray: 선의 간격을 띄는 속성
• stroke-dashoffset: 가시영역에서 보이는 선의 시작 위치를 지정하는 속성

마우스 포인터를 올리면 선이 그려지는 모션 만들기

1. HTML, CSS 파일 만들기

2. 가시영역의 패스 전체 길이 구하기

• HTML 파일을 크롬에서 실행하고 F12를 눌러 개발자 도구를 연다. Elements를 선택하고, 하단에서 <path>태그를 선택해서 적용된 CSS 확인

• stroke-dasharray속성값 수정 가능. 키보드에서 방향키를 눌러 값 변경 가능. 웹 브라우저에 실시간으로 결괏값이 실시간으로 적용되어 변화 확인 가능

• stroke-dasharray값을 올리면 선의 간격이 점점 더 벌어지는데, 값을 계속 올리다면 간격이 사라지고 선 전체가 다시 이어지는 시점이 옴. 바로 이 시점의 stroke-dasharray값이 가시 영역의 path 전체 길이
• 크롬 개발자 도구에서 변경한 stroke-dasharray 값은 실제 코드에 반영되지 않음

3. 선을 자연스럽게 그리는 모션 추가 하기

04-5 화면 너비에 따라 웹 페이지 디자인 변경하기

미디어 쿼리를 사용하여 배경색 바꾸기

1. HTML, CSS 파일 만들기

2. 크롬에서 개발자 도구를 열어 결과 확인하기

• F12 개발자 도구 열서서 상단의 토글 디바이스 툴바를 클릭

3. 미디어 쿼리 적용하기

4. 파비콘 이미지 등록하고 마무리하기

• 파비콘 만드는 사이트
  • 직접 만들거나 다른 사람이 만든 것 사용 가능