본문 바로가기
웹/CSS

CSS 애니메이션/우선순위/변수

by 코낄2 2023. 10. 16.

1. Transform / Transition

transform 

요소의 시각적 모양을 변경하는 데 주로 사용됩니다. 주로 2D 및 3D 변형을 적용하는 데 사용됩니다.

- translate: 이동
- rotate: 회전
- scale: 확대, 축소
- skew: 경사, 비틀기

 

transition

CSS 속성 값의 변화에 부드러운 전환(transition) 효과를 제공하는 기술입니다. 이것은 주로 요소의 상태 변화, 마우스 호버 이벤트, 클릭 등과 관련이 있습니다.

- property: 요소에 추가할 전환효과를 설정
- timing-function: 전환효과의 값을 설정(linear, ease...)
- duration: 전환효과를 나타내는 시간을 설정
- delay: 설정한 시간만큼 대기하다 전환 효과를 나타냄

2. 애니메이션

CSS 애니메이션은 웹 페이지 요소에 다양한 시각적 효과를 부여하는 데 사용되는 기술입니다. 이를 통해 웹 페이지 디자인을 더 동적이고 흥미로운 것으로 만들 수 있습니다.

    0%      5%      50%  ...    100%
    장면1   장면2   장면3       끝장면

    from         to
    장면1       장면2

위처럼 여러 장면을 넣거나 from(시작), to(끝)으로 장면 변화를 생성할 수 있습니다.

@keyframe 애니메이션이름 {
                    시작: from , 0% {}
                    과정: 1%, 5%, 10% {} ...
                    끝: to , 100% {}
}

 

    <style>
        .box {
            padding: 20px;
            height: 60px;
            animation-name: moving;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes moving {
            from {
                width: 200px;
                background-color: gold;
                opacity: 0.5;
                transform: rotate(0deg);
            }

            to {
                width: 400px;
                background-color: greenyellow;
                opacity: 1;
                transform: rotate(360deg);
            }
        }
    </style>
animation-name: 애니메이션의 이름을 설정
animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
    forwards: 애니메이션 키프레임이 완료되었을 때 마지막 프레임을 유지
animation-direction: 애니메이션의 진행 방향을 정하는 속성
    reverse: 반대 순서로 진행
    alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
    reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행
animation-duration: 애니메이션의 일어나는 시간을 설정
animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
    infinite: 무한반복
    숫자: 해당 숫자만큼 반복

3. CSS 우선순위

1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
2. 외부 스타일 싵와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선
3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
4. 계산식
    - inline: 1000점
    - id 속성: 100점
    - class, 속성 선택자: 10점
    - element: 1점
5. !important를 적용하면 무조건 0순위

계산해보기

<html>

<body>
    <h2>CSS우선순위</h2>
    <div style="background-color: aqua;">div 1번</div>
    <div id="id-style" class="class-style">div 2번</div>
    <div class="class-style">div 3번</div>
    <div class="class-style2 class-style">div 4번</div>
    <div>div 5번</div>
    <ul>
        <li class="li-class">li 1번</li>
    </ul>
    <div id="id-style2" class="class-style3">div 6번</div>
</body>

<CSS>

    <style>
        #id-style { background-color: deeppink; }
        #id-style2 { background-color: deepskyblue; }
        div {
            display: block;
            padding: 30px;
            margin: 30px;
            background-color: gold;
        }
        .class-style3 {
            background-color: beige !important;
        }
        .class-style {
            background-color: greenyellow;
        }
        .class-style2 {
            background-color: pink;
            font-size: 25px;
        }
        ul > li.li-class {
            background-color: orange;
        }
        ul > li {
            background-color: violet;
        }
    </style>
    <link rel="stylesheet" href="./css/style.css">
                  <!--외부 시트 내용--> 
             div { background-color: purple; }

결과

4. CSS Custom Properties

CSS의 속성 값을 재사용하고 동적으로 변경할 수 있게 해주는 기능

    변수 정의
    :root {
        --main-color: #FF0000;
        --font-size: 15px;
    }
    변수 사용
    .box {
        background-color: var(--main-color);
        font-size: var(--font-size);
    }

변수 정의를 통해 페이지에 통일감을 주거나 수정을 하는 것이 훨씬 편리해진다. (변수 이름으로 선언해놓으면 수정시 변수의 내용만 변경하면 됨.)

<html>

<body>
    <h2>CSS변수</h2>
    <ul class="first-list">
        <li>김사과</li>
        <li>반하나</li>
    </ul>
    <ul class="second-list">
        <li>오렌지</li>
        <li>이메론</li>
        <li>배애리</li>
    </ul>
</body>

<css>

 <style>
        :root {
            --background-color: deeppink;
            --text-color: white;
        }

        .first-list {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .second-list {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        @media screen and (max-width: 768px) {
            :root {
                --background-color: darkslateblue;
                --text-color: ivory;
            }
        }
    </style>

✔ 벤더 프리픽스(Vender Prefix)

- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사
- W3C CSS 권고안에 포함되지 않은 기능이나 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임
    -webkit- : 크롬, 엣지를 위한 접두사
    -o- : 오페라를 위한 접두사
    -ms- : 익스플로러를 위한 접두사
    -moz- : 파이어폭스를 위한 접두사
- 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 함.

        #gradient {
            background: greenyellow; /* 벤더프리픽스가 적용되지 않았을 경우*/
            background: -webkit-linear-gradient(left, greenyellow, gray);
            background: -o-linear-gradient(left, greenyellow, gray);
            background: -moz-linear-gradient(left, greenyellow, gray);
            background: -ms-linear-gradient(left, greenyellow, gray);
            /* CSS 표준 문법 코드*/
            background: linear-gradient(left, greenyellow, gray);
        }

벤더프리픽스가 적용 되었을 때
벤더프리픽스가 적용 되지 않았을 때

'웹 > CSS' 카테고리의 다른 글

CSS flex  (0) 2023.10.15
CSS 디스플레이, 포지션  (0) 2023.10.15
CSS 텍스트/배경  (0) 2023.10.15
CSS(Cascading Style Sheets)  (1) 2023.10.10

관련글

티스토리툴바