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

728x90

CardType02

웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! - 2줄 유형

< figma : 디자인 하기 >

피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다.

TIP ! 카드 섹션의 디자인이 동일한데 많을 경우 컴포넌트를 이용하면 효율적인 작업이 가능하다.
컴포넌트를 처음 적용시킨 카드가 원본가 되며 원본을 수정하면 복붙했던 카드들도 함께 수정된다.

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

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

구조 파악하기
1.구조를 먼저 꼼꼼하게 파악하여 시멘틱한 마크업을 하는 것이 가장 중요하다. 때문에 복잡한 구조일 수록 구조를 잘 짜주어야 스타일이나 스크립트를 구현할 때 효율적으로 작업할 수 있다.
2. 구조가 복잡할 수록 큰 덩어리부터 천천히 마크업하는 것이 좋다. 큰덩어리 구조가 잡히면 그 후 세부적인 구조를 마크업해준다. (css도 마찬가지!)
3. 카드 레이아웃은 보통 웹 메인 페이지의 섹션 부분에 위치한다. 때문에 시멘틱 태그인 <section>을 사용해주어 카드 영역에 해당하는 모든 요소를 묶어준다.
4. 카드영역이 두 줄 형태이기 때문에 기존 부모인 .card__inner container를 두 개 만든 뒤 <article>(= 카드 한 개)을 4개씩 묶어서 마크업 해준다.

<section id="cardType" class="card__wrap gmarket section">
    <h2>파스타 요리하기🍝</h2>
    <p>토마토와 오일 그리고 크림 등 다양한 파스타를 만나보세요!<br />
        그리고 파스타의 매력을 느껴보세요!
    </p>
    <div class="card__inner container top">
            <article class="card"> 
                <figure class="card__header">
                    <img src="img/card_bg04.jpg" alt="파스타01">
                </figure>
                <div class="card__body">
                    <div class="card__body__header">
                        <h3 class="tit">파스타의 정의</h3>
                        <a href="#" class="btn">
                            <span aria-hidden="true">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="5" fill="white"/>
                                    <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                    <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                                </svg>
                            </span>
                        </a>
                    </div>
                    <p class="desc">
                        파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                    </p>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg10.jpg" alt="파스타02">
                </figure>
                <div class="card__body">
                    <div class="card__body__header">
                        <h3 class="tit">파스타 면의 종류</h3>
                        <a href="#" class="btn">
                            <span aria-hidden="true">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="5" fill="white"/>
                                    <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                    <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                                </svg>
                            </span>
                        </a>
                    </div>
                    <p class="desc">
                        파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                    </p>
                </div> 
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg05.jpg" alt="파스타03">
                </figure>
                <div class="card__body">
                    <div class="card__body__header">
                        <h3 class="tit">파스타의 종류</h3>
                        <a href="#" class="btn">
                            <span aria-hidden="true">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="5" fill="white"/>
                                    <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                    <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                                </svg>
                            </span>
                        </a>
                    </div>
                    <p class="desc">
                        파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                    </p>
                </div> 
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg06.jpg" alt="파스타04">
                </figure>
                <div class="card__body">
                    <div class="card__body__header">
                        <h3 class="tit">파스타의 재료</h3>
                        <a href="#" class="btn">
                            <span aria-hidden="true">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="5" fill="white"/>
                                    <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                    <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                                </svg>
                            </span>
                        </a>
                    </div>
                    <p class="desc">
                        파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                    </p>
                </div> 
            </article>

    </div>
    <div class="card__inner container bottom">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg07.jpg" alt="파스타05">
            </figure>
            <div class="card__body">
                <div class="card__body__header">
                    <h3 class="tit">토마토 파스타</h3>
                    <a href="#" class="btn">
                        <span aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="5" fill="white"/>
                                <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </div>
                <p class="desc">
                    파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                </p>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg08.jpg" alt="파스타06">
            </figure>
            <div class="card__body">
                <div class="card__body__header">
                    <h3 class="tit">오일 파스타</h3>
                    <a href="#" class="btn">
                        <span aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="5" fill="white"/>
                                <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </div>
                <p class="desc">
                    파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                </p>
            </div> 
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg11.jpg" alt="파스타07">
            </figure>
            <div class="card__body">
                <div class="card__body__header">
                    <h3 class="tit">로제 파스타</h3>
                    <a href="#" class="btn">
                        <span aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="5" fill="white"/>
                                <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </div>
                <p class="desc">
                    파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                </p>
            </div> 
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg09.jpg" alt="파스타08">
            </figure>
            <div class="card__body">
                <div class="card__body__header">
                    <h3 class="tit">크림 파스타</h3>
                    <a href="#" class="btn">
                        <span aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="5" fill="white"/>
                                <rect width="24" height="24" rx="5" fill="#884A4A"/>
                                <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </div>
                <p class="desc">
                    파스타는 이탈리아의 전통 음식 중 하나로 면이 주 요리 재료인 음식입니다. 파스타를 더 알아볼까요?
                </p>
            </div> 
        </article>
    </div>
