이미지 텍스트 타입 01

이미지 텍스트 구조 01

사이트에 기초적인 구조를 가진 이미지 텍스트 구조를 만들어 봤습니다.

Site HTML

사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.

    <section id="imgTextType" class="imgText__wrap nexon section">
        <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>

Site CSS

사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다.

    /* 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 {
        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: 1160px;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {
        font-size: 50px;
        line-height: 1;
        text-align: center;
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 22px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
    .gray {
        background-color: #f5f5f5;
    }

    /* imgText */
    .imgText__inner {
        display: flex;
        justify-content: space-between;
    }
    .imgText__inner > div {
        width: 32%;
        height: 500px;
    }
    .imgText__txt {}
    .imgText__txt span {
        font-size: 16px;
        color: #666;
        text-decoration: underline;
        text-underline-position: under;
        margin-bottom: 20px;
        display: block;
    }
    .imgText__txt p {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.5;
        color: #666;
        margin-bottom: 10px;
    }
    .imgText__txt h3 {
        font-size: 50px;
        font-weight: 300;
        word-break: keep-all;
        line-height: 1.4;
        margin-bottom: 20px;
    }
    .imgText__txt ul li{
        font-size: 18px;
        font-weight: 300;
        line-height: 1.6;
        margin-left: 20px;
        color: #666;
    }
    .imgText__txt ul li a {
        color: #666;
    }
    .imgText__txt ul li::before {
        content: '';
        width: 5px;
        height: 3px;
        border-radius: 50%;
        position: absolute;
        left: 5px;
        top: 9px;
    }
    .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;
    }

코드 원본 보기

결과물

원본 사이트 보기