2021.11.09 Today I Learned

유니·2021년 11월 9일

Hover

hover는 사용자가 마우스를 올렸을 때 작동한다.

    <style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
        }
        .one:hover{
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

Active

Active는 사용자가 요소를 실행할 때 (버튼 or link) 적용된다.

    <style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
        }
        .one:active{
            background: red;
        }
    </style>
</head>
<body>
    <button class="one"></button>
</body>

focus

focus는 클릭할 수 있는 요소나 폼 컨트롤과같이 상호작용 할 수 있는 요소에 적용된다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
        }
        .one:focus{
            background: red;
        }
    </style>
</head>
<body>
    <input type="text" class="one">
</body>

transition

transition이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는것이다.

    <style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition: all 2s;
        }
        .one:hover{
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

transition - delay

delay는 transition이 일어나기 전까지의 시간을 지정해준다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition-delay: 2s;
        }
        .one:hover{
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

transition - duration

duration으 transition이 일어난 후 얼마나 지속할지 지정 해 준다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition-duration: 10s;
        }
        .one:hover{
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

transition - property

property는 transition에 어떤 효과를 줄지 나타낸다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition-property: width, height;
            transition-duration: 2s;
        }
        .one:hover{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

transform

transform 은 여러 형태로 변형시킬때 사용하는 속성이다.

scale

scale은 해당 요소의 형태의 크기를 변환시킬 때 사용한다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition: all 2s;
        }
        .one:hover{
            transform: scale(2);
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

rotate

rotate는 해당 요소를 회전시킬 때 사용한다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition: all 2s;
        }
        .one:hover{
            transform: rotate(720deg);
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

translate

translate는 해당 요소를 x, y 축 지점으로 이동시킬때 사용한다. translate(x축, y축)이다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition: all 2s;
        }
        .one:hover{
            transform: translate(50px, 50px);
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

transform-origin

transform-origin 은 해당 요소의 기준점을 변경할 때 사용한다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            transition: all 2s;
            transform-origin: right bottom;
        }
        .one:hover{
            transform: rotate(720deg);
            background: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

Animation

Keyframe

keyframe은 변화가 일어나는 지점을 설정하여 해당 요소의 property와 value를 변화시킨다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
        }

        .one:hover{
            animation: yoon 2s;
        }
        @keyframes yoon{
            from{
                background: blue;
            }
            to{
                background: red;
            }
        }
        
    </style>
</head>
<body>
    <div class="one"></div>
</body>

Perspective

Perspective는 우리말로하면 원근법으로 2D화면인 HTML화면에 원근감을 주기위해 사용한다.

<style>
        .one{
            margin:50px;
            height: 300px;
            width: 300px;
            background: blue;
            perspective: 400px;
        }

        .one:hover{
            animation: yoon 2s;
        }
        @keyframes yoon{
            from{
                background: blue;
                transform: rotate(360deg);
            }
            to{
                background: red;
            }
        }
        
    </style>
</head>
<body>
    <div class="one"></div>
</body>