이미지 유형01

사이트 만들기 : 이미지 유형1

카드 유형1번과 비슷한 유형으로, 이번엔 이미지 내부에 텍스트와 버튼이 위치하도록 하였습니다.

HTML

2개의 article 영역과 모두를 포함하는 container로 기준을 잡아주었습니다.

<section id="imageType01" class="image__wrap nexon section">
    <h2>온라인 강의</h2>
    <p>온라인 강의는 상황에 따라 매우 효율적인 방법입니다.</p>
    <div class="image__inner container">
        <article class="image img1">
            <h3 class="image__tit">온라인 강의</h3>
            <p class="image__desc">인터넷을 이용하여 교육자가 진행하는 사이버 원격 수업이다. 온라인 강의 혹은 사이버 강의이라고도 하며, 줄여서 인강, 싸강이라고 한다.</p>
            <a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
        </article>
        <article class="image img2">
            <h3 class="image__tit">온라인 강의</h3>
            <p class="image__desc">인터넷을 이용하여 교육자가 진행하는 사이버 원격 수업이다. 온라인 강의 혹은 사이버 강의이라고도 하며, 줄여서 인강, 싸강이라고 한다.</p>
            <a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
        </article>
    </div>
</section>

CSS

이번 유형은 html에 img태그를 사용하지않고, css에서 background: url을 사용하여 이미지를 넣어주었습니다.
리셋과 공통부분 css는 앞 유형과 동일합니다.

/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}

.image {
    width: 49%;
    height: 370px;
    color: #fff;
    padding: 200px 30px 30px 30px;
    box-sizing: border-box;
}

.image.img1 {
    background: url(img/img_bg01_01.jpg) no-repeat center;
}

.image.img2 {
    background: url(img/img_bg01_02.jpg) no-repeat center;
}

.image__tit {
    font-size: 32px;
    margin-bottom: 10px;
}

.image__desc {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.image__btn {
    font-size: 16px;
    color: #fff;
    background-color: #20B6A4;
    padding: 10px 20px;
    display: inline-block;
}

.image__btn.yellow{
    background-color: #386CAA;
}

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

반응형

'Site 만들기 > Image 유형' 카테고리의 다른 글

이미지 유형03  (6)	2022.08.20
이미지 유형02  (3)	2022.08.17