티스토리 뷰

SITE

카드유형 웹사이트 만들기 03 (Card Type Web Site)

김코린👩🏻‍💻 2022. 8. 10. 20:08

Card Type Web Site

HTML, CSS를 통해 카드유형 웹사이트 만들기 - 세번째

Result

원본 소스 보기
원본 페이지 보기

Figma

component를 이용해 세번째 카드유형 레이아웃 그리드를 만들었습니다.

HTML

먼저 article로 카드영역을 나누고 card__header에 사진과 art박스, card__body안에 카드 제목과 내용, card__footer에 인적사항을 만들었습니다. 

<body>
<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="Architects">
                <figcaption>Art</figcaption>
            </figure>
            <div class="card__contents">
                <h3>Spectacular designs of animals in polygonal style</h3>
                <p>Digital art is an artistic work or practice
                    that uses digital Digital art is an artistic work or practice
                    that uses digital Digital art is an artistic work or practice</p>
            </div>
            <div class="card__footer">
                <h4>Alex<em>Hesperioidea</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt=""></span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_02.jpg" alt="">
                <figcaption>Art</figcaption>
            </figure>
            <div class="card__contents">
                <h3>Spectacular designs of animals in polygonal style</h3>
            <p>Digital art is an artistic work or practice
                that uses digital Digital art is an artistic work or practice
                that uses digital Digital art is an artistic work or practice</p>
            </div>
            <div class="card__footer">
                <h4>Puppy<em>Hesperioidea</em></h4>
                <span><img src="img/card_bg03_icon02.png" alt=""></span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_03.jpg" alt="">
                <figcaption>Art</figcaption>
            </figure>
            <div class="card__contents">
                <h3>Spectacular designs of animals in polygonal style</h3>
            <p>Digital art is an artistic work or practice
                that uses digital Digital art is an artistic work or practice
                that uses digital Digital art is an artistic work or practice</p>
            </div>
            <div class="card__footer">
                <h4>Cosmos<em>Hesperioidea</em></h4>
                <span><img src="img/card_bg03_icon03.png" alt=""></span>
            </div>
        </article>
    </div>
</section>
</body>

CSS

3개의 카드의 card width를 각 33.3%씩 주고 card__header를 기준으로 art박스를 만들고, 인적사항을 footer박스로 묶어서 만들었습니다. 

 /* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
    font-family: 'SCoreDream';
    font-weight: 300;
}
/* 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: #2254C3; //배경색 
}
.card__inner {
    display: flex; //카드정렬 
}
.card__inner .card {
    padding: 26px;
    width: 33.3333%; //3개의 카드임으로 각 33.3%씩 준다
    background-color: #fff;
}
.card__inner .card:nth-child(1) {
    border-right: 1px solid #eee; //가운데 선 1
}
.card__inner .card:nth-child(2) {
    border-right: 1px solid #eee; //가운데 선 2
}
.card__header {
    position: relative; //figcaption 기준점 
}
.card__header img {
    border-radius: 10px;
    box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.card__header figcaption { //art버튼 
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 6px 16px;
    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: flex-end;
}
.card__footer h4 { //인적사항 이름 
    text-align: right;
    color: #DD2A2A;
}
.card__footer em { //인적사항 sub
    display: block;
    color: #666;
    font-style: normal;
}
.card__footer span { //footer 사진 
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin-left: 10px;
    margin-top: -3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

'SITE' 카테고리의 다른 글

이미지 유형 03  (4) 2022.08.19
이미지 유형 02  (3) 2022.08.17
이미지 유형 01  (3) 2022.08.17
카드유형 웹사이트 만들기 02 (Card Type Web Site)  (11) 2022.08.09
카드유형 웹사이트 만들기 01 (Card Type Web Site)  (9) 2022.08.08
공지사항