웹사이트 - 카드 유형01

 

CardType01

웹페이지 실습을 위한 카드타입 페이지 기초 실습하기!

---

< figma : 디자인 하기 >

피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다.
그리드 작업이 완벽해야 후에 코딩을 하는 데 있어서도 오류 및 오차가 생기지 않아 불편해지지 않습니다!

---

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

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

구조 파악하기
1. 카드 레이아웃은 보통 웹 메인 페이지의 섹션 부분에 위치한다. 때문에 시멘틱 태그인 <section>을 사용해주어 카드 영역에 해당하는 모든 요소를 묶어준다.
2. 카드영역은 총 3개이기 때문에 3개의 <article>을 사용해주어 묶어준다.
3. article의 헤더 부분에는 <figure>를 사용하여 이미지를 삽입해준다. 마친가지로 바디 부분에는 해당하는 텍스트를 작성하면 된다.
4. 웹 접근성에 맞춰 btn을 나타내는 span 태그에게 aria-hidden="true"라는 속성을 주어 스크린리더 프로그램이 내용과 관련이 없는 svg파일을 읽지 않고 지나가도록 해준다.

<section id="cardType" class="card__wrap nexon section">
<h2>전시회 리스트</h2>
<p>전시를 좋아하는 사람들을 위한 전시 리스트</p>
<div class="card__inner container">
    <article class="card">
        <figure class="card__header">
            <img src="img/card_bg01.jpg" alt="상업 전시">
        </figure>
        <div class="card__body">
            <h3 class="tit">상업 전시를 찾고 계신가요?</h3>
            <p class="desc">
                상업적인 성격을 띄는 전시회로 대표적으로는 디자인아트페어, 키아프 등등이 있습니다. 이 전시회에서는 관람 뿐만 아니라 현장에서 바로 구매할 수 있습니다.
            </p>
            <a class="btn" href="#">
                더 자세히 보기
                <span aria-hidden="true"> 
                    <svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
                        </svg>                                
                </span>
            </a>
        </div>
    </article>
    <article class="card">
        <figure class="card__header">
            <img src="img/card_bg02.jpg" alt="미술 전시">
        </figure>
        <div class="card__body">
            <h3 class="tit">미술 전시를 찾고 계신가요?</h3>
            <p class="desc">
                순수미술과 같은 예술 분야를 주로 전시하며 가벼운 상업 전시와는 달리 좀더 깊은 문화 예술을 관람할 수 있습니다. 전문적인기관에서 운영하는 경우가 대부분 입니다.
            </p>
            <a class="btn" href="#">
                더 자세히 보기
                <span aria-hidden="true"> 
                    <svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
                        </svg>                                
                </span>
            </a>
        </div>  
    </article>
    <article class="card">
        <figure class="card__header">
            <img src="img/card_bg03.jpg" alt="사진 전시">
        </figure>
        <div class="card__body">
            <h3 class="tit">사진 전시를 찾고 계신가요?</h3>
            <p class="desc">
                사진을 주제로 하여 일상의 모습 또는 그 이상을 보여주는 작품들을 감상할 수 있습니다. 최근 사진전의 수요가 오르는 추세이며, 가볍게 관람하기에도 좋습니다. 
            </p>
            <a class="btn" href="#">
            더 자세히 보기
            <span aria-hidden="true"> 
                <svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
                    </svg>                                
            </span>
        </a>
        </div>
    </article>
</div>
</section>

---

< CSS 소스 >

구조 짜임의 순서대로 css 스타일을 적용시켜보자. css 스타일을 적용시킬 땐 선택자의 위치와 관계를 주의해서 선언해야 한다!

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

.nexon {
    font-family: 'NexonLv1Gothic';
    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;
}
/* 요소 > 요소는 부모와 자식의 관계를 나타낸다. 마찬가지로 요소 + 요소는 형제 관계를 나타낸다.*/
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

/* cardType */
.card__inner {
    display: flex;
    justify-content: space-around; /* 중심을 기준으로 정렬하여 모아준다.*/
}
.card {
    width: 32%;
    background: #f5f5f5;
}
.card__body {
    padding: 24px;
}
.card__body .tit {
    font-size: 24px;
    margin-bottom: 10px;
}
.card__body .desc {
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 20px;
    font-weight: 300;
}
.card__body .btn {}

---

!오늘의 포인트!

figure 태그
이미지 또는 그래프 등의 도표 자료들을 의미하는 시멘틱 태그이다.
때문에 img와 같은 태그를 사용할 때에는 꼭 함꼐 사용해주어야 한다.

<figure></figure>

<!-- 예시 -->
<figure>
    <img src="" alt="">
</figure>

aria-hidden="true" 속성
웹 접근성을 위해 스크린리더 프로그램이 내용과 관련이 없는 파일을 읽지 않고 지나가도록 해준다.

<span aria-hidden="true">
    <svg>svg소스</svg>
</span>

css속성 선택자(요소)의 우선순위
위치를 더 자세히 선언해줄 수록 우선순위가 높아진다. 또한 오류의 가능성도 낮아지기 때문에 구조가 복잡할 수 록 위치와 선택자 명칭을 중요하게 선언해주어야 한다.

.card .card__body .btn {} //1
.card__body .btn {} //2

css속성 선택자(요소)간의 관계
요소 > 요소는 부모와 자식의 관계를 나타낸다. 마찬가지로 요소 + 요소는 형제 관계를 나타낸다.

.section > h2 /*section안에 h2라는 자식요소를 의미*/
.section > h2 + p /*section안에 자식요소와 h2와 h2의 형제 요소인 p를 의미*/

---

결과보기

원본 소스 보기

원본 페이지 보기