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

ํ‘ธํ„ฐ ์œ ํ˜• (1)

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

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


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

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

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

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

    <footer id="footerType" class="footer__wrap nexon section gray">
    <h2 class="blind">ํ‘ธํ„ฐ ์˜์—ญ</h2>
    <div class="footer__inner container">
        <div class="footer__menu">
            <div>
                <h3>์‚ฌ์ดํŠธ</h3>
                <ul>
                    <li><a href="#">์›นํ‘œ์ค€ ์‚ฌ์ดํŠธ</a></li>
                    <li><a href="#">๋ฐ˜์‘ํ˜• ์‚ฌ์ดํŠธ</a></li>
                    <li><a href="#">ํŒจ๋Ÿด๋ž™์Šค ์‚ฌ์ดํŠธ</a></li>
                    <li><a href="#">ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ</a></li>
                </ul>
            </div>
            <div>
                <h3>ํ—ค๋” ์˜์—ญ</h3>
                <ul>
                    <li><a href="#">๋ฉ”๋‰ด ์œ ํ˜• 01</a></li>
                    <li><a href="#">๋ฉ”๋‰ด ์œ ํ˜• 02</a></li>
                </ul>
            </div>
            <div>
                <h3>์Šฌ๋ผ์ด๋“œ ์˜์—ญ</h3>
                <ul>
                    <li><a href="#">์Šฌ๋ผ์ด๋“œ ์œ ํ˜• 01</a></li>
                    <li><a href="#">์Šฌ๋ผ์ด๋“œ ์œ ํ˜• 02</a></li>
                </ul>
            </div>
            <div>
                <h3>์ด๋ฏธ์ง€ ์˜์—ญ</h3>
                <ul>
                    <li><a href="#">์ด๋ฏธ์ง€ ์œ ํ˜• 01</a></li>
                    <li><a href="#">์ด๋ฏธ์ง€ ์œ ํ˜• 02</a></li>
                    <li><a href="#">์ด๋ฏธ์ง€/ํ…์ŠคํŠธ ์œ ํ˜• 01</a></li>
                    <li><a href="#">์ด๋ฏธ์ง€/ํ…์ŠคํŠธ ์œ ํ˜• 02</a></li>
                    <li><a href="#">ํ…์ŠคํŠธ ์œ ํ˜• 01</a></li>
                </ul>
            </div>
            <div>
                <h3>์ปจํ…์ธ  ์˜์—ญ</h3>
                <ul>
                    <li><a href="#">์นด๋“œ ์œ ํ˜• 01</a></li>
                    <li><a href="#">์นด๋“œ ์œ ํ˜• 02</a></li>
                    <li><a href="#">์นด๋“œ ์œ ํ˜• 03</a></li>
                </ul>
            </div>
            <div>
                <h3>ํ‘ธํ„ฐ ์˜์—ญ</h3>
                <ul>
                    <li><a href="#">ํ‘ธํ„ฐ ๋ฉ”๋‰ด ์œ ํ˜• 01</a></li>
                    <li><a href="#">ํ‘ธํ„ฐ ์ปจํ…ํŠธ ์œ ํ˜• 02</a></li>
                    <li><a href="#">ํ‘ธํ„ฐ ์ด๋ฉ”์ผ ์œ ํ˜• 03</a></li>
                </ul>
            </div>
        </div>
        <div class="footer__right">
            2022 oranssy. portfolio is here<br>
            All rights reserved.
        </div>
    </div>
</footer>

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

    /* footerType */
    .footer__menu {
        display: flex;
    }

    .footer__menu>div {
        width: 16%;
        margin-bottom: 70%;
    }

    .footer__menu>div h3 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .footer__menu li {
        list-style: none;
    }

    .footer__menu li a {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
        display: block;
    }

    .footer__right {
        border-top: 1px solid #d9d9d9;
        text-align: center;
        padding-top: 40px;
        color: #666;
        line-height: 1.5;
    }

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

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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