티스토리 뷰

SITE

이미지 유형 01

김코린👩🏻‍💻 2022. 8. 17. 17:53

Image Type Web Site

HTML, CSS를 통해 이미지 유형 웹사이트 만들기 - 첫번째

Result

원본 소스 보기
원본 페이지 보기

Figma

첫번째 이미지 유형 그리드

HTML

먼저 article로 카드영역을 나누고 div backgound에 이미지를 넣어봤습니다.

<body>
    <section id="imageType01" class="ima__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 href="#" class="image__btn">자세히 보기</a> 
            </article>
            <article class="image img2">
                <h3 class="image__title">포트폴리오가 실력이다.</h3>
                <p class="image__desc">포트폴리오가 실력이다.포트폴리오가 실력이다.포트폴리오가 실력이다.
                    포트폴리오가 실력이다.포트폴리오가 실력이다.</p>
                <a href="#" class="image__btn">자세히 보기</a> 
            </article>
        </div>
    </section>
</body>

CSS

2개의 카드에 flex 와 space-between을 통해 가로 정렬을 맞췄습니다.

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

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

/* reset */
* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    color: #000;
}
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; /*line height auto는 1을 의미*/
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
h1, h2, h3, h4, h5 ,h6 {
    font-weight: normal;
}

/* 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(../cardType/img/imageType01_bg01.png) no-repeat center;
}
.image.img2 {
    background: url(../cardType/img/imageType01_bg02.png) no-repeat center;
}
.image__title {
    font-size: 32px;
    margin-bottom: 10px;
}
.image__desc {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 300;
    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: rgba(77, 77, 77, 0.514);
    padding: 10px 20px;
    display: inline-block;
}

'SITE' 카테고리의 다른 글

이미지 유형 03  (4) 2022.08.19
이미지 유형 02  (3) 2022.08.17
카드유형 웹사이트 만들기 03 (Card Type Web Site)  (10) 2022.08.10
카드유형 웹사이트 만들기 02 (Card Type Web Site)  (11) 2022.08.09
카드유형 웹사이트 만들기 01 (Card Type Web Site)  (9) 2022.08.08
공지사항