이미지 유형 01

사이트 만들기

이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다.

---

이미지 유형 사이트 만들기 01

2개의 이미지 안에 텍스트와 링크를 넣는 유형입니다.

이미지 유형01 코드

//CSS 파트
<style>
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

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

    /* reset */
    * {
        padding: 0;
        margin: 0;
    }
    h1, h2 ,h3 ,h4 ,h5, h6 {
        font-weight: normal;
    }
    a {
        text-decoration: none;
        color: black;
    }
    img {
        width: 100%;
    }

    /* 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;     /* 피그마에서 lh가 auto인것은 코딩에서 1임 */
        text-align: center;
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 22px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
    /* blind : 텍스트를 안보이게 숨기는 방법 */
    .blind {
        position:absolute;
        clip:rect(0 0 0 0);
        width:1px;
        height:1px;
        margin:-1px;
        overflow:hidden;
    }

    /* content */
    .container {
        width: 100px;
        height: 370px;
        display: flex;
        justify-content: space-between;
    }
    .img01 {
        width: 49%;
        height: 100%;
        background-color: rgb(97, 94, 94);
        background-image: url(img/img_bg01.jpg);
        position:relative
    }
    .text {
        position: absolute;
        left: 0;
        bottom: 0;
        margin: 30px;
    }
    .text > h3 {
        font-size: 32px;
        color: #fff;
        margin-bottom: 10px;
    }
    .text > p {
        font-size: 16;
        color: #fff;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .text > span {

    }
    .text > span a {
        font-size: 16px;
        color: #fff;
        display:block;
        width: 120px;
        height: 38px;
        background-color: rgba(62, 60, 55, 0.7);
        text-align: center;
        line-height: 38px;
    }
    .img02 {
        width: 49%;
        height: 100%;
        background-color: rgb(120, 89, 96, 0.7);
        background-image: url(img/img_bg02.jpg);
        position:relative
    }
</style>


//HTML 파트
<section id="imgType01" class="font section">
    <h2>365일 언제나 맛있는 과일 쥬스</h1>
    <p>남녀노소 누구에게나 인기있는 생과일 쥬스를 소개합니다!</p>
    <div class="container">
        <div class="img01">
            <div class="text">
                <h3>상큼한 오렌지 쥬스</h3>
                <p>
                    톡 쏘는 맛과 시원하고 달달한 오랜지 쥬스입니다.<br>
                    비타민C의 함유량도 엄청나요.
                </p>
                <span><a href="#">자세히보기</a> </span>
            </div>
        </div>
        <div class="img02">
            <div class="text">
                <h3>달콤한 딸기 쥬스</h3>
                <p>
                    달달하고 맛있는 딸기쥬스입니다.<br>
                    한모금 마시면 잊을수가 없는 맛이죠.
                </p>
                <span><a href="#">자세히보기</a> </span>
            </div>
        </div>
    </div>
</section>

카드 유형과 똑같이 2개의 박스를 만들고 해당 위치에 이미지와 텍스트를 넣어줍니다.
이미지를 넣을때 HTML에 <img>를 활용해 이미지를 삽입하는 방식과 CSS에 background-img를 사용해서 이미지를 삽입하는 방식이 있습니다.
background-img는 HTML에 이미지를 삽입하는 방식과 다르게 배경에 그림을 넣기 때문에 일반적인 방식으론 이미지에 링크를 넣을 수 없습니다.

텍스트는 하나로 묶어 position을 사용하면 쉽게 위치를 지정할 수 있습니다.

---

※ 완성된 형태

원본 소스 보기