반응형 웹, CSS 애니메이션

728x90

반응형 웹

- 정의: 여러 장치에 대응하는 하나의 웹 문서또는 사이트

브라우저의 크기에 실시간으로 반영하여 크기에 따라 레이아웃이 변하는 웹 사이트

- 모바일 퍼스트(mobile first)

사용자 경험을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인함

현재 데스크탑 유저보다 모바일 유저가 공유하는 정보가 많아짐에 더욱더 각광받음

- 장점:

검색엔진 최적화(SEO)유리

- 단점:

사이트 속도 저하

웹 브라우저 호환성 문제, CSS3의 특성상 인터넷 익스플로러 8버전 이하에서는 사용이 불가능

미디어 쿼리

- 정의: 뷰포트(브라우저 창)의 크기에 따라 스타일을 적용할 수 있도록 함

적용하는 방법

1. CSS파일을 HTML파일에 적용하는 것처럼 적절한 태그에 위치

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

2. <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성

<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

3. CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

- 미디어 타입

all: 모든 미디어 타입

print: 프린터

screen: 컴퓨터 화면

speech: 스크린 리더

- 구현하는 코드 정리

너비 및 높이 조건

@media screen and (width: 600px) {
	body {
		color : red;
	}
}

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

방향성(세로, 가로)

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

CSS애니메이션

@keyframes

/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

예시: 회전하는 키프레임 애니메이션

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

animation 속성

animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
- animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
- animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
- animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
- animation-direction : 애니메이션 재생 방향을 지정
- animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
- animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
- animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
- animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

애니메이션 내가 작성한 코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
    <title>Responsive Web</title>
    <style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
      /* 여기 css를 작성합니다. */
   

      body{
  

        background-color: red;
      }
      @media screen and (max-width: 1000px) {
        body{
          background-color: #008000;
        }
        @media screen and (max-width: 600px) {
        body{
          background-color: yellow;
        }
        #logo{
          animation : locate 3s;
        
        }
        
        }
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

App.js

* {
    font-family: sans-serif;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-decoration: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    animation: slide 1s ease;
  }
  *::-webkit-scrollbar {
    display: none;
  }
  
  body {
    height: 100%;
    overflow: scroll;
    animation: lotate 1s ease-out;
  }
  h1{
    font-size: 5em;
    width: 250px;
    color: purple;
    font-family:sans-serif;
    position: relative;
    top: 80px;
    left: 100px;
    animation: lotate 2s ease-out;
  }
 /* @keyframes slide {
   from{
    left: -100px;
   }to{
   left: 150px;
   opacity: 1;
   }
    */
@keyframes lotate {
  0%{
    transform: rotate(0deg)
  }
  50%{
    transform: rotate(180deg)
  }
  100%{
    transform: rotate(360deg)
  }
}
 

 .row{
   margin-left: -12px;
   margin-right: -12px;
   display: flex;
 }


  
@media screen and (max-width: 768px) {
     body{
     padding: 80px 0;
  }
   .row{
    flex-direction: column;
  }
  .col{
    width: 100%;
  }
}
  
@media screen and (max-width: 480) {
  body{
    padding: 40px 0;
  }
  .text-wrap h1{
    font-size: 36px;
    line-height: 48px;
  }
  .text-wrap p{
    font-size: 14px;
    line-height: 24px;
  }
  .root-wrap li{
    margin-bottom: 16px;
  }
  .root-wrap li a{
    padding: 16px;
    font-size: 18px;
    line-height: 20px;
  }
  .root-wrap li span{
    right: 12px;
    font-size: 14px;
    line-height: 20px;
  }
}

Render.js

import styled from 'styled-components';
import '../App.css';

const MainArea = styled.div`
  background-image: url('https://byline.network/wp-content/uploads/2018/10/discover_1x_30fps.gif');
  background-repeat: no-repeat;
  background-position: right;

  max-height: 864px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 128px 0px 0 0px;

  div.text {
    width: 1200px;
    margin: 0 auto;
    p {
      position: relative;
      top: 60px;
      width: 100%;
      height: auto;
      color: black;
      font-weight: 600;
      font-size: 60px;
      letter-spacing: 6px;
      line-height: 1.4;
    }
  }
`;

let mainText = document.querySelector("h1");

window.addEventListener("scroll", function(){
  let value = window.scrollY;
  console.log("scrollY", value);

  if(value > 50){
    mainText.style.animation= 'slide 1s ease-out'
  }
})


const Render = () => {
  return (
    <>
      <MainArea>
        <div className="text">
          <h1>pick your favorate</h1>
          <p>구글의 </p>
          <p>다양한</p>
          <p>기능을 활용해요</p>
        </div>
      </MainArea>
    </>
  );
};

export default Render;

canvas

html의 <canvas>태그와 자바스크립트를 사용하면 다양한 그래픽 요소 만들 수 있음

단순한 도형 및 시각화, 애니메이션 사용

id 지정

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
</canvas>

엘리먼트 선택

const canvas = document.querySelector("#canvas");

태그 속성 지정

<canvas id="canvas" width="500" height="500"></canvas>
		// 500픽셀 * 500픽셀로 설정됩니다.

<canvas id="canvas" width="50vw" height="40vh"></canvas>
		// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.

DOM으로 지정

 canvas.width = 50vw;
   canvas.height = 40vh;
   	// DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 설정이 됩니다.
   
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   	// 화면 크기에 맞춰서 설정해줄 수도 있습니다.

차트 만들기

<canvas id="popChart" width="600" height="400"></canvas>

let popCanvas = document.getElementById("popChart");

let barChart = new Chart(popCanvas, {
  type: 'bar',
  data: {
    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
    datasets: [{
      label: 'Population',
      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
      backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)'
      ]
    }]
  }
});

저작자표시

'프로그래밍 > CS' 카테고리의 다른 글

CI/CD (0)	2022.08.08
Lighthouse (0)	2022.08.04
HTML/CSS 심화 (0)	2022.07.22
기술면접 준비(재귀, 웹표준, 보안) (2)	2022.07.20
[인증/보안] Auth Oauth (0)	2022.07.18

개발자 쑥

반응형 웹, CSS 애니메이션

반응형 웹

미디어 쿼리

CSS애니메이션

애니메이션 내가 작성한 코드

canvas

'프로그래밍 > CS' 카테고리의 다른 글

댓글

티스토리툴바

반응형 웹, CSS 애니메이션

반응형 웹

미디어 쿼리

CSS애니메이션

애니메이션 내가 작성한 코드

canvas

'프로그래밍 > CS' 카테고리의 다른 글

관련글

댓글

티스토리툴바