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

๋ฐฐ๋„ˆ ์œ ํ˜• (1)

by oranssy 2022. 9. 6.
728x90
๋ฐ˜์‘ํ˜•

โญ๏ธ ๋ฐฐ๋„ˆ ์œ ํ˜• 01 โญ๏ธ


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

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

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

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

    <section id="bannerType" class="banner__wrap nexon">
    <h2 class="blind">๋ฐฐ๋„ˆ ์˜์—ญ</h2>
    <div class="banner__inner">
        <h3 class="title">์กฐ๋ช… ๋””์ž์ธ</h3>
        <p class="desc">
            ๋” ๋‹ค์–‘ํ•œ ์กฐ๋ช… ๋””์ž์ธ์„ ์‚ดํŽด๋ณด์„ธ์š”
            <a href="#" title="์œ ํŠœ๋ธŒ ํŽ˜์ด์ง€๋กœ ์ด๋™">http://www.youtube.com</a>
        </p>
        <span class="small">๋ฐฐ๋„ˆ ์œ ํ˜• 01</span>
    </div>
</section>

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

    /* bannerType */
    .banner__inner {
        background-image: url(../site01/assets/img/banner_bg01.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: center;
        padding: 120px 0;
        color: #fff;
    }

    .banner__inner .title {
        font-size: 50px;
        line-height: 1;
        font-weight: 300;
        margin-bottom: 40px;
    }

    .banner__inner .desc {
        font-size: 24px;
        line-height: 1.5;
        font-weight: 300;
        margin-bottom: 70px;
    }

    .banner__inner .desc a {
        color: #fff;
        display: block;
    }

    .banner__inner .desc a:hover {
        text-decoration: underline;
    }

    .banner__inner .small {
        font-size: 16px;
        text-decoration: underline;
    }

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

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

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

์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ  (2) 2022.09.14
ํ‘ธํ„ฐ ์œ ํ˜• (1)  (2) 2022.09.06
์Šฌ๋ผ์ด๋“œ ์œ ํ˜• (1)  (2) 2022.09.06
ํ—ค๋” ์œ ํ˜• (1)  (2) 2022.09.02
์ด๋ฏธ์ง€ ํ…์ŠคํŠธ ์œ ํ˜• (1)  (3) 2022.09.02

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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