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

์ด๋ฏธ์ง€ ํ…์ŠคํŠธ ์œ ํ˜• (1)

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

โญ๏ธ ์ด๋ฏธ์ง€ ํ…์ŠคํŠธ ์œ ํ˜• 01 โญ๏ธ


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

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

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

    <section id="imgTextType" class="imgText__wrap nexon section gray">
    <h2 class="blind">์œ ์šฉํ•œ ์‚ฌ์ดํŠธ ์‚ดํŽด๋ณด๊ธฐ</h2>
    <div class="imgText__inner container">
        <div class="imgText__txt">
            <span>์ด๋ฏธ์ง€ ํ…์ŠคํŠธ ์œ ํ˜• 01</span>
            <h3>์œ ์šฉํ•œ ์‚ฌ์ดํŠธ ์‚ดํŽด๋ณด๊ธฐ</h3>
            <p>์›น ๋””์ž์ด๋„ˆ, ์›น ํผ๋ธ”๋ฆฌ์…”, ํ”„๋ก ํŠธ ์•ค๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ ์ž…๋‹ˆ๋‹ค.</p>
            <ul>
                <li><a href="/">ํŠœํ† ๋ฆฌ์–ผ ์‚ฌ์ดํŠธ</a></li>
                <li><a href="/">๋ž˜ํผ๋Ÿฐ์Šค ์‚ฌ์ดํŠธ</a></li>
                <li><a href="/">์›น ํฐํŠธ ์‚ฌ์ดํŠธ</a></li>
                <li><a href="/">CSS ์‚ฌ์ดํŠธ</a></li>
                <li><a href="/">WebGL ์‚ฌ์ดํŠธ</a></li>
                <li><a href="/">Youtube ์‚ฌ์ดํŠธ</a></li>
            </ul>
        </div>
        <div class="imgText__img img1">
            <a href="/">๋ ˆํผ๋Ÿฐ์Šค ์‚ฌ์ดํŠธ</a>
        </div>
        <div class="imgText__img img2">
            <a href="/" class="blue">ํŠœํ† ๋ฆฌ์–ผ ์‚ฌ์ดํŠธ</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;   /* ๊ธฐ๋ณธ ๊ธ€์ž ๋‘๊ป˜๊ฐ€ ๋‘๊ป๊ธฐ ๋•Œ๋ฌธ์— ๋ณดํ†ต ๊ตต๊ธฐ๋กœ ๋ฐ”๊ฟˆ */
    }
    li {
        list-style: none;   /* ๋ชฉ๋ก ์•ž์— ๊ธฐ๋ณธ์œผ๋กœ ์ƒ๊ธฐ๋Š” ์  ์—†์• ๊ธฐ */
    }
    /* blind */
    .blind {            /* ์•ˆ ๋ณด์ด๊ฒŒ ์ˆจ๊ธฐ๊ธฐ */
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
    }

    /* 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;
    }
    .gray {
        background-color: #f5f5f5;
    }

    /* imgTextType */
    .imgText__inner {
        display: flex;
        justify-content: space-between;
    }
    .imgText__inner > div {
        width: 32%;
        height: 500px;
    }
    .imgText__txt span {
        font-size: 16px;
        color: #666;
        text-decoration: underline;
        text-underline-position: under;     /* ๊ธฐ๋ณธ ๋ฐ‘์ค„๋ณด๋‹ค ๊ธ€์ž์— ๊ฐ€๊นŒ์ด ๋ถ™์–ด์žˆ๋„๋ก */
        margin-bottom: 20px;
        display: block;     /* span์˜ ๊ธฐ๋ณธ ์„ฑ์งˆ์ธ ํ–‰์„ ์—ด์˜ ํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ”์คŒ */
    }
    .imgText__txt h3 {
        font-size: 50px;
        font-weight: 300;
        word-break: keep-all;   /* ์–ด์ ˆ ๋‹จ์œ„(๋„์–ด์“ฐ๊ธฐ ๋‹จ์œ„)๋กœ ์ค„๋ฐ”๊ฟˆ์ด ๋˜๋„๋ก ํ•จ */
        line-height: 1.4;
        margin-bottom: 20px;
    }
    .imgText__txt p {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.5;
        color: #666;
        margin-bottom: 10px;
    }
    .imgText__txt ul {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.6;
    }
    .imgText__txt ul li {
        position: relative;
        padding-left: 20px;
    }
    .imgText__txt li {
        color: #666;
    }
    .imgText__txt li::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        left: 5px;
        top: 9px;
        background: #666;
    }
    .imgText__img {
        border-radius: 10px;
        position: relative;
    }
    .imgText__img a {
        position: absolute;
        left: 30px;
        bottom: 30px;
        background-color: #7c2b39;
        color: #fff;
        font-size: 18px;
        padding: 10px 30px;
        border-radius: 30px;
        display: inline-block;
    }
    .imgText__img a.blue {
        background-color: #2B387C;
    }
    .imgText__img.img1 {
        background: url(img/imgText_bg01.jpg) no-repeat center;     /* ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋Š” ๋ฐ˜๋ณต ์ฑ„์›€์„ ์—†์• ์ฃผ๊ณ  ๊ฐ€์šด๋ฐ ์ •๋ ฌ */
    }
    .imgText__img.img2 {
        background: url(img/imgText_bg02.jpg) no-repeat center;
    }

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

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

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

์Šฌ๋ผ์ด๋“œ ์œ ํ˜• (1)  (2) 2022.09.06
ํ—ค๋” ์œ ํ˜• (1)  (2) 2022.09.02
ํ…์ŠคํŠธ ์œ ํ˜• (3)  (2) 2022.09.01
ํ…์ŠคํŠธ ์œ ํ˜• (2)  (2) 2022.09.01
ํ…์ŠคํŠธ ์œ ํ˜• (1)  (2) 2022.09.01

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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