</section>

! html 주의사항 !
• img태그의 속성 중 alt안에 이미지에 대한 설명을 넣어줘야 시각 및 청각 장애인들도 스크린리더기를 통해 이해 가능
• 스크린리더기가 svg값을 읽지 않게 하기 위해 속성 aria-hidden="true"를 추가
• img 태그와 같은 그림, 도표 자료 태그들은 figure 태그안에 넣어주는 것이 웹 표준을 준수한 것

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

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 보며 마크업 된 요소를 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.

Css 스타일 파악하기
1. 먼저 전체 초기화와 폰트 설정을 해주는 것이 좋다.
2. 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용
3. 섹션의 스타일 적용이 끝난 후 카드 영역에 스타일을 적용시킨다.(스타일이 똑같기 때문에 부모요소를 동일하게 하여 빠르고 효율적인 작업을 할 수 있도록 한다.)

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

.gmarket {
    font-family: 'GmarketSans';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;   /* 텍스트 효과를 초기화 */
}
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;
    flex-wrap: wrap;
    justify-content: space-between; /* 중심을 기준으로 간격을 떨어뜨린다.*/
}
.card {
    width: 23.5%;
}
.card__body {
    padding: 16px 0 20px 0;
}
.card__body .card__body__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 중심을 기준으로 간격을 떨어뜨린다.*/
}
.card__body .tit {
    font-size: 24px;
    margin-bottom: 10px;
}
.card__body .desc {
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 50px;
    font-weight: 300;
}
.card__body .btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background-color: #884A4A;
    display: flex;
    flex-wrap: wrap;
}

!오늘의 포인트!

aria-hidden="true"
스크린리더기가 svg와 같이 내용이 없는 요소의 값을 읽지 않게 하기 위해 사용하는 속성

 <!-- 예시 -->
<span aria-hidden="true">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="24" height="24" rx="5" fill="white"/>
        <rect width="24" height="24" rx="5" fill="#884A4A"/>
        <path d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13V11ZM18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L12.3431 4.92893C11.9526 4.53841 11.3195 4.53841 10.9289 4.92893C10.5384 5.31946 10.5384 5.95262 10.9289 6.34315L16.5858 12L10.9289 17.6569C10.5384 18.0474 10.5384 18.6805 10.9289 19.0711C11.3195 19.4616 11.9526 19.4616 12.3431 19.0711L18.7071 12.7071ZM6 13L18 13V11L6 11V13Z" fill="white"/>
    </svg>
</span>

결과보기

원본 소스 보기

원본 페이지 보기

728x90

'SITE' 카테고리의 다른 글

[SITE] 웹사이트 - 이미지 유형03 (4)	2022.08.22
[SITE] 이미지 유형 만들기 02 (3)	2022.08.18
[SITE] 웹사이트 - 이미지 유형01 (2)	2022.08.17
[SITE] 웹사이트 - 카드 유형03 (5)	2022.08.11
웹사이트 - 카드 유형01 (4)	2022.08.10

🍅 토매토🍅 의 냠냠 코딩 🌱

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

CardType02

< figma : 디자인 하기 >

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

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

!오늘의 포인트!

결과보기

'SITE' 카테고리의 다른 글

댓글

JAVASCRIPT

HTML

CSS

티스토리툴바

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

CardType02

< figma : 디자인 하기 >

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

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

!오늘의 포인트!

결과보기

'SITE' 카테고리의 다른 글

관련글

댓글

JAVASCRIPT

HTML

CSS

티스토리툴바