사이트유형 - 텍스트 유형 세 번째

사이트 유형 | 텍스트유형

텍스트 유형 은 카드 유형하고 비슷하지만 그안에 텍스트를 넣었습니다.

---

1.HTML 코드

코드 보기

<section id="textType" class="text__wrap nexon section">
    <h2>텍스트 유형</h2>
    <p>각 유형의 특징을 알아보고, 골고루 사용해보자</p>
    <div class="text__inner container">
        <article class="text__card">
            <p class="text__desc">곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요</p>
            <hr>
            <a href="#" class="text__icon">
                <img src="img/tTicon_01.svg" alt="아이콘1">
            </a>
            <div class="text_titbox">
                <h3 class="text__tit">우르르쾅쾅 곰</h3>
                <p class="text__tdesc">동물</p>
                <figure class="star">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                </figure>
            </div>
            <hr>
            <a href="#" class="text__more">자세히 보기</a>
        </article>
        <article class="text__card">
            <p class="text__desc">곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요</p>
            <hr>
            <a href="#" class="text__icon">
                <img src="img/tTicon_01.svg" alt="아이콘1">
            </a>
            <div class="text_titbox">
                <h3 class="text__tit">우르르쾅쾅 곰</h3>
                <p class="text__tdesc">동물</p>
                <figure class="star">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                </figure>
            </div>
            <hr>
            <a href="#" class="text__more">자세히 보기</a>
        </article>
        <article class="text__card">
            <p class="text__desc">곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요</p>
            <hr>
            <a href="#" class="text__icon">
                <img src="img/tTicon_01.svg" alt="아이콘1">
            </a>
            <div class="text_titbox">
                <h3 class="text__tit">우르르쾅쾅 곰</h3>
                <p class="text__tdesc">동물</p>
                <figure class="star">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                    <img src="img/tTicon_star.svg" alt="별">
                </figure>
            </div>
            <hr>
            <a href="#" class="text__more">자세히 보기</a>
        </article>
    </div>
</section>

---

2.CSS 코드

코드 보기

/* fonts */
    /* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}
/* reset */
* {
    margin: 0;
    padding: 0;
    font-size: 18px;
}
img {
    width: 100%;
}
a {
    text-decoration: none;
    color: #000;
}
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: 10px;
}
.section>p {
    text-align: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
    margin-bottom: 70px;
    color: #666;
}
.text__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text__card {
    width: 32.2%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}
.text__card:hover {
    background-color: #f5f5f5;
}
.text__icon {
    margin-bottom: 20px;
    margin-right: 20px;
}
.text__icon img {
    width: 100%;
}
.text__desc {
    font-size: 18px;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.4;
}
.text_titbox {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: flex-start;
    width: 76%;
}
.text_titbox .text__tit {
    font-size: 24px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.text_titbox .text__tdesc {
    color: #666;
    font-size: 18px;
}
.text_titbox .star img {
    width: 20px;
    height: 20px;
}
.text__more {
    font-size: 18px;
    padding: 5px 30px;
    border-radius: 20px;
    background-color: #3B4A5C;
    color: #fff;
    margin: 0 auto;
}
.text__card hr {
    width: 100%;
    margin-bottom: 20px;
}

---

완성본

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