웹사이트 만들기 : 이미지 텍스트 유형 레이아웃01

레이아웃 : 이미지 텍스트 유형01

다음과 같은 이미지와 텍스트가 혼합된 유형의 레이아웃을 작업해 보도록 하겠습니다.

HTML 소스

먼저, container 박스 안에 텍스트와 첫번째 이미지, 두번째 이미지를 삽입할 div 박스를 3개 만들어 주었습니다. 텍스트 박스에는 제목, 설명, 내용 목록을 작성해 주었고, 이미지 박스에는 이미지와 링크를 작업해 주었습니다.

<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 class="blue" href="#">튜토리얼 사이트</a>
        </div>
    </div>
</section>

CSS 소스

세 개의 div 박스는 flex와 space-between을 이용해 레이아웃 작업을 해 주었습니다. 이미지는 백그라운드 형식으로 삽입해 주었습니다.

/* 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;
}
.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 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-color: #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/imgText01_bg01.jpg) no-repeat center / cover;
}
.imgText__img.img2 {
    background: url(img/imgText01_bg02.jpg) no-repeat center / cover;
}

결과

원본 소스 보기 원본 사이트 보기