웹사이트 만들기/ImageType 01

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

이번엔 새로운 유형인 이미지 유형에 대해 알아보겠습니다. 기존에 했었던 카드타입과 굉장히 유사했던 부분이라 어렵지 않게 따라하실 수 있을거에요.

---

---

기존 카드타입01번과 레이아웃은 크게 다르지 않으므로 카드타입01번의 코드를 조금 활용해서 작업했습니다.

background: url(이미지경로) no-repeat center;

이미지 위에 글씨를 나타내기 위해서는 여태까지 position을 이용했었는데요. 이번에 새롭게 등장한 이녀석은 배경 자체에 그림을 입히는 방법입니다. no-repeat과 center는 선택사항이고, url()안에 이미지경로만 입력해주면 원하는 그림을 단색배경대신 사용할 수 있습니다.
* no-repeat: background-repeat속성에 해당하는 값으로 작은이미지일경우 반복출력여부를 조정할 수 있는 속성값입니다.
* center: background-position속성에 해당하는 값으로 이미지의 좌표를 수정할 수 있습니다. px단위, left, top, right등등을 사용할 수 있습니다.

CSS 속성

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

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

/* 리셋 */
*{
    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;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

/* 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/image_type01_01.jpg) no-repeat center;
}
.image.img2{
    background: url(img/image_type01_02.jpg) no-repeat center;
}
.image__title{
    font-size: 32px;
    margin-bottom: 10px;
}
.image__desc{
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 300;
}
.image__btn{
    font-size: 16px;
    color: #fff;
    background-color: #49442C;
    display: inline-block;
    padding: 10px 20px;
}
.image__btn{
    background-color: #737263;
}

HTML 속성

<section id="imgType01" class="image__wrap nexon section">
    <h2>도베르만이 세상을 구한다🐺🐾</h2>
    <p>아파트에서 도베르만 키우고 싶다... 아파트에도 마당이 있었으면 좋겠네요.... 마당 설치 해주실분?</p>
    <div class="image__inner container">
        <article class="image img1">
            <h3 class="image__title">도베르만이 세상을 구한다</h3>
            <p class="image__desc">늠름한 도베르만을 보세요. 이 도베르만은 안덥나봐요. 이렇게 더운날에 얘는 안더울까요? 좋겠다 나도 바다 가고 싶다...</p>
            <a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
        </article>
        <article class="image img2">
            <h3 class="image__title">도베르만이 세상을 구한다</h3>
            <p class="image__desc">늠름한 도베르만을 보세요. 이 도베르만은 안덥나봐요. 이렇게 더운날에 얘는 안더울까요? 좋겠다 나도 바다 가고 싶다...</p>
            <a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
        </article>
    </div>
</section>

결과보기

원본 소스 보기 원본 사이트