웹사이트 만들기 : 카드 유형 레이아웃03

레이아웃 : 카드 유형03

이번에는 다음과 같은 3개의 카드가 있는 레이아웃 유형을 작업해 보도록 하겠습니다.

CSS 소스

폰트는 에스코어 드림을 사용했고, 컨테이너 안에 3개의 카드를 만들어 display:flex로 가로 정렬을 해 주었습니다. blind 효과는 ir 효과와 마찬가지로, 글자가 눈에 보이지 않게 작업하지만, 스크린 리더기에서는 읽히게끔 만들어 웹 접근성을 준수하게끔 합니다.

/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');

.score {
    font-family: 'SCoreDream';
    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;
    min-width:1160px;
}

.section {
    padding: 120px 0;
}

.section>h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}

.section>p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

/* blind 효과(웹 접근성 준수)*/
.blind{
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden
}

/* cardType03 */
body {
    background-color: #1E39A2;
}

.card__inner {
    display: flex;
}

.card__inner .card {
    width: 33.3333%;
    background-color: white;
    padding: 26px;
}

.card__inner .card:nth-child(1) {
    border-right: 1px solid #eee;
}

.card__inner .card:nth-child(2) {
    border-right: 1px solid #eee;
}

.card__header {
    position: relative;
}

.card__header img {
    border-radius: 10px;
    box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.card__header figcaption {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 100.8px;
    padding: 6px 12px;
    border-radius: 50px;
    background-color: #FFC738;
    text-align: center;
    font-size: 14px;
    color: #7b7b7b;
}

.card__body h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.card__body p {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}

.card__footer {
    display: flex;
    justify-content: flex-end;
}

.card__footer h4 {
    text-align: center;
    color: #dd2a2a;
}

.card__footer em {
    display: block;
    color: #666;
    font-style: normal;
}

.card__footer span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

HTML 소스

각각의 카드는 header, body, footer 세 가지 영역으로 나누어 작업하였습니다. footer 영역도 display:flex를 사용하여 정렬을 해 주었습니다. figcaption 태그는 figure 태그 안에서, 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.

<section id="cardType03" class="card__wrap score section">
    <h2 class="blind">오징어의 생애</h2>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card03_bg01.jpg" alt="갓 태어난 새끼 오징어">
                <figcaption>Squid</figcaption>
            </figure>
            <div class="card__body">
                <h3>갓 태어난 새끼 오징어 : 오징어의 탄생을 축하합니다!</h3>
                <p>새끼 오징어가 태어났습니다. 심히 경이롭지 않을 수가 없습니다. 오징어를
                    축하해 주었습니다. 오징어야, 축하해. 그래도 새끼는 귀엽게 생겼네요.</p>
            </div>
            <div class="card__footer">
                <h4>오징어학 박사 <em>Usman Yosaf</em></h4>
                <span><img src="img/card03_icon01.png" alt="Usman Yosaf 박사님"></span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card03_bg02.jpg" alt="당신을 바라보고 있는 오징어">
                <figcaption>Squid</figcaption>
            </figure>
            <div class="card__body">
                <h3>씩씩한 청소년 오징어 : 오징어와 눈을 마주쳐 보세요</h3>
                <p>오징어를 바라보고 있자니 썩 기분이 좋지는 않습니다. 왜 저렇게 생겼을까요? 그러나 오징어의 기분도 마찬가지인 것 같습니다. 다소 예의가 없네요.</p>
            </div>
            <div class="card__footer">
                <h4>오징어학 박사 <em>Usman Yosaf</em></h4>
                <span><img src="img/card03_icon01.png" alt="Usman Yosaf 박사님"></span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card03_bg03.jpg" alt="늘어져서 햇볕에 말려지는 오징어">
                <figcaption>Squid</figcaption>
            </figure>
            <div class="card__body">
                <h3>바싹 마른 성체 오징어 : 최고의 안주가 됩니다</h3>
                <p>버르장머리 없는 오징어들은 바싹 말린 뒤에 맛있는 안주로 만들어 사람들에게 예의를 갖추게 합니다. 우리는 곧 역전 할머니 맥주에서 만날 수 있습니다.</p>
            </div>
            <div class="card__footer">
                <h4>오징어학 박사 <em>Usman Yosaf</em></h4>
                <span><img src="img/card03_icon01.png" alt="Usman Yosaf 박사님"></span>
            </div>
        </article>
    </div>
</section>

결과

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