๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/HTML CSS

CSS ๊ฐ€์ƒํด๋ž˜์Šค (1)_๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ํšจ๊ณผ(hover, transition)

by KASSID 2022. 1. 7.

๋ชฉ์ฐจ

    728x90

    ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ ๋ณ€ํ™”๋ฅผ ์ฃผ๋Š” ๊ฐ€์ƒํด๋ž˜์Šค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž

     

    hover

     

    aํƒœ๊ทธ๋กœ hover๋ฅผ ํ™œ์šฉํ•ด๋ณด์•˜๋‹ค.

     

    ๋“ค์–ด๊ฐ€๊ธฐ์ „์—

    aํƒœ๊ทธ ๊ด€๋ จ ์•Œ์•„๋‘˜ ๊ฒƒ
    1. href ์†์„ฑ์„ ๋น„์›Œ๋‘๋ฉด jQuery๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค.

    -> #none์„ ๋„ฃ์–ด์ฃผ์ž!

    2. body์˜ ์ƒ‰์ƒ ์†์„ฑ์„ ์ ์šฉ๋ฐ›์ง€ ์•Š๋Š”๋‹ค.

     

    ์‚ฌ์šฉ๋ฒ•

    ์„ ํƒ์ž:hover

    ์œ„์ฒ˜๋Ÿผ ์„ ํƒ์ž ๋’ค์— ๊ฐ€์ƒํด๋ž˜์Šค๋ฅผ ์ ์–ด์ฃผ๋ฉด ๋˜๋Š”๋ฐ

    ์„ ํƒ์ž์™€ ๊ฐ€์ƒํด๋ž˜์Šค ์‚ฌ์ด์— ๋„์–ด์“ฐ๊ธฐ๊ฐ€ ์žˆ์œผ๋ฉด ์•ˆ๋œ๋‹ค!

     

    ์˜ˆ์‹œ1

    <a href="#none">๊ณต์ง€์‚ฌํ•ญ</a>
    <a href="#none">Q&A</a>
    <a href="#none">์ปค๋ฎค๋‹ˆํ‹ฐ</a>

     

    body {
        background-color: #fff;
        color: #333;
        font-size: 15px;
    }
    a {
        color: #333;
        text-decoration: none;
        font-weight: 700;
        transition: 0.3s;
    }
    a:hover {
        color: dodgerblue;
        text-decoration: underline;
    }

    ์œ„์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์™”๋‹ค.

     

    hover๋Š” ํ•ด๋‹น ์„ ํƒ์ž์— ๋งˆ์šฐ์Šค ์ปค์„œ๊ฐ€ ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ

    ์ ์šฉ์ด ๋œ๋‹ค.

     

    aํƒœ๊ทธ์— transition์ด๋ผ๋Š” ์†์„ฑ์„ ์ ์šฉํ–ˆ๋Š”๋ฐ

    ์ด๋Š” ๋ณ€ํ˜•์ด ๋  ๋•Œ๊นŒ์ง€ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ์กฐ์ •ํ•œ๋‹ค.

     

    ์œ„์˜ ์ฝ”๋“œ์™€ ๊ฐ™์ด hover๊ฐ€ ๋˜์ง€ ์•Š์€ ์ƒํƒœ์— ์ ์šฉ์„ ํ•˜๋ฉด

    ์ปค์„œ๋ฅผ ์˜ฌ๋ฆฌ์ง€ ์•Š์•˜์„ ๋•Œ๋„ ์ฒœ์ฒœํžˆ ๋ณ€ํ˜•์ด ๋˜๋Š” ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

     

     

    ์˜ˆ์‹œ2

    <div class="parent">
        <div class="box"></div>
    </div>

     

    .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: rgb(0, 66, 133);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        transition: 1s;
    }
    .box:hover {
        background-color: rgb(185, 215, 245);
        border-radius: 0;
        width: 100%;
        height: 100%;

    ์ด๋ฒˆ์—๋Š” ์ €๋ฒˆ์— ๋‹ค๋ฃจ์—ˆ๋˜

    '์ž์‹์š”์†Œ๋ฅผ ๋ถ€๋ชจ์š”์†Œ์˜ ์ •๊ฐ€์šด๋ฐ์— ๋ฐฐ์น˜ํ•˜๊ธฐ'์—

    hover์™€ transition์„ ์ด์šฉํ•ด์„œ ๋ณ€ํ˜•์„ ํ•ด๋ณด์•˜๋‹ค.

     

    ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ‰์ƒ, ํฌ๊ธฐ ๋“ฑ์„ ๋ณ€ํ˜•์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

     

     

     

     

     

     

     

     

     

     

     

     

    ๋Œ“๊ธ€