이미지 유형 (1)

728x90

⭐️ 이미지 유형 01 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다.

02. 상자(div) 만들기 : <body>

section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다.
카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다.
중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다.

    <section id="imageType" class="image__wrap nexon section">
    <h2>나의 쉴 곳은 어디에</h2>
    <p>우리 모두의 마음이 편안해지는 힐링 장소를 소개합니다.</p>
    <div class="image__inner container">
        <article class="image img1">
            <h3 class="tit">들꽃이 가득한 유원지에서</h3>
            <p class="desc">나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가
                품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요.</p>
            <a class="btn" href="#">자세히보기</a>
        </article>
        <article class="image img2">
            <h3 class="tit white">푸른 바람의 길목에서</h3>
            <p class="desc white">잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다. 잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다. 잔잔하고 시원한 바람이 마음을 다독이는 그곳으로 함께 가 봅시다.</p>
            <a class="btn" href="#">자세히보기</a>
        </article>
    </div>
</section>

02. style(css) 설정하기 : <style>

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

    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 300;
    }
    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    img {
        width: 570px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
        min-width: 1160;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {
        font-size: 50px;
        line-height: 1;
        text-align: center;
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 22px;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }

    /* imageType01 */
    .image__wrap {}
    .image__inner {
        display: flex;
        justify-content: space-between;
    }
    .image {
        width: 49%;
        height: 370px;
        padding: 197px 30px 30px 30px;
        box-sizing: border-box;  /* padding 의 영향으로 전체 부피가 커지는 것 방지*/
    }
    .image.img1 {
        background: url(img/image_bg01_01.jpg) no-repeat center / cover ;
    }
    .image.img2 {
        background: url(img/image_bg01_02.jpg) no-repeat center / cover ;
    }
    .image .tit {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .image .tit.white {
        color: #fff
    }
    .image .desc {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;   /* clamp 줄바꿈 2줄 이상 되면 ... 으로 바뀜 - '3줄 효과' 검색해서 사용 */
        -webkit-box-orient: vertical;
    }
    .image .desc.white {
        color: #fff;
    }
    .image .btn {
        font-size: 16px;
        color: #fff;
        background: #755C2B;
        padding: 10px 20px;
        display: inline-block;
    }

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기

728x90

'CSS > Layout_Site' 카테고리의 다른 글

이미지 유형 (3) (2)	2022.08.22
이미지 유형 (2) (2)	2022.08.18
카드 유형 (3) (8)	2022.08.11
카드 유형 (2) (7)	2022.08.10
카드 유형 (1) (8)	2022.08.09

깜냥깜냥🐾코딩 혜윰

이미지 유형 (1)

⭐️ 이미지 유형 01 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

댓글

티스토리툴바

이미지 유형 (1)

⭐️ 이미지 유형 01 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

관련글

댓글

티스토리툴바