FrontEnd/css

[css] ๊ฐ€์ƒ์š”์†Œ ::after, ::before ์‚ฌ์šฉ๋ฐฉ๋ฒ• ๋ฐ ๋™์ž‘ ์•ˆํ•  ๋•Œ (content)

๊น€ํ‰๋ฒ”๋‹˜ 2022. 3. 3. 21:26
๋ฐ˜์‘ํ˜•

๊ฐ€์ƒ์š”์†Œ ์‚ฌ์šฉ๋ฒ•๊ณผ ๋™์ž‘์•ˆ๋  ๋•Œ

๐Ÿ˜ถ‍๐ŸŒซ๏ธcss ๊ฐ€์ƒ ์š”์†Œ ( pseudo-Element)

๊ฐ€์ƒ ์š”์†Œ๋Š” css๋ฅผ ํ†ตํ•ด์„œ ๊ฐ€์ƒ์˜ element๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ์ฝ”๋“œ์ด๋‹ค.

์ด๋ฏธ ์ž‘์„ฑ๋œ HTML์— ์ƒˆ๋กœ์šด ์Šคํƒ€์ผ์„ ์ฃผ๊ธฐ ์œ„ํ•ด์„œ ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•ด์„œ ์‚ฌ์šฉ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

:before๋Š” HTML์•ˆ ์•ž์ชฝ์— ์ถ”๊ฐ€ํ•˜๋Š” ๊ฐ€์ƒ ์š”์†Œ์ด๊ณ 

:after๋Š” HTML์ด ๋๋‚  ๋•Œ ์ถ”๊ฐ€๋˜๋Š” ๊ฐ€์ƒ ์š”์†Œ์ด๋‹ค.

 

css ๊ฐ€์ƒ ์š”์†Œ ์‚ฌ์šฉ๋ฒ•

div:after {...}
div:before {...}

๊ฐ€์ƒ ์š”์†Œ๋Š” css๋Š” ๋‚ด๊ฐ€ ์ฒ˜๋ฆฌํ•  ์š”์†Œ ๋’ค์— :after, :before๋กœ ๋ถ™์—ฌ์„œ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

์ฝ”๋“œ๋Š” ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•ด๋ณด์ž. 

 

sample Code

<html>
<head>
    <style>
    @font-face {
        font-family: 'LeferiPoint-WhiteObliqueA';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-family: LeferiPoint-WhiteObliqueA;
        font-size:20px;
        padding: 30px;
    }

    .text:before {
        color:red;
        content: "๊ฐ€์ƒ์š”์†Œ Before"
    }

    .text:after {
        color:skyblue;
        content: "๊ฐ€์ƒ์š”์†Œ after"
    }
    </style>
</head>
<body>
    <div class="text">
        ํ…์ŠคํŠธ
    </div>
</body>
</html>

 

 

๊ฒฐ๊ณผ ํ™”๋ฉด

๊ฐ€์ƒ์š”์†Œ ๊ฒฐ๊ณผํ™”๋ฉด

์œ„์˜ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•ด ๋ณด๋ฉด ์œ„์— ๊ฐ™์ด ์ฝ”๋“œ๊ฐ€ ๋‚˜ํƒ€๋‚œ๋‹ค.

HTML์ƒ์—์„œ๋Š” div์—. text๋ž‘ ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ div ์•ˆ์— ์žˆ๋Š” ํ…์ŠคํŠธ๋ผ๋Š” ๋ฌธ๊ตฌ๋ฐ–์— ์—†์ง€๋งŒ,

css ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•ด๋ณด๋‹ˆ ์•ž ๋’ค๋กœ css๋กœ ์ถ”๊ฐ€ํ•œ ๋‚ด ๊ฐ€์ƒ ์š”์†Œ๊ฐ€ ์ƒ์„ฑ๋œ ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

ํฌ๋กฌ ๊ฒ€์‚ฌ๋ฅผ ํ†ตํ•ด Element๋ฅผ ์ฐ์–ด ๋ณด๋ฉด ::before, ::after๋ผ๋Š” ๊ฐ€์ƒ์š”์†Œ๊ฐ€ ์ถ”๊ฐ€๋œ ๊ฒƒ๋„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

 

 

 

 

๐Ÿ“Œ๊ฐ€์ƒ์š”์†Œ(::before, ::after)๊ฐ€ ๋™์ž‘ ์•ˆ๋  ๋•Œ

๋ณดํ†ต ๊ฐ€์ƒ ์š”์†Œ๋กœ ์ถ”๊ฐ€๊ฐ€ ๋˜์—ˆ์„ ๋• ํ…์ŠคํŠธ๋ฅผ ๋„ฃ์„ ๋•Œ๋ณด๋‹จ

