텍스트 / 이미지 사이트

텍스트 / 이미지 사이트

텍스트와 이미지 사이트 유형의 웹 사이트를 디자인 해보았습니다.

01. figma

간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다.

02. HTML

HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다.

<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="#">낮잠 사이트</a></li>
                <li><a href="#">맹수 사이트</a></li>
                <li><a href="#">깜찍한 사이트</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>

03. css

공통된 요소가 있으므로 그것을 제외한 뒤 작성하였습니다.

 .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;
}
.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 {
    padding-left: 20px;
    position: relative;
}
.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: #7966ce;
    color: #fff;
    font-size: 18px;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
}

.imgText__img  a.blue {
    background-color: rgb(102, 170, 209);
}

.imgText__img.img1{
    background : url(/site/imgTextType/img/imgText_01.jpg) no-repeat center / cover ;
}
.imgText__img.img2{
    background: url(/site/imgTextType/img/imgText_02.jpg) no-repeat center / cover;
}

원본 소스 보여주기

원본 사이트 보여주기