이미지/텍스트 유형 사이트 만들기!

이미지 텍스트 유형 만들기!

피그마를 이용해 그리드를 생성 후 각 규격에 맞게 요소들을 구성합니다.

---

HTML 코드

웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입합니다.

코드보기

<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>

---

CSS코드

폰트는 'NexonLv1Gothic'를 이용하고 이미지 텍스트 유형을 제작합니다!

코드보기

@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 400;
    }

    /* Reset */
    .blind{
        position: absolute;
        clip: rect(0, 0, 0, 0);
        width: 1px;
        height: 1px;
        left: -1px;
        top: -1px;
    }

    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    img {
        width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: normal;
    }

    /* common(공통) */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
    }

    .section {
        padding: 120px 0;
        /*위 아래 */
    }

    .section>h2 {
        /* ">" 이걸로 section 안에 있는 h2선택 */
        font-size: 50px;
        line-height: 1;
        /* 1이라고 적으면 auto랑 똑같음 */
        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;
    }

    /* cardType */
    .card__inner {
        display: flex;
        /* 생성한 요소들을 flex로 정렬합니다. */
        justify-content: space-between;
        /*창 크기에 맞게 좌우로 정렬합니다 */
        /*콘텐츠를 양쪽으로 정렬*/
    }
    li{
        list-style: none;
    }

    .card {
        width: 32%;
        background-color: #f5f5f5;
    }

    .card__body {
        padding: 24px;
    }

    .card__body .tit {
        font-size: 24px;
        margin-bottom: 10px;

        /* 한줄 효과 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 20px;
    }

    .card__body .desc {
        font-size: 18px;
        line-height: 1.4;
        color: #666;
        margin-bottom: 20px;
        font-weight: 300;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4; /*줄 효과*/
        -webkit-box-orient: vertical;
    }

    .card__body .btn {}

    /* imgTextType */
    .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;
    }
    .imgText__txt h3{
        font-size: 50px;
        font-weight: 300;
        word-break: keep-all;
        line-height: 1.4;
        margin-bottom: 20px;
        margin-top: 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 ul li a{
        color: #666;
    }

    .imgText__txt ul 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 / cover;
    }
    .imgText__img.img2{
        background: url(img/imgText_bg02.jpg) no-repeat center / cover;
    }

---

결과

---

원본 소스 보기

원본 페이지 보기