๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
CSS/Layout_Site

์ด๋ฏธ์ง€ ์œ ํ˜• (2)

by oranssy 2022. 8. 18.
728x90
๋ฐ˜์‘ํ˜•

โญ๏ธ ์ด๋ฏธ์ง€ ์œ ํ˜• 02 โญ๏ธ


01. ๋ ˆ์ด์•„์›ƒ ๊ตฌ์ƒํ•˜๊ธฐ

๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์ƒํ•  ๋•Œ๋Š”, ์Šค์ผ€์น˜ํ•˜๋ฉด์„œ ์„ธ๋ถ€ ๋‚ด์šฉ์˜ ์ •๋ณด๊นŒ์ง€ ๊ตฌ์ฒด์ ์œผ๋กœ ๊ณ„ํšํ•ฉ๋‹ˆ๋‹ค.

02. ์ƒ์ž(div) ๋งŒ๋“ค๊ธฐ : <body>

section ์„ ์‹œ๋ฉ˜ํ‹ฑ ๋งˆํฌ์—…ํ•˜๊ณ , id ๋กœ ์ด๋ฆ„์„ ์ง€์–ด์ค๋‹ˆ๋‹ค.
์นด๋“œ ์ƒ์ž 3๊ฐœ(article)์„ ๋งŒ๋“ค๊ณ , ์ œ๋ชฉ๊ณผ ๋‚ด์šฉ์„ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
์ค‘๊ฐ„ ์ค‘๊ฐ„์— ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ดํŽด๋ณด๋ฉฐ ์ž˜ ๋งŒ๋“ค์–ด์ง€๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. 

    <section id="imageType02" class="image__wrap gmarket section">
    <h2>์ด ๋‹ฌ์˜ ์ปจ์…‰ ๋ชจ๋ธ ์„ ์ •</h2>
    <p>์ด ๋‹ฌ์˜ ์ปจ์…‰ ๋ชจ๋ธ๋กœ ์„ ์ •๋˜์‹  ๋ถ„๋“ค์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.</p>
    <div class="image__inner container">
        <article class="image img1">
            <figure class="image__box ">
                <img src="img/image_bg02_01.jpg" alt="๋ฒ ์•„ํ‚ด">
            </figure>
            <div class="image__desc">
                <h3>์ปจ์…‰ 29๊ธฐ ๋ฒ ์•„ํ‚ด</h3>
                <a href="/" class="more" title="์ž์„ธํžˆ๋ณด๊ธฐ">์ž์„ธํžˆ๋ณด๊ธฐ</a>
            </div>
        </article>
        <article class="image img2">
            <figure class="image__box">
                <img src="img/image_bg02_02.jpg" alt="๋กœ์ฆˆ๋ฌธ">
            </figure>
            <div class="image__desc">
                <h3>์ปจ์…‰ 29๊ธฐ ๋กœ์ฆˆ๋ฌธ</h3>
                <a href="/" class="more" title="์ž์„ธํžˆ๋ณด๊ธฐ">์ž์„ธํžˆ๋ณด๊ธฐ</a>
            </div>
        </article>
        <article class="image img3">
            <figure class="image__box">
                <img src="img/image_bg02_03.jpg" alt="์—์ผ๋ฆฌ">
            </figure>
            <div class="image__desc">
                <h3>์ปจ์…‰ 29๊ธฐ ์—์ผ๋ฆฌ</h3>
                <a href="/" class="more" title="์ž์„ธํžˆ๋ณด๊ธฐ">์ž์„ธํžˆ๋ณด๊ธฐ</a>
            </div>
        </article>
    </div>
</section>

02. style(css) ์„ค์ •ํ•˜๊ธฐ : <style>

    /* fonts */
    @import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

    .gmarket {
        font-family: 'GmarketSans';
        font-weight: 300;
    }
    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    img {
        width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
        min-width: 1160;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {
        font-size: 50px;
        line-height: 1;
        text-align: center;
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 22px;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }

    /* imageType02 */
    .image__wrap {}
    .image__inner {
        display: flex;
        justify-content: space-between;
    }
    .image {
        width: 32%;
        height: 520px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }
    /* .image.img1 {
        background: url(img/image_bg02_01.jpg) no-repeat center / cover ;
    }
    .image.img2 {
        background: url(img/image_bg02_02.jpg) no-repeat center / cover ;
    }
    .image.img3 {
        background: url(img/image_bg02_03.jpg) no-repeat center / cover ;
    } */
    .image__box {}
    .image__box img {
        /* vertical-align: top;  ์ด๋ฏธ์ง€ ์—ฌ๋ฐฑ ์—†์• ๊ธฐ */
    }
    .image__desc {
        position: absolute;
        left: 0;
        bottom: -100px;
        width: 100%;
        text-align: center;
        backdrop-filter: blur(10px);   /* ํˆฌ๋ช…๋„ ์„ค์ • */
        padding: 23px 20px;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.3);
        transition: all 0.3s ease-in-out;
    }
    .image:hover .image__desc {
        bottom: 0;
    }
    .image:hover .image__box img {
        transform: scale(1.05);    /* ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€๊นŒ์ดํ•˜๋ฉด ํฌ๊ฒŒ */
        transition: all 0.6s ease-in-out;   /* ํฌ๊ธฐ ๋ณ€ํ™”์˜ ์†๋„ */
    }

    .img1 .image__desc {background: rgba(167, 171, 235, 0.5);}
    .img2 .image__desc {background: rgba(244, 206, 131 ,0.5);}
    .img3 .image__desc {background: rgba(24, 35, 56 ,0.5);}
    .img1 .image__desc h3 {color: #000;}
    .img2 .image__desc h3 {color: #000;}
    .img3 .image__desc h3 {color: #fff;}
    .img1 .image__desc .more {color: #000;}
    .img2 .image__desc .more {color: #000;}
    .img3 .image__desc .more {color: #fff;}

    .image__desc h3 {
        font-size: 24px;
        margin: 5px;
    }
    .image__desc .more {
        font-size: 16px;
    }
    .image__desc .more:hover {
        text-decoration: underline;
    }

03. ๊ฒฐ๊ณผ๋ณด๊ธฐ

โ˜›์›๋ณธ ์‚ฌ์ดํŠธ
์ƒˆ๋กœ์šด ์ฐฝ์œผ๋กœ ์—ด๊ธฐ
โ˜› ์›๋ณธ ์†Œ์Šค ๋ณด๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

'CSS > Layout_Site' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ํ…์ŠคํŠธ ์œ ํ˜• (1)  (2) 2022.09.01
์ด๋ฏธ์ง€ ์œ ํ˜• (3)  (2) 2022.08.22
์ด๋ฏธ์ง€ ์œ ํ˜• (1)  (4) 2022.08.17
์นด๋“œ ์œ ํ˜• (3)  (8) 2022.08.11
์นด๋“œ ์œ ํ˜• (2)  (7) 2022.08.10

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”