Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥

트랜지션과 애니매이션

 

애니메이션 동작을 어떻게 만드는지에 대해 !!

애니메이션 동작을 알며 웹사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수 있다

 

 

 

 

 

웹 문서에서 CSS 변형을 이용하면 사용자의 동작에 반응해 텍스트나 이미지를 움직이게 할 수 있다

 

 

▽ 변형 함수

 

translate() 함수: 요소 이동
transform : translate( tx , ty )	지정한 크기만큼 x축과 y축으로 이동
transform : translate( tx , ty, tz )	지정한 크기만큼 x축과 y축, z축으로 이동
transform : translateX( tx )	지정한 크기만큼 x축으로 이동
transform : translateY( ty )	지정한 크기만큼 y축으로 이동
transform : translateZ( tz )	지정한 크기만큼 z축으로 이동
scale() 함수 : 요소 확대,축소하기
transform: scale(sx, sy)	지정한 크기만큼 x축, y축으로 확대,축소
transform: scale(sx, sy, sz)	지정한 크기만큼 x축, y축, z축으로 확대,축소
transform: scaleX(sx)	지정한 크기만큼 x축으로 확대,축소
transform: scaleY(sy)	지정한 크기만큼 y축으로 확대,축소
transform: scaleZ(sz)	지정한 크기만큼 z축으로 확대,축소
rotate() 함수: 요소 회전하기
transform: rotate(각도)	지정한 각도만큼 회전
transform: rotate(각도)	지정한 각도만큼 회전
transform: rotateX(각도)	x축을 기준으로 지정한 각도만큼 회전
transform: rotateY(각도)	y축을 기준으로 지정한 각도만큼 회전
transform: rotateZ(각도)	z축을 기준으로 지정한 각도만큼 회전
transform: rotate3d(rx,ry,rz,각도)	x축과 y축, z축을 기준으로 지정한 각도만큼 회전
skew() 함수: 요소 비틀기
transform: skew(ax, ay)	지정한 각도만큼 x축과  y축으로 비틈
transform: skewX(ax)	지정한 각도만큼 x축으로 비틈
transform: skewY(ay)	지정한 각도만큼 y축으로 비틈

 

 

 

 

 

트랜지션은 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것!!

 

 

▽ 트랜지션 속성

 

종류	설명
transition-property	트랜지션의 적용 대상을 지정, 기본값은 all
transition-duration	트랜지션의 실행 시간 지정, 단위 s(초), 기본값 0
transition-timing-function	트랜지션의 실행 형태를 지정
transition-delay	트랜지션의 지연시간 지정, 단위 s(초), 기본값 0
transition	transition-property, transition-duration,  transition-timing-function, transition-delay 속성을 한꺼번에 지정

 

 

 

 

 

animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있음!!

→ 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데,

    이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 함

 

 

▽ 애니메이션 지정

 

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 설정
animation-delay	애니메이션의 시작 시간 지정
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정
animation-duration	애니메이션의 실행 시간을 지정, 단위는 s(초)
animation-iteration-count	애니메이션의 반복 횟수를 지정
animation-name	@keyframes로 설정해 놓은 중간 상태를 지정
animation-timing-function	키프레임의 전환 형태를 지정
animation	animation 속성을 한꺼번에 묶어서 지정

 

 

 

 

 

 

반응형 웹과 미디어 쿼리

 

 

 

반응형 웹 디자인

: PC 브라우저이든 모바일 브라우저이든 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여주는 것

 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현

 

 

 

 

뷰포트

: PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해서 보면 모든 내용이 작게 표시됨

 → 픽셀 차이때문..

  뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시 가능

  뷰표트란 스마트폰 화면에서 실제 내용이 표시되는 영역

 

 

 

 

미디어 쿼리

: CSS모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법 

  미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라짐

 

 

 

 

그리드 레이아웃

: 화면 너비에 따라 웹 문서의 요소를 재배치해야함 → 이때 기준이 되는 레이이아웃이 그리드 레이아웃

 

그리드 레이아웃이란......

  웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말함

  화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지해줌

1. 시각적으로 안정된 디자인을 만들 수 있음
2. 업데이트가 편한 웹 디자인을 구성할 수 있음
3. 요소를 자유롭게 배치 할 수 있음

 

(1) 플렉서블 박스 레이아웃

그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것

 

 

(2) CSS 그리드 레이아웃

