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

레이아웃 : 텍스트 유형01

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

HTML 소스

먼저, container 박스를 만들어 주고, 그 안에 text__card 클래스명을 가진 div 박스를 만들어 주었습니다. 총 6개의 카드를 만든 뒤, 각각의 카드 안에는 아이콘과 제목, 설명, 더보기 버튼을 추가해 주었습니다.

<section id="textType01" class="container section nexon">
    <p>텍스트 유형01</p>
    <h2>세상의 귀여운 댕댕이</h2>
    <div class="text__card">
        <div class="card top">
            <div class="icon"></div>
            <h3 class="title">세상의 귀여운 댕댕이</h3>
            <p class="desc">세상의 귀여운 댕댕이... 댕댕이 이야기만 몇<br>
                번째인지... 댕댕이 글자를 보면 게슈탈트 붕<br>
                괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더</p>
            <a class="more" href="#">더보기</a>
        </div>
        <div class="card top ce">
            <div class="icon icon02"></div>
            <h3 class="title">세상의 귀여운 야옹이</h3>
            <p class="desc">세상의 귀여운 댕댕이... 댕댕이 이야기만 몇<br>
                번째인지... 댕댕이 글자를 보면 게슈탈트 붕<br>
                괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더</p>
            <a class="more" href="#">더보기</a>
        </div>
        <div class="card top">
            <div class="icon icon03"></div>
            <h3 class="title">세상의 귀여운 원숭이</h3>
            <p class="desc">세상의 귀여운 댕댕이... 댕댕이 이야기만 몇<br>
                번째인지... 댕댕이 글자를 보면 게슈탈트 붕<br>
                괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더</p>
            <a class="more" href="#">더보기</a>
        </div>
        <div class="card">
            <div class="icon icon04"></div>
            <h3 class="title">세상의 귀여운 고슴도치</h3>
            <p class="desc">세상의 귀여운 댕댕이... 댕댕이 이야기만 몇<br>
                번째인지... 댕댕이 글자를 보면 게슈탈트 붕<br>
                괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더</p>
            <a class="more" href="#">더보기</a>
        </div>
        <div class="card ce">
            <div class="icon icon05"></div>
            <h3 class="title">이 색깔 눈 아프죠?</h3>
            <p class="desc">세상의 귀여운 댕댕이... 댕댕이 이야기만 몇<br>
                번째인지... 댕댕이 글자를 보면 게슈탈트 붕<br>
                괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더</p>
            <a class="more" href="#">더보기</a>
        </div>
        <div class="card">
            <div class="icon icon06"></div>
            <h3 class="title">세상의 귀여운 코끼리</h3>
            <p class="desc">세상의 귀여운 댕댕이... 댕댕이 이야기만 몇<br>
                번째인지... 댕댕이 글자를 보면 게슈탈트 붕<br>
                괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더</p>
            <a class="more" href="#">더보기</a>
        </div>
    </div>
</section>

CSS 소스

폰트는 넥슨 Lv1 고딕을 사용하였고, display: flex와 flex-wrap을 이용하여 카드들을 가로로 배치하였습니다. 아이콘은 백그라운드 형식으로 작업해 주었고, 아이콘에 담긴 의미는 특별히 없기 때문에 ir효과는 생략했습니다. 각각의 카드들에 마우스를 대면 배경 색상이 바뀌도록 hover 효과도 작업해 주었습니다.

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

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

/* textType01 */
#textType01>p {
    font-size: 16px;
    color: #000;
    font-weight: normal;
    text-decoration-line: underline;
    margin-bottom: 10px;
}
.text__card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: space-between;
}
.text__card .card {
    width: 373px;
    height: 260px;
    background-color: white;
    border-radius: 10px;
    position: relative;
}
.text__card .card:hover{
    background-color: #efefef;
}
.text__card .card.top {
    margin-bottom: 20px;
}
.text__card .card.ce {
    margin-left: 20px;
    margin-right: 20px;
}
.text__card .card .icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-color: #B7C7FF;
    border-radius: 50%;
    margin-bottom: 10px;
    background: url(img/card01_icon01.svg) no-repeat;
}
.text__card .card .icon.icon02 {
    background-position: -60px 0;
}
.text__card .card .icon.icon03 {
    background-position: -120px 0;
}
.text__card .card .icon.icon04 {
    background-position: -180px 0;
}
.text__card .card .icon.icon05 {
    background-position: -240px 0;
}
.text__card .card .icon.icon06 {
    background-position: -300px 0;
}
.text__card .card .title {
    font-size: 24px;
    position: absolute;
    left: 20px;
    top: 90px;
}
.text__card .card .desc {
    font-size: 18px;
    color: #666;
    font-weight: 300;
    line-height: 140%;
    position: absolute;
    left: 20px;
    top: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.text__card .card .more {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    text-decoration-line: underline;
    position: absolute;
    left: 20px;
    bottom: 20px;
}

결과

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