본문 바로가기
스터디일지/CSS

[CSS] 기본 익히기 PART 9

by 똥쟁이핑크 2024. 3. 15.

Animation

  • 요소에 적용된 스타일을 다른 스타일로 부드럽게 전환 시켜 준다.
  • @keyframes를 사용하여 지정할 수 있다. - 애니메이션의 중간상태를 말한다고 한다.
  • transition보다 더 정밀한 효과를 구현할 수 있다.

 

keyframes 정의하기

  • from ~ to로 지정하기
@keyframes shape {
	from {
		border: 1px solid transparent;
	}
	to {
		border: 1px solid #000;
		border-radius: 50%;
	}
}

 

  • from ~ percent ~ to로 지정하기
@keyframes background {
	from { background-color: red; }
	50% { background-color: green; } /* percentage로 중간 스타일을 적용 */
	to { background-color: blue; }
}

 

 

 

Animation속성

  • animation-name - 애니메이션의 중간상태를 지정하기 위한 이름을 정의한다.
  • animation-duration - 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
  • animation-delay - 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
  • animation-iteration-count - 애니메이션이 몇 번 반복할지 지정할 때 사용하며 infinite로 지정하면 무한으로 반복이 가능하다.
.animation1 {
    animation-name: shape-color;
    animation-duration: 3s;
    animation-iteration-count: 3;
  }
  @keyframes shape-color {
    0% {
      background-color: red;
    }
    50% {
      background-color: yellow;
    }
    100% {
      background-color: blue;
    }
  }

 

  • animation-paly-state - 애니메이션을 멈추거나 다시 시작할 수 있다.
  • animation-timing-function - 중간 상태들의 전환을 어떤 시간간격으로 진행 할지 지정한다.
  • animation-fill-mode - 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
  • animation - 위의 속성들을 한꺼번에 작성 할 수 있다.
/* rotate 애니메이션, background 애니메이션 동시에 실행 시키기 */
animation: rotate 1.5s infinite, background  1.5s infinite alternate;

 

 

원본 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animation Loading</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .circle {
        width: 20px;
        height: 20px;
        background-color: blue;
        border-radius: 50%;
        position: absolute;
        animation: move-the-circle 1.5s infinite;
      }
      .circle:nth-child(2) {
        left: 30px;
        animation-delay: 0.1s;
      }
      .circle:nth-child(3) {
        left: 60px;
        animation-delay: 0.2s;
      }
      .circle:nth-child(4) {
        left: 90px;
        animation-delay: 0.3s;
      }
      .circle:nth-child(5) {
        left: 120px;
        animation-delay: 0.4s;
      }
      .circle:nth-child(6) {
        left: 150px;
        animation-delay: 0.5s;
      }
      .circle:nth-child(7) {
        left: 180px;
        animation-delay: 0.6s;
      }
      .circle:nth-child(8) {
        left: 210px;
        animation-delay: 0.7s;
      }

      @keyframes move-the-circle {
        0% {
          transform: translate(0, 0) scale(1);
          background-color: blue;
        }
        50% {
          transform: translate(0, 50px) scale(0.5);
          background-color: red;
        }
        100% {
          transform: translate(0, 0) scale(1);
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div class="animation-wrapper">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </body>
</html>

 

 

 

 

 

반응형 웹 사이트

웹사이트를 pc뿐만이 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 홈페이지

 

뷰포트

  • 웹 브라우저에 실제 내용이 표시되는 영역
  • 디바이스마다 viewport가 다르다
  • viewport mera태그를 사용해서 디바이스에 맞게 화면을 보여준다.

 

지정하는 방법

  • <meta name = "viewport" content = "속성1=값, 속성2=값, ....">로 사용할 수 있다.
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=1, user-scalable=yes"
/>

 

 

태그 속성

  • width - 뷰포트 가로
  • height - 뷰포트 세로
  • user-scalable - 사용자 확대/ 축소 가능 여부
  • initial-scale - 초기 화면 비율
  • maximum-scale - 최대 화면 비율
  • minimum-scale - 최소 화면 비율

 

뷰 포트 단위

  • vw - 뷰포트 너비를 나타내며 100vw는 뷰포트 width의 100%를 말한다.
  • vh - 뷰포트의 높이를 나타내며 100vh는 뷰포트 height의 100%를 말한다.
  • vmin - 뷰포트의 너비와 높이 중에서 작은 값.
  • vmax - 뷰포트의 너비와 높이 중에서 큰 값.

 

 

미디어 쿼리

문법

  • 접속하는 디바이스나 뷰포트에 따라 특정 CSS를 사용하는 방법이다.
  • @media 키워드를 사용한다.
  • breakpoint(중단점)에서 어떤 CSS를 적용할 것인지 지정한다.
  • media [only | not] 미디어 유형 [and 조건] * [and 조건]로 활용한다.
    • only - 거의 사용하지 않자미나 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다.
    • not - not 다음에 지정하는 미디어 유형을 제외한다.
    • and - 조건을 여러개 연결할 수 있다.

미디어 유형

  • all - 모든 장치에 적합하다
  • print - 인쇄 결과물 및 출력 미리보기 화면에서 표시된다.
  • screen - 주로 화면에서 보여진다.
  • speech - 음성 합성장치에서 실행된다.

 

자주 사용하는 미디어 쿼리

  • min-width - 웹 뷰포트의 최소너비를 나타낸다
  • max-width - 웹 뷰포트의 최대 너비를 나타낸다.

 

 

원본 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Query</title>
    <style>
      /* 
      min-width
      max-width
      0 ~ 400px blue 
      401px ~ 600px red  
      601px ~ yellow
      */
      @media (max-width: 400px) {
        body {
          background-color: blue;
        }
      }
      @media (min-width: 401px) and (max-width: 600px) {
        body {
          background-color: red;
        }
      }
      @media (min-width: 601px) {
        body {
          background-color: yellow;
        }
      }

      @media print {
        h1 {
          font-size: 120px;
        }
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facere
      expedita nesciunt quibusdam, itaque, sapiente voluptatem deleniti
      consequatur tenetur vel nisi corrupti blanditiis harum aut praesentium. Ex
      nesciunt rerum molestiae.
    </p>
  </body>
</html>

 

 

 

 

 

 

 

참고한 사이트 

https://developer.mozilla.org/ko/docs/Web/CSS/animation

 

animation - CSS: Cascading Style Sheets | MDN

animation 단축 CSS 속성은 스타일 사이에 에니메이션을 적용합니다. animation-name (en-US), animation-duration, animation-timing-function (en-US), animation-delay, animation-iteration-count (en-US), animation-direction, animation-fill-mo

developer.mozilla.org

 

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

 

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트

developer.mozilla.org

 

유투브 짐코딩

 

https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

 

https://yesviz.com/

 

Screen sizes, viewport sizes and CSS media queries for Devices | Find Viewport Size | YesViz

Yesviz.com is a significant database of screen sizes, viewport sizes, css media queries and resolution for all kind of devices including phones, tablets, smart watches and laptops.

yesviz.com

 

저작자표시 비영리 변경금지

'스터디일지 > CSS' 카테고리의 다른 글

[CSS] 기본 익히기 PART 10  (0) 2024.03.15
[CSS] 기본 익히기 PART 8  (0) 2024.03.15
[CSS] 기본 익히기 PART 7  (1) 2024.03.15
[CSS] 기본 익히기 PART 6  (0) 2024.03.14
[CSS] 기본 익히기 PART 5  (1) 2024.03.14

관련글

티스토리툴바