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

레이아웃 : 텍스트 유형03

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

HTML 소스

먼저, 컨테이너 박스 안에 제목을 적어 주고, 카드 부분은 contents 박스를 만들어, contents 박스 안에 세 개의 card를 만들어 주었습니다. 각각의 카드는 내용 부분과 info 부분, 링크 부분으로 나누어 주었습니다. info 박스는 icon과 정보 부분으로 나누어 주었습니다.

<section id="textType03" class="container section nanum">
    <h2>스터디 후기</h2>
    <p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다.</p>
    <div class="contents">
        <article class="card">
            <p class="card__desc">불과 3달 전만 해도 여러 원인들로 인해 자존감이 밑바닥이었던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음 속으로 울고 싶다를 외쳤던 저였는데 이제는 조금이나마 이겨낼 수 있을 것 같네요. 다음에 선생님을 만났을 때는 많이 발전해있는 제가 되었으면 좋겠어요.</p>
            <div class="card__info">
                <div class="icon__box">
                    <div class="card__icon"></div>
                </div>
                <div class="info__box">
                    <span class="info__name">이태용</span>
                    <span class="info__number">웹스 24기</span>
                    <span class="info__star ir">별이 다섯 개</span>
                </div>
            </div>
            <a href="#"><span class="more">자세히 보기</span></a>
        </article>
        <article class="card">
            <p class="card__desc">진심 학교나 학원보다 더 많이 배운 거라고 생각하고, 무지하고 말 안 듣고 자존감 바닥인 저에게 팩폭도 해 주시고, 버리지 않아 주셔서 감사합니다 쌤!!!!!!!!!
                회사에서 잘리지 않고,,, 존버하겠습니다!!!!!!!</p>
            <div class="card__info">
                <div class="icon__box">
                    <div class="card__icon"></div>
                </div>
                <div class="info__box">
                    <span class="info__name">이희진</span>
                    <span class="info__number">웹스 24기</span>
                    <span class="info__star ir">별이 네 개</span>
                </div>
            </div>
            <a href="#"><span class="more">자세히 보기</span></a>
        </article>
        <article class="card">
            <p class="card__desc">제가 게을러서 의도치 않게 자꾸 말을 안듣는 학생이 되었었지만 정말 선생님 말씀 틀린 것 하나도 없었다는 거 잘 알고 있습니다,,, ㅎㅎ
                아 그리고 마지막 하고 싶은 말은 저 새벽 5~6시에 자는 ㄹㅇ올빼미형 인간인데... 쌤이랑 두 달 공부했다고...</p>
            <div class="card__info">
                <div class="icon__box">
                    <div class="card__icon"></div>
                </div>
                <div class="info__box">
                    <span class="info__name">정승연</span>
                    <span class="info__number">웹스 24기</span>
                    <span class="info__star ir">별이 다섯 개</span>
                </div>
            </div>
            <a href="#"><span class="more">자세히 보기</span></a>
        </article>
    </div>
</section>

CSS 소스

폰트는 나눔 고딕을 사용하였고, display: flex를 사용하여 세 개의 카드를 배치해 주었습니다. 아이콘과 별점은 이미지 스프라이트 기법을 사용하였고, 별점의 개수에 대하여 ir 효과를 추가해 주었습니다.

/* fonts */
@import url('https://webfontworld.github.io/naver/NanumGothic.css');
.nanum {
    font-family: 'NanumGothic';
    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: 20px;
    font-weight: 500;
}
.section>p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* textType03 */
body {
    background-color: #C7C9FF;
}
.contents {
    display: flex;
    justify-content: space-between;
}
.contents .card {
    width: 373px;
    height: 435px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
}
.contents .card .card__desc {
    font-size: 18px;
    font-weight: 300;
    line-height: 140%;
    margin: 30px;
}
.contents .card .card__info {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    position: absolute;
    top: 235px;
    left: 30px;
    padding: 30px 0;
    width: 313px;
    display: flex;
}
.contents .card .more {
    display:inline-block;
    color: white;
    background-color: #2684ff;
    width:118px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
    position: absolute;
    left: 127px;
    bottom: 30px;
}
.contents .card .card__info .card__icon {
    width: 60px;
    height: 60px;
    background: url(img/card03_icon01.svg)
}
.contents .card:nth-child(2) .card__info .card__icon {
    background-position-x: -60px;
}
.contents .card:nth-child(3) .card__info .card__icon {
    background-position-x: -120px;
}
.contents .card .card__info .info__box {
    margin-left: 10px;
}
.contents .card .card__info .info__name {
    font-size: 24px;
    line-height: 40px;
    font-weight: 500;
}
.contents .card .card__info .info__number {
    font-size: 16px;
    line-height: 35px;
}
.contents .card .card__info .info__star {
    width: 100px;
    height: 20px;
    background: url(img/card03_icon02.svg)
}
.contents .card:nth-child(2) .card__info .info__star {
    background-position: -100px;
}

결과

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