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

ํ—ค๋” ์œ ํ˜• (1)

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

โญ๏ธ ํ—ค๋” ์œ ํ˜• 01 โญ๏ธ


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

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

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

    <section id="headerType" class="header__wrap nexon">
    <div class="header__inner">
        <div class="header__logo">
            <a href="#">web <em>site</em></a>
        </div>
        <div class="header__menu">
            <li><a href="#">ํ—ค๋” ์˜์—ญ</a></li>
            <li><a href="#">์Šฌ๋ผ์ด๋“œ ์˜์—ญ</a></li>
            <li><a href="#">๋ฐฐ๋„ˆ ์˜์—ญ</a></li>
            <li><a href="#">์ปจํ…์ธ  ์˜์—ญ</a></li>
            <li><a href="#">ํ‘ธํ„ฐ ์˜์—ญ</a></li>
        </div>
        <div class="header__member">
            <a href="#">๋กœ๊ทธ์ธ</a>
        </div>
    </div>
</section>

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

    /* fonts */
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
 
    .nexon {
        font-family: 'NexonLv1Gothic';  /* ํฐํŠธ ์ง€์ • */
        font-weight: 400;    /* ํฐํŠธ ๋‘๊ป˜ ์„ค์ • */
    }
 
    /* reset */
    * {
        margin: 0;     /* ๊ธฐ๋ณธ ๋ธŒ๋ผ์šฐ์ €์˜ ๋นˆ ๊ณต๊ฐ„ ์—†์• ๊ธฐ */
        padding: 0;
    }
    a {
        text-decoration: none;    /* ๋งํฌ ๊ธ€์ž์˜ ๊ธฐ๋ณธ ํŒŒ๋ž‘์ƒ‰ ์—†์• ๊ณ  ๊ฒ€์ •์œผ๋กœ ๋ฐ”๊ฟˆ */
        color: #000;
    }
    img {
        width: 100%;    /* ์ด๋ฏธ์ง€ ๋น„์œจ */
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;   /* ๊ธฐ๋ณธ ๊ธ€์ž ๋‘๊ป˜๊ฐ€ ๋‘๊ป๊ธฐ ๋•Œ๋ฌธ์— ๋ณดํ†ต ๊ตต๊ธฐ๋กœ ๋ฐ”๊ฟˆ */
    }
    em, i, address {
        font-style: 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: 20px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
 
    /* headerType */
    .header__inner {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;     /* ์•ˆ์ชฝ ์—ฌ๋ฐฑ์ด ๋‹ค๋ฅธ ์š”์†Œ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด */
        border-bottom: 1px solid #ccc;
        position: fixed;
        left: 0;
        top: 0;
        background: #fff;
        backdrop-filter: blur;
    }
    .header__logo {
        width: 20%;
        font-size: 30px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .header__logo em {
        font-size: 18px;
        font-weight: 400;
    }
    .header__menu {
        width: 60%;
        text-align: center;
    }
    .header__menu li {
        display: inline;
    }
    .header__menu li a {
        padding: 13px 30px;
        margin: 0 5px;
        transition: background-color 0.3s;
        border-radius: 5px;
    }
    .header__menu li a:hover {
        background: #f1f1f1;
        border-radius: 5px;
    }
    .header__member {
        width: 20%;
        text-align: right;
    }
    .header__member a {
        font-size: 16px;
        border: 1px solid #000;
        padding: 10px 30px;
        border-radius: 50px;
        transition: all 0.3s ease;
    }
    .header__member a:hover {
        background-color: #000;
        color: #fff;
    }

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

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

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

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

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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