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

์Šฌ๋ผ์ด๋“œ ์œ ํ˜• (1)

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

โญ๏ธ ์Šฌ๋ผ์ด๋“œ ์œ ํ˜• 01 โญ๏ธ


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

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

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

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

    <section id="sliderType" class="slider__wrap">
    <h2 class="blind">์Šฌ๋ผ์ด๋“œ ์˜์—ญ</h2>
    <div class="slider__inner">
        <div class="slider">
            <div class="slider__img">
                <div class="desc">
                    <span>DEVELOPER</span>
                    <h3>Way to Go</h3>
                    <p>
                        ๋„ˆ๋ฌด ๋ฌด๋ฆฌํ•˜์ง€ ๋ง์•„์š”! <br>
                        ์ง€๊ธˆ๋„ ์ž˜ํ•˜๊ณ  ์žˆ์–ด์š”
                    </p>
                    <div class="btn">
                        <a href="#">์ž์„ธํžˆ ๋ณด๊ธฐ</a>
                        <a href="#" class="black">์‚ฌ์ดํŠธ ๋ณด๊ธฐ</a>
                    </div>
                </div>
            </div>
            <div class="slider__arrow">
                <a href="#" class="left"><span class="ir">์ด์ „ ์ด๋ฏธ์ง€</span></a>
                <a href="#" class="right"><span class="ir">๋‹ค์Œ ์ด๋ฏธ์ง€</span></a>
            </div>
            <div class="slider__dot">
                <a href="#" class="dot active"><span class="ir">1</span></a>
                <a href="#" class="dot"><span class="ir">2</span></a>
                <a href="#" class="dot"><span class="ir">3</span></a>
                <a href="#" class="play"><span class="ir">ํ”Œ๋ ˆ์ด</span></a>
                <a href="#" class="stop"><span class="ir">์ •์ง€</span></a>
            </div>
        </div>
    </div>
</section>

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

    /* slideType */
    .slider__inner {
        margin-top: 70px;
    }
 
    .slider {
        position: relative;
    }
 
    .slider__img {
        /* height: 500px; */
        background: url(../site01/assets/img/slider_bg01.jpg) no-repeat center / cover;
    }
 
    .slider__img .desc {
        width: 1160px;
        margin: 0 auto;
        padding: 100px 20px;
    }
 
    .slider__img .desc span {
        font-size: 16px;
        background-color: #fff;
        padding: 1px 14px 0 14px;
        border-radius: 30px;
        text-transform: uppercase;
        margin-bottom: 10px;
        display: inline-block;
    }
 
    .slider__img .desc h3 {
        font-size: 110px;
        font-weight: 300;
        line-height: 1;
        color: #fff;
        text-transform: uppercase;
        margin-bottom: 16px;
        margin-left: -8px;
    }
 
    .slider__img .desc p {
        font-size: 20px;
        font-weight: 300;
        color: #fff;
        line-height: 1.35;
        margin-bottom: 130px;
 
    }
 
    .slider__img .desc .btn a {
        font-size: 16px;
        background-color: #fff;
        padding: 11px 50px;
        display: inline-block;
    }
 
    .slider__img .desc .btn a.black {
        background-color: #000;
        color: #fff;
    }
 
    .slider__arrow a {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 56px;
        background-image: url(../img/slider_icon.svg);
    }
 
    .slider__arrow a.left {
        left: 20px;
    }
 
    .slider__arrow a.right {
        right: 20px;
        background-position: -50px 0;
    }
 
    .slider__dot {
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
        bottom: 25px;
    }
 
    .slider__dot a {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(../site01/assets/img/slider_icon.svg);
        background-position: -20px -70px;
    }
 
    .slider__dot a.active {
        background-position: 0px -70px;
    }
 
    .slider__dot a.play {
        background-position: -40px -70px;
    }
 
    .slider__dot a.stop {
        background-position: -60px -70px;
    }

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

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

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

ํ‘ธํ„ฐ ์œ ํ˜• (1)  (2) 2022.09.06
๋ฐฐ๋„ˆ ์œ ํ˜• (1)  (2) 2022.09.06
ํ—ค๋” ์œ ํ˜• (1)  (2) 2022.09.02
์ด๋ฏธ์ง€ ํ…์ŠคํŠธ ์œ ํ˜• (1)  (3) 2022.09.02
ํ…์ŠคํŠธ ์œ ํ˜• (3)  (2) 2022.09.01

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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