플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어서 수평이나 수직 중 하나의 기준으로 해서 요소를 배치

하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있음

 

 

 

 

 

 

▽ 미디어 쿼리의 속성

종류	설명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	웹 페이지의 최소 너비, 최소 높이
max-width, max-height	웹 페이지의 최대 너비, 최대 높이
device-width, device-height	단말기의 가로 너비, 세로 높이
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이
orientation: portrait	단말기의 세로 모드
orientation : landscape	단말기의 가로 모드

 

 

 

 

 

▽ 플렉스 박스 레이아웃의 속성

 

종류	설명
display	플렉스 컨테이너 지정
flex-direction	플렉스 항목에서 주축과 방향 지정
flex-wrap	컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부 지정
flex-flow	배치 방향과 줄 바꿈을 한번에 지정
justify-content	주축에서 플렉스 항목 젙렬 방법 지정
align-items	교차축에서 플렉스 항목 정렬 방법 지정
align-self	특정 플렉스 항목의 정렬 방법 지정
align-content	여러 줄일 대 교차축 정렬 방법 지정
flex	플렉스 항목의 너비 줄이거나 늘림

 

 

 

 

 

▽ CSS 그리드 레이아웃의 속성과 함수

 

종류	설명
display	그리드 컨테이너 지정
grid-template-cloumns	칼럼 지정
grid-template-rows	줄 높이 지정
grid-column-gap	칼럼과 칼럼 사이 간격 지정
grid-row-gap	줄과 줄 사이 간격 지정
grid-gap	칼럼과 줄 사이 간격 지정
grid-column-start	칼럼 시작 라인 번호 지정
grid-column-end	칼럼 마지막 라인 번호 지정
grid-column	칼럼 시작 번호와 끝 번호 사이에서 슬래시 넣어 사용
grid-row-start	줄 시작의 라인 번호 지정
grid-row-end	줄 마지막의 라인 번호 지정
grid-row	줄 시작 번호와 줄 끝 번호 사이에 슬래시 넣어 사용
grid-area	템플릿 이름 지정
grid-template-areas	grid-area를 사용해 템플릿 그리드 만듦
minmax()	최솟값과 최댓값을 지정하는 함수
repeat()	같은 값을 여러번 반복할 때 사용하는 함수

 

 

 

 

 

 

마무리 문제 ♥♡

 

 

 

1. 메뉴 항목 위로 마우스 포인터를 가져가면 배경색이 바뀌게 만들었는데, 여기에 트랜지션을 사용하여 배경색이 서서히 바뀌도록 수정하세요.

 

↓

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>  
  <style>
    * {
      box-sizing: border-box;
    }
    .top-menu {
      margin:50px auto;
      padding:0;
      list-style:none;
      width:605px;
      height:35px;
      box-shadow:0 3px 4px #8b8b8b;
      background-color:#dadada;
    }
    .top-menu li {
      float:left;
      border-right:1px solid #929292;
    }
    .top-menu li a:link{
      color:black;
      text-decoration:none;
      text-align:center;
      display:block;
      width:100px;
      height:35px;
      line-height: 35px;
      transition: 0.5s ease-in; 
    }
    .top-menu li:last-child {
      border-right:none;      
    }
    .top-menu li:not(:last-child) a:hover {
      background-color:#555;
      color:#fff;
    }
    .top-menu Li:last-child a:hover {
      background-color:#b30000;
      color:#fff;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="top-menu">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
      <li><a href="#">메뉴5</a></li>
      <li><a href="#">메뉴6</a></li>
    </ul>
   </nav>
</body>
</html>

 

 

 

 

 

 

 

2. 문서를 불러오자 마자 y축 기준으로 360도 회전하도록 애니메이션을 만들어 보세요.

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>연습문제 2</title>
	<style>	
		#container {
			width:200px;
			margin:30px auto;
		}
    img {
      border:1px solid #ccc;
      border-radius:50%;      
      box-shadow: 5px 5px 30px 2px #000;
      animation:rotateBear 2.5s infinite; /* rotateBear 애니메이션 2.5초 동안 실행. 무한 반복 */
    }

    @keyframes rotateBear {
      from { transform: perspective(200px) rotateY(0deg); }
      50% { transform: perspective(200px) rotateY(-180deg); }      
      to { transform:  perspective(200px) rotateY(-360deg); }
    }
	</style>
</head>
<body>
<div id="container">
	<img src="images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html>