카드 유형03

사이트 만들기 : 카드 유형3

사이트 만들기 카드 유형의 3번째 입니다.
전체적인 사이트의 영역을 구분하고 세부적인 코딩에 들어가는 것이 중요합니다.

HTML

카드 영역 전체가 들어갈 section태그에 3개의 아티클로 나누어 기본적인 틀을 잡고 CSS를 설정하며 세부코딩에 들어갑니다.
카드안에 이미지 영역 / 내용이 들어갈 콘텐츠 영역 / 내용에 대한 정보가 들어갈 푸터 영역으로 나누어줍니다.

<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/card_bg03_01.jpg" alt="ski">
                <figcaption>Ski</figcaption>
            </figure>
            <div class="card__contents">
                <h3>스키는 겨울에 즐기는 스포츠이지만, 여름에도 떠오르는 스포츠입니다. 무더운 여름 스키에 대하여 알아보세요.</h3>
                <p>얇고 긴 활면을 가지는 스키 판 위에 바인딩을 붙이고, 스키 부츠를 결합한 후 눈 위를 활주하는 스포츠. 동계 올림픽의 꽃이며, 메달이...</p>
            </div>
            <div class="card__footer">
                <h4>국가 대표 <em>Choi Heungchul</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt="human"></span>
            </div>
        </article>

        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_02.jpg" alt="ski">
                <figcaption>Ski</figcaption>
            </figure>
            <div class="card__contents">
                <h3>스키는 겨울에 즐기는 스포츠이지만, 여름에도 떠오르는 스포츠입니다. 무더운 여름 스키에 대하여 알아보세요.</h3>
                <p>얇고 긴 활면을 가지는 스키 판 위에 바인딩을 붙이고, 스키 부츠를 결합한 후 눈 위를 활주하는 스포츠. 동계 올림픽의 꽃이며, 메달이...</p>
            </div>
            <div class="card__footer">
                <h4>국가 대표 <em>Choi Heungchul</em></h4>
                <span><img src="img/card_bg03_icon02.png" alt="human"></span>
            </div>
        </article>

        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_03.jpg" alt="ski">
                <figcaption>Ski</figcaption>
            </figure>
            <div class="card__contents">
                <h3>스키는 겨울에 즐기는 스포츠이지만, 여름에도 떠오르는 스포츠입니다. 무더운 여름 스키에 대하여 알아보세요.</h3>
                <p>얇고 긴 활면을 가지는 스키 판 위에 바인딩을 붙이고, 스키 부츠를 결합한 후 눈 위를 활주하는 스포츠. 동계 올림픽의 꽃이며, 메달이...</p>
            </div>
            <div class="card__footer">
                <h4>국가 대표 <em>Choi Heungchul</em></h4>
                <span><img src="img/card_bg03_icon03.png" alt="human"></span>
            </div>
        </article>
    </div>
</section>

CSS

시멘틱 태그인 section에 제목을 부여했으나, 만드려는 유형에는 제목이 없으므로 접근성을 고려하여 blind 처리를 해주었습니다.
카드 유형02와 동일하게 카드 내부의 글 길이가 너무 길면 2줄, 3줄 처리 후 ...으로 표기하도록 설정하였습니다.

텍스트 3줄 처리하기

아래의 CSS 코드들로 너무 긴 글은 원하는 줄 수에 ...처리가 가능합니다.
overflow: hidden; // 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 합니다.
text-overflow: ellipsis; // 글이 길어질 경우 설정한 범위 이후는 ... 처리합니다.
display: -webkit-box; // 요소의 표시 상자를 생성합니다.
-webkit-line-clamp: 3; // 블록 컨테이너의 콘텐츠를 지정한 줄 수 만큼 제한합니다.
-webkit-box-orient: vertical; // 박스 내용물을 세로로 배치합니다.

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

.score {
    font-family: 'SCoreDream';
    font-weight: 500;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
}

/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}

.section {
    padding: 120px 0;
    background-color: #7DDBE1;
}

.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 처리 */
.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}

/* cardType03 */
.card__inner {
    display: flex;
}

.card__inner .card {
    width: 33.33333%;
    background-color: #fff;
    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;
    height: 15px;
    padding: 2px 16px 6px;
    border-radius: 50px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    color: #7b7b7b;
}

.card__contents h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card__contents 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: end;
}

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

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

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

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