웹사이트 만들기 : 텍스트 유형 레이아웃02

레이아웃 : 텍스트 유형02

다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다.

HTML 소스

먼저, 컨테이너 박스 안에 title과 contents 박스를 만들어준 뒤, section 클래스에 display: flex, space-between 속성을 추가해 레이아웃을 배치했습니다. title 안에는 sub title 상자, title, desc를 만들어 주었습니다. contents는 top과 bottom으로 나누어, 각각 두 개의 card가 배치되도록 작업해 주었습니다.

<section id="textType02" class="container section gmark">
    <div id="title">
        <p class="title__sub">TEXT TYPE02</p>
        <h2 class="title__title">귀여운 동물들 전문과정</h2>
        <p class="title__desc">세상의 귀여운 댕댕이... 귀여운 고양이...
            귀여운 다람쥐... 귀여운 고라니... 
            귀여운 알파카... 귀여운 고릴라...</p>
    </div>
    <div id="contents">
        <div class="card__top">   
            <div class="card right">
                <div class="icon"></div>
                <h2 class="card__title">세상의 귀여운 댕댕이</h2>
                <p class="card__desc">귀, 귀, 귀 자로 끝나는 말은 왼쪽 귀, 오른쪽 귀, 내 귀, 남의 귀, 강아지 귀, 고양이 귀, 고라니 귀, 알파카 귀, 고릴라 귀, 그리고 또... 세줄효과 넣어서 더 써야 하는데...</p>
            </div>
            <div class="card">
                <div class="icon icon02"></div>
                <h2 class="card__title">세상의 귀여운 고양이</h2>
                <p class="card__desc">귀, 귀, 귀 자로 끝나는 말은 왼쪽 귀, 오른쪽 귀, 내 귀, 남의 귀, 강아지 귀, 고양이 귀, 고라니 귀, 알파카 귀, 고릴라 귀, 그리고 또... 세줄효과 넣어서 더 써야 하는데...</p>
            </div>
        </div>
        <div class="card__bottom">
            <div class="card right">
                <div class="icon icon03"></div>
                <h2 class="card__title">세상의 귀여운 다람쥐</h2>
                <p class="card__desc">귀, 귀, 귀 자로 끝나는 말은 왼쪽 귀, 오른쪽 귀, 내 귀, 남의 귀, 강아지 귀, 고양이 귀, 고라니 귀, 알파카 귀, 고릴라 귀, 그리고 또... 세줄효과 넣어서 더 써야 하는데...</p>
            </div>
            <div class="card">
                <div class="icon icon04"></div>
                <h2 class="card__title">세상의 귀여운 고라니</h2>
                <p class="card__desc">귀, 귀, 귀 자로 끝나는 말은 왼쪽 귀, 오른쪽 귀, 내 귀, 남의 귀, 강아지 귀, 고양이 귀, 고라니 귀, 알파카 귀, 고릴라 귀, 그리고 또... 세줄효과 넣어서 더 써야 하는데...</p>
            </div>
        </div>
    </div>
</section>

CSS 소스

폰트는 지마켓 산스를 사용하였고, flex를 이용하여 각각의 카드들을 배치해 주었습니다. 아이콘은 이미지 스프라이트 형식으로 작업해 주었고, 아이콘에 담긴 의미는 특별히 없기 때문에 ir효과는 생략했습니다. card의 각각의 desc 박스에는 세 줄 효과를 추가해 주었습니다.

#title {
    width: 308px;
}
#title .title__sub {
    font-size: 12px;
    background-color: #FF0000;
    color: white;
    width: 152px;
    height: 24px;
    border-radius: 20px;
    text-align: center;
    line-height: 24px;
    font-weight: normal;
    margin-bottom: 10px;
}
#title .title__title {
    font-weight: bold;
    line-height: 120%;
    font-size: 50px;
    margin-bottom: 35px;
}
#title .title__desc {
    font-weight: normal;
    font-size: 18px;
    line-height: 140%;
}
#contents {
    display: flex;
    flex-direction: column;
}
#contents .card__top {
    display: flex;
    margin-bottom: 30px;
}
#contents .card__bottom {
    display: flex;
}
#contents .card {
    width: 394px;
    height: 209px;
}
#contents .card.right {
    margin-right: 20px;
}
#contents .card .icon {
    width: 60px;
    height: 60px;
    background: url(img/card01_icon01.svg);
    margin-left: 20px;
    margin-bottom: 10px;
    border-radius: 50%;
}
#contents .card .icon.icon02 {
    background-position-x: -60px;
}
#contents .card .icon.icon03 {
    background-position-x: -120px;
}
#contents .card .icon.icon04 {
    background-position-x: -300px;
}
#contents .card .card__title {
    margin-left: 20px;
    margin-bottom: 20px;
    font-size: 24px;
}
#contents .card .card__desc {
    margin-left: 20px;
    font-size: 18px;
    line-height: 140%;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}

결과

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