텍스트 유형01

사이트 만들기 : 텍스트 유형1

사이트 만들기 세번째 텍스트 유형입니다, 카드 유형과 만드는 방법은 유사하며 칸마다 마우스 오버 효과를 주었습니다.

HTML

HTML은 카드유형과 유사합니다. container내부에 6개의 text영역을 만들어줍니다.

<section id="textType01" class="text__wrap nexon section">
    <p>텍스트 유형01</p>
    <h2>자습이 절실한 하루</h2>
    <div class="container text__inner">
        <article class="text">
            <img src="img/Group 237.svg" alt="icon">
            <h2>자습 원해요</h2>
            <p>내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를</p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <img src="img/Group 238.svg" alt="icon">
            <h2>자습 투해요</h2>
            <p>내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를</p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <img src="img/Group 239.svg" alt="icon">
            <h2>자습 쓰리해요</h2>
            <p>내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를</p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <img src="img/Group 240.svg" alt="icon">
            <h2>자습 포해요</h2>
            <p>내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를</p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <img src="img/Group 241.svg" alt="icon">
            <h2>자습 파이브해요</h2>
            <p>내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를</p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <img src="img/Group 242.svg" alt="icon">
            <h2>자습 식스해요</h2>
            <p>내일은 웹디자인기능사 시험을 보는 날 입니다. 같은 반 학우가 시험에 합격했다고 하니, 우리 모두 합격을 위해 기능사 CBT를</p>
            <a href="#">더보기</a>
        </article>
    </div>
</section>

CSS

초기화, 공통부분 css를 제외한 코드입니다.
각 text 영역의 아이콘은 svg파일로 넣어주었습니다.

/* textType */
.text__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.text__inner .text {
    width: 32%;
    box-sizing: border-box;
    padding: 20px;
}

.text__inner .text:hover {
    background-color: #f3a5a5;
}

.text__inner .text:nth-child(4),
.text__inner .text:nth-child(5),
.text__inner .text:nth-child(6) {
    margin-top: 20px;
}

.text__inner img {
    width: 60px;
    height: 60px;
    background-color: rgba(239, 74, 74, 0.7);
    border-radius: 50%;
    margin-bottom: 10px;
}

.text__inner h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.text__inner p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    color: #666;
    margin-bottom: 20px;
}

.text__inner a {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    text-decoration: underline;
    margin-bottom: 20px;
}

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