텍스트 유형03

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

텍스트 유형3 입니다. 카드 유형3과 비슷한 유형으로 따라 만들어 보세요!

HTML

text 내부에 text__info 클래스를 가진 div를 생성하여 정보란을 생성하였습니다.

<section id="textType03" class="text__wrap nexon section">
    <h2>웹 디자인 기능사 필기 후기</h2>
    <p>웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요 </p>
    <div class="container text__inner">
        <article class="text">
            <p>웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요. 숙제도 해야하고 시험공부도 해야하고 정말 바쁜 일정이였어요. 조금 더 속도를 내서 숙제를 하고싶은데 제 손가락이
                따라주질 않네요. 모두 합격하셨기를 바라면서 글을 여기까지 써보겠습니다...</p>
            <div class="text__info">
                <img src="img/Group 1.svg" alt="icon">
                <h2>코터틀</h2>
                <span>웹스 29기</span>
            </div>
            <img src="img/Group 4.svg" alt="stars">
            <a href="#">자세히 보기</a>
        </article>
        <article class="text">
            <p>웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요. 숙제도 해야하고 시험공부도 해야하고 정말 바쁜 일정이였어요. 조금 더 속도를 내서 숙제를 하고싶은데 제 손가락이
                따라주질 않네요. 모두 합격하셨기를 바라면서 글을 여기까지 써보겠습니다...</p>
            <div class="text__info">
                <img src="img/Group 2.svg" alt="icon">
                <h2>콧털틀</h2>
                <span>웹스 29기</span>
            </div>
            <img src="img/Group 4.svg" alt="stars">
            <a href="#">자세히 보기</a>
        </article>
        <article class="text">
            <p>웹 디자인 기능사 필기시험을 보고왔어요 혹시 했는데 역시나 어렵네요. 숙제도 해야하고 시험공부도 해야하고 정말 바쁜 일정이였어요. 조금 더 속도를 내서 숙제를 하고싶은데 제 손가락이
                따라주질 않네요. 모두 합격하셨기를 바라면서 글을 여기까지 써보겠습니다...</p>
            <div class="text__info">
                <img src="img/Group 3.svg" alt="icon">
                <h2>콧털들</h2>
                <span>웹스 29기</span>
            </div>
            <img src="img/Group 4.svg" alt="stars">
            <a href="#">자세히 보기</a>
        </article>
    </div>
</section>

CSS

초기화, 공통부분 css를 제외한 코드입니다.
내부에 컨텐츠들을 정렬하기가 어려웠습니다.. 별점은 포지션을 사용하여 위치를 맞춰주었습니다.

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

}

.text {
    background-color: #fff;
    width: 32%;
    padding: 30px;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
}

.text p {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    line-height: 1.5;
    color: #666;
}

.text .text__info {
    display: flex;
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.text__info img {
    width: 60px;
    height: 60px;
}

.text__info h2 {
    font-size: 26px;
    margin-left: 8px;
    padding-top: 3px;
}

.text__info span {
    padding-top: 13px;
    font-size: 16px;
    margin-left: 10px;
    color: #666;
}

.text >img {
    position: absolute;
    width: 100px;
    left: 97px;
    bottom: 105px;
}

.text a {
    width: 110px;
    height: 30px;
    background: rgba(123, 149, 250, 0.7);
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    display: block;
    text-align: center;
    line-height: 30px;
    margin: 0 auto;
}

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