[SITE] 웹사이트 - 카드 유형03

CardType03

웹페이지 실습을 위한 카드 유형 페이지 심화ver 제작해보기!
카드 안에 이미지, 키워드란, 텍스트 그리고 사용자 프로필까지 넣어서 제작해보자!

---

< figma : 디자인 하기 >

이번 유형에서는 심화 버전인 만큼 그리드 할 요소가 많습니다.😂 차근차근 그리드를 만들어 카드형 페이지를 디자인 해봅시다!
이번 카드형 디자인은 카드 사이에 여백이 없기 때문에 라인을 넣어 카드 영역을 구분 해줍니다.

TIP ! 카드 섹션의 디자인이 동일할 경우 comtonent를 이용하면 효율적인 작업이 가능하다.
comtonent를 처음 적용시킨 카드가 원본가 되며 원본 comtonent를 수정하면 복제 comtonent들도 함께 수정되어 작업이 훨씬 수월해진다!

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

TIP ! 구조를 먼저 꼼꼼하게 파악하여 시멘틱한 마크업을 하는 것이 가장 중요하다. 때문에 복잡한 구조일 수록 구조를 잘 짜주어야 스타일이나 스크립트를 구현할 때 효율적으로 작업할 수 있다. 구조가 복잡할 수록 큰 덩어리부터 천천히 마크업하는 것이 좋다.(css 속성도 마찬가지!)
=> 순서는 컨테이너 부분까지 마크업한 다음 css 속성을 주어서 먼저 큰 레이아웃을 완성한다. 그 다음으로 큰 덩어리(+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="인테리어">
                <figcaption>Keyword</figcaption>
            </figure>
            <div class="card__contents">
                <h3>감성적인 인테리어를 해보고 다른 사람들과 경험을 공유해봐요.</h3>
                <p>감성적이고 따뜻한 room 인테리어를 만나보세요. 그리고 다른 사람들과 공유해보세요. 우리는 깔끔하고 심플한 당신의 room의 변화를 기다리고 있습니다.</p>    
            </div>
            <div class="card__footer">
                <h4>SAM KIM<em>SAM KIM</em></h4>
                <span>
                    <img src="img/card_bg03_02.jpg" alt="">
                </span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_01.jpg" alt="인테리어">
                <figcaption>Keyword</figcaption>
            </figure>
            <div class="card__contents">
                <h3>톡톡 튀는 인테리어를 해보고 다른 사람들과 경험을 공유하세요.</h3>
                <p>톡톡 튀는 독특한 room 인테리어를 만나보세요. 그리고 다른 사람들과 공유해보세요. 우리는 특별하고 유니크한 당신의 room의 변화를 기다리고 있습니다.</p>    
            </div>
            <div class="card__footer">
                <h4>SAM KIM<em>SAM KIM</em></h4>
                <span>
                    <img src="img/card_bg03_02.jpg" alt="">
                </span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_01.jpg" alt="인테리어">
                <figcaption>Keyword</figcaption>
            </figure>
            <div class="card__contents">
                <h3>홈 오피스 인테리어를 해보고 다른 사람들과 경험을 공유하세요.</h3>
                <p>홈 오피스같은 room 인테리어를 만나보세요. 그리고 다른 사람들과 공유해보세요. 우리는 깔끔하고 모던한 당신의 room의 변화를 기다리고 있습니다.</p>    
            </div>
            <div class="card__footer">
                <h4>SAM KIM<em>SAM KIM</em></h4>
                <span>
                    <img src="img/card_bg03_02.jpg" alt="">
                </span>
            </div>
        </article>
    </div>
</section>

! html 주의사항 !
• img태그의 속성 중 alt안에 이미지에 대한 설명을 넣어줘야 시각 및 청각 장애인들도 스크린리더기를 통해 이해 가능
• img 태그와 같은 그림, 도표 자료 태그들은 figure 태그안에 넣어주는 것이 웹 표준을 준수한 것
• 웹표준과 웹 접근성, 호환성을 놓치지 않도록하자!

---

< CSS 소스 : 스타일 적용하기 >

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

TIP !
1. 먼저 전체 초기화(Reset)와 폰트 디폴트 설정을 해주는 것이 좋다.
2. 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용시킨다.
3. 카드 스타일은 동일하기 때문에 같은 클래스명을 넣어서 한 번에 속성을 설정해준다.

/* 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;
    background-color: #fff;
}
.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%;
    background-color: #fff;
}
.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;
    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 {
    display: block;
    color: #666;
    font-style: normal;
}
.card__footer span {
    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);
}

! Css 속성 알아가기 !
세줄 효과 : 텍스트가 세줄을 넘어가면 자동으로 ...처리를 해준다.
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

---

-->

---

결과보기

원본 소스 보기

원본 페이지 보기