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

사이트 만들기

사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다.

카드 유형02

카드 유형의 사이트는 콘텐츠를 카드의 형태로 나열합니다. 카드를 어떤 모습으로, 어떻게 배치하냐에 따라 같은 카드 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 두번째 디자인은 한 줄에 카드를 네개씩, 총 두 줄을 배치하였습니다.

디자인 하기

먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 카드 유형과 같이 중복되는 디자인을 배치하게 될 경우, 카드 하나를 먼저 디자인한 뒤 컴포넌트로 만들어 작업하면 간단합니다. 원본 컴포넌트를 수정하면 전체의 수정이 가능하며, 각각의 컴포넌트 복제들 따로 수정할 수도 있습니다.

HTML 작성하기

그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.

> 웹 접근성 향상 팁!

내용이 있는 이미지는 img태그를 사용합니다. alt 태그는 꼭 적어줍니다.
내용과 관련이 없는 이미지로
1. svg파일을 활용하게 된다면, 웹 접근성 향상을 위해 aria-hidden="true"속성을 넣어줍니다. 해당 속성을 넣으면 스크린리더 프로그램이 내용과 관련이 없는 svg파일을 읽지 않고 지나갑니다.
2. background-image를 활용하여 css를 통해 이미지를 넣을 수도 있습니다.
위의 두 경우엔 css에서 ir효과를 설정하여 alt를 대신할 이미지 대체 텍스트를 설정해 줍니다.

> ir효과란?

img태그가 아닌 방법으로 이미지를 표현할 경우, 이미지가 로딩되지 않을때 나타낼 수 있는 대체 텍스트를 표시할 수 없습니다. 때문에 웹 접근성 보장을 위해 가상으로 alt태그와 같은 효과를 주는 css 작성 기법입니다.

*css에서 ir 효과 주는 법*
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    ext-indent: -9999px; }

<section id="cardType02" class="card__wrap gmarket section">
    <h2>감자 요리 하기 🥔</h2>
    <p>
        우리 주변에서 흔히 볼 수 있는 감자는 그 활용법이 무궁무진 합니다.<br>
        감자의 다양한 요리법들을 소개합니다. 맛있게 즐기세요.
    </p>
    <div class="card__inner container">
        <article class="card">
            <img src="img/card2_bg01.jpg" alt="감자 여러개를 양 손에 들고있는 이미지">
            <h3 class="tit">감자의 특징</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg02.jpg" alt="칼집을 낸 통감자를 양념해 구워낸 요리 이미지">
            <h3 class="tit">감자 양념구이</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg03.jpg" alt="감자튀김이 접시에 담겨있는 이미지">
            <h3 class="tit">감자 튀김</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg04.jpg" alt="감자를 반달모양으로 썰어 구워낸 웨지감자 이미지">
            <h3 class="tit">웨지 감자</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg05.jpg" alt="두껍게 구워낸 감자전 세장이 쌓여있는 이미지">
            <h3 class="tit">감자전</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg06.jpg" alt="휴게소에서 볼 수 있는 찐감자 소금구이 이미지">
            <h3 class="tit">휴게소 감자</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg07.jpg" alt="두껍게 편 썰은 감자 위에 치즈와 양념을 올려 구워낸 요리 이미지">
            <h3 class="tit">치즈 감자 구이</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
        <article class="card">
            <img src="img/card2_bg08.jpg" alt="감자를 으깨 만든 샐러드가 그릇에 담긴 이미지">
            <h3 class="tit">감자 샐러드</h3>
            <p class="desc">감자는 전분이 많고 익히면 부슬부슬해 집니다. 껍질 채로 먹을 수 있고 익힌 감자는 단 맛이 납니다. 감자를 맛있게 요리하여 먹어보세요.</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
    </div>
</section>

CSS 작성하기

만들어 둔 디자인을 보며, 각 요소의 CSS를 설정해줍니다. 최종 완성 후 디자인과 비교하며 다른 점을 수정해줍니다. 요소를 배치하면서 제대로 css가 적용되는지 확인하고 싶다면, 해당 요소에 배경색을 지정해 확인하도록 합니다.

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

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

/* 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;
}
.gray {
    background-color: #f5f5f5f5;
}

/* ir 효과(이미지 대체 효과 == alt) */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* cardType02 */
.card__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card__inner .card {
    width: 24%;
    position: relative;
}
.card__inner .card:first-child{ /* 첫번째걸 선택하게 된다면 nth-child(1)보다 first-child가 호환성이 좋다. */
    margin-bottom: 50px;
}
.card__inner .card img {
    margin-bottom: 20px;
    border-radius: 10px;
}
.card__inner .card .tit {
    font-size: 28px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
}
.card__inner .card .desc {
    font-size: 18px;
    font-weight: 300;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.card__inner .card .more {
    width: 24px;
    height: 24px;
    background-image: url(img/arrow.svg);
    display: block;
    position: absolute;
    right: 0;
    top: 230px;
    border-radius: 5px;
}

원본 소스 보기

원본 페이지 보기