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

사이트 만들기

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

카드 유형01

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

디자인 하기

먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다.

HTML 작성하기

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

<section id="cardType" class="card__wrap nexon section">
    <h2>바질 키우는 법 🌱</h2>
    <p>바질 키우기 초보자를 위한 바질 키우기 강의입니다.</p>
    <div class="card__inner container">
        <article class="card"> //article 태그를 이용해, 컨텐츠가 들어갈 박스를 만들었습니다.
            <figure class="card__header"> //figure는 새로 나온 태그, img 태그를 작성할 경우 figure태그 안에 넣어준다.
                <img src="img/card_bg01.jpg" alt="바질 키우기 기초의 바질 잎 패턴 이미지"> //alt를 작성하면, 웹 접근성을 높일 수 있으며 웹 표준에도 부합한다. 작성하도록 하자.
            </figure>
            <div class="card__body">
                <h3 class="tit">바질 키우기 기초</h3>
                <p class="desc">바질은 초보자가 키우기 쉬운 허브인 편입니다. 과습을 잘 견디며, 햇빛은 많이 요구합니다.겨울에 실내에 들여서 키운다면 여러해 동안 키울 수도 있습니다.</p>
                <a class="btn" href="/">더 자세히 보기</a>
            </div>
        </article>
        <article class="card">
            <figure>
                <img src="img/card_bg02.jpg" alt="바질 가지치기 기초의 바질 화분 이미지">
            </figure>
            <div class="card__body">
                <h3 class="tit">바질 가지치기 기초</h3>
                <p class="desc">바질을 풍성하게 키워 수확량을 올리고 싶다면, 바질이 Y자 형으로 자랄 수 있도록 바질의 성장속도에 맞춰 가지치기를 해주는 것이 좋습니다.</p>
                <a class="btn" href="/">더 자세히 보기</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="/">더 자세히 보기</a>
            </div>
        </article>
    </div>
</section>

CSS 작성하기

만들어 둔 디자인을 보며, 각 요소의 CSS를 설정해줍니다. 최종 완성 후 디자인과 비교하며 다른 점을 수정해줍니다. 요소를 배치하면서 제대로 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-between; /* 컨텐츠의 양쪽 정렬 */
}
.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;
}

원본 소스 보기

원본 페이지 보기