๋ฐ‘์ค„, ํˆดํŒ ๋“ฑ ์ข€ ๋” ํ•ด๋‹น element๋ฅผ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ๋Š” ์š”์†Œ๋“ค์„ ์œ„์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค.

๊ฐ€๋” ๊ฐ€์ƒ ์š”์†Œ๋ฅผ css๋ฅผ ์ ์–ด๋„ ๋™์ž‘์„ ์•ˆํ•˜๋Š” ๊ฒฝ์šฐ๋“ค์„ ์ •๋ฆฌํ•ด๋ดค๋‹ค.

 

1๏ธโƒฃcontent๊ฐ€ ์—†์„ ๋•Œ

๊ฐ€์ƒ์š”์†Œ๋ฅผ ์‹คํ–‰์‹œํ‚ค๋ ค๋ฉด ๋ฐ˜๋“œ์‹œ content ์†์„ฑ์„ ๋„ฃ์–ด์ค˜์•ผ ํ•œ๋‹ค.

๊ทธ๋ƒฅ ํ…์ŠคํŠธ ์—†์ด ๊พธ๋ฐˆ ์š”์†Œ๋กœ๋งŒ ์‚ฌ์šฉํ•˜๋ ค๋ฉด 

content:""๋ผ๋Š” ์†์„ฑ์œผ๋กœ ๋นˆ์นธ์„ ์ง€์ •ํ•ด์ฃผ๊ณ  ์‚ฌ์šฉํ•ด์ค˜์•ผ ํ•œ๋‹ค.

 

2๏ธโƒฃํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ

๊ธฐ์กด ๊ฐ€์ƒ ์š”์†Œ๋Š” css2์—์„œ๋Š” :before, :after์ฒ˜๋Ÿผ ์‹ฑ๊ธ€ ์ฝœ๋ก ์œผ๋กœ ์‚ฌ์šฉ์„ ํ–ˆ์—ˆ๋‹ค.

css3๋ถ€ํ„ฐ๋Š” ์˜์‚ฌ ํด๋ž˜์Šค(:hover, :visited, :checked ๋“ฑ)์™€ ๊ตฌ๋ถ„์„ ์œ„ํ•ด

::before, ::after๋กœ ํ•ด์„œ ๋”๋ธ” ์ฝœ๋ก ๋„ ํ—ˆ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

 

์ผ๋‹จ :after, ::after์ฒ˜๋Ÿผ ์‹ฑ๊ธ€, ๋”๋ธ” ์ฝœ๋ก  ๋‘ ๊ฐœ ๋ชจ๋‘ IE7์—์„œ๋Š” ๋™์ž‘์ด ๋˜์ง€ ์•Š๊ณ 

IE8์„ ์ ์šฉํ•ด์•ผ ๋˜๋Š” ๋ถ„์ด๋ฉด ์‹ฑ๊ธ€ ์ฝœ๋ฅธ์„ ์“ฐ๋Š” ๊ฒŒ ์ข‹๊ณ 

๊ทธ ์™ธ ์—๋Š” ์ถ”ํ›„์— ๋‚˜์˜จ ๋”๋ธ” ์ฝœ๋ก ์„ ์“ฐ๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค.

 

 

 

 

 

๐Ÿฃ๊ฐ€์ƒ ์š”์†Œ ํ™œ์šฉ ๋ฐฉ๋ฒ•

๋ณดํ†ต ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ์ด์šฉํ•œ๋‹ค๋ฉด ๋ฐ‘์ค„์ด ์ณ์ง€๋Š” ํšจ๊ณผ๋ฅผ ์ฃผ๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

sample Code

<html>
<head>
    <style>
        @font-face {
            font-family: 'LeferiPoint-WhiteObliqueA';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        body {
            font-family: LeferiPoint-WhiteObliqueA;
            font-size: 20px;
            padding: 30px;
        }

        .text span {
            display: inline-block;
        }
        .text:hover span{
            font-weight:bold;
        }
        .text:hover span::after {
            animation: drawline 1s ease;
        }

        .text span::after {
            content: "";
            display: block;
            width: 100%;
            height: 5px;
            margin:-10px 0 0 0;
            background: moccasin;
        }

        @keyframes drawline {
            0% {
                width: 0
            }
            100% {
                width: 100%;
            }

        }
    </style>
</head>
<body>
<div class="text">
    ์•ˆ๋…•ํ•˜์„ธ์š”! <span>๊ฐœ๋ฐœ์ž ๊น€ํ‰๋ฒ”</span> ์ž…๋‹ˆ๋‹ค.
</div>
</body>
</html>

๊ฒฐ๊ณผ ํ™”๋ฉด

 

๊ฐ€์ƒ์š”์†Œ ํ™œ์šฉ ํ™”๋ฉด

 

 

๋ฐ˜์‘ํ˜•