Leeyanggoo
[CSS] UI/UX 카드형 디자인 레이아웃 만들어 보기!! 본문
카드형 디자인이란?
카드형 디자인은 위의 예제처럼 이미지와 텍스트가 함께 어우러진 형태의 요소들로 구성한 웹 페이지 디자인을 뜻합니다.
카드에는 제품 미리보기, 블로그 게시물, 비디오 이미지 등 웹 페이지 또는 앱이 보여주고자 하는 정보가 묶여 있습니다.
이런 카드형 디자인은 구성에 따라 사용자에게 유연하게 제공할 수 있고, 한눈에 정보를 보여줄 수 있다는 점에서 효과적인 디자인 형태라고 할 수 있겠습니다!
🧐 시작은 HTML 구성부터!!
레이아웃을 만들 땐 페이지의 공간을 차지할 이미지와 텍스트를 담을 구획부터 나누면 작업이 편리합니다.
스타일을 입히기 위해선 적용할 공간부터 만들어야겠죠? 😅
HTML은 의미에 따라 마크업한다!
이전에 포스팅 했던 "시멘틱과 논리적 마크업" 혹시 알고 계시나요?
먼저 우리의 페이지에 어떤 정보가 어느 곳에 담겨있는지 구획을 나누기 위해 header, nav, section, article, aside, footer 등 알맞는 태그로 구획을 나눠야 합니다.
카드형 디자인은 주로 하나의 주제를 갖춘 "section"을 나타내는 디자인이라 할 수 있습니다.
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">시가를 보관하는 방법</h2>
<p class="section__decs">시가는 적절한 온도와 습도를 유지하는 것이 중요합니다.<br>제대로 보관하지 않으면 맛과 향이 손상될 수 있으며, 심지어 변질되어 맛이 나빠질 수도 있습니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../assets/img/cardType01_01.jpg" alt="온도와 습도 조절">
</figure>
<div class="card__body">
<h3 class="title">온도와 습도 조절</h3>
<p class="desc">시가는 상대적으로 낮은 온도와 높은 습도에서 보관해야 합니다. 일반적으로 70도와 70% 습도가 이상적인 조건입니다. 보관 온도가 너무 높으면 시가가 건조해지고, 습도가 너무 낮으면...</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
- <section> 태그를 만들어 우리가 구현할 큰 공간을 만들어 줍니다!
- <h2> 태그를 이용해 우리가 담을 정보의 제목을 적고, <p> 태그로 간략한 설명을 적습니다.
- 카드는 이미지와 텍스트, 두 부분으로 나뉘어 있는 걸 볼 수 있습니다. 이를 하나로 묶는 <div> 태그를 만들어 카드의 공간을 만들어 줍니다.
- 우리가 만들 카드들은 페이지 내에서 독립적으로 구분해 배포하거나 재사용하는 구획이므로, <article> 태그를 만들어 더욱 명확하게 마크업합니다.
- <figure>는 사진이나 도표, 그래프 등의 콘텐츠를 표시하는 데 사용하는 태그로써, 페이지의 명확한 정보 접근성을 위해 <img> 태그를 감쌌습니다.
또한 <img> 태그의 'alt'에 사진에 대한 간략한 설명을 넣어주면 더욱 정확한 정보 접근성을 만들 수 있습니다. - 카드의 제목은 section의 하위 분류이기 때문에 <h3> 태그에 적고, <p> 태그에 카드 설명을 간략히 적습니다.
이렇게 카드가 들어갈 "section"이라는 큰 공간부터 하나의 카드까지 구성하는 HTML 코드를 알아봤습니다.
예시는 3개의 카드니까 그만큼 <div> 태그를 추가해 늘려나가면 되겠죠?
우리가 만들 페이지의 정보들이 어떤 태그가 어울릴지 알고 있다면 레이아웃을 만드는 데 더욱 이해하기 쉬울 거예요! 😄
🧐 디자인은 차근차근!!
HTML 태그로 정보가 담길 요소들을 만들었으니, 이제는 스타일을 입힐 차례입니다.
CSS를 작성할 땐 내가 만들 페이지에 공통적으로 쓰일 스타일을 생각하고 HTML 태그에 id와 class 이름을 붙여주는 게 좋습니다!
* 본 포스팅은 스타일 속성에 대한 자세한 설명은 드리지 않습니다. 혹시 모르는 CSS 스타일이 있다면 검색과 함께 봐주시거나, 기초부터 공부하는 CSS 하위 포스팅을 보고 오시는 걸 추천드립니다!
선택자의 속성부터 디자인하자!
HTML 요소들은 다 만들었는데... 뭐부터 스타일을 입혀야 하지...? 라는 고민에 빠지셨다면 큰 틀부터 하나씩 나아가면 됩니다! 👍
가장 먼저 모든 페이지를 구성할 때 쓰일 선택자부터 디자인 한다면 다른 페이지에도 적용할 수 있어 앞으로의 디자인이 한결 편리해집니다.
<link href="웹폰트 링크">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
- 웹폰트는 보통 <head> 태그 안에 <style> 태그 위에 명시함으로 페이지에 쓰일 웹폰트 링크를 달아준다.
- 전체 선택자(*)에 margin과 padding에 '0'을 주어 꽉 찬 페이지를 구성한다.
- 폰트에 따라 weight 값이 상이하므로 제목 태그(<h~>)에 'normal'을 적용해 놓는다.
- 링크는 기본 디자인이 글꼴 파란색, 밑줄로 설정되어 있다. <a> 태그의 디자인을 변경하면 변경이 가능하다.
- 이미지는 부모 요소의 width 값에 따라 잘리는 경우가 있으므로 100%로 설정해 놓는다.
이처럼 모든 페이지에 적용할 요소들의 스타일부터 디자인 한다면 각 페이지의 통일감을 높일 수 있습니다.
이런 디자인 요소들을 모아놨다는 표시를 위해 최상단에 각주(/* */)로 표기해 놓는다면 찾을 때도 수월합니다!
여기선 전체 페이지와 선택자 속성을 초기화한다는 의미로 'reset'이라 하였습니다.
페이지를 구성하는 큰 공간 레이아웃!
전체적인 페이지 디자인을 마쳤다면 그다음 큰 부모 요소를 찾아서 스타일을 입혀 봅시다.
모든 카드를 품고 있는 "section" 부분이 그 요소가 되겠죠? 😄
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__decs {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
- section의 가장 큰 <div> 태그의 class인 "container"의 크기를 정하고, 배치에 맞게 margin과 padding에 값을 준다.
확인을 위해 background-color를 임시로 주면서 확인하면 편리하다. - 'normal' 혹은 'none'으로 스타일을 초기화했던 태그들(폰트, <a> 등)을 스타일한다.
- 큰 요소들의 간격을 margin과 padding으로 조정한다.
이렇게 "section" 부분에 공통적으로 적용할 디자인을 설정했습니다.
텍스트의 스타일을 정하고 구획의 간격을 나눠서 전체적인 틀을 잡는 것이라 보면 되겠습니다.
앞으로 다른 페이지의 "section"에도 공통적으로 적용할 스타일이라 /* common */ 이란 각주도 달았습니다.
레이아웃에 콘텐츠를 넣어보자!
페이지 전체를 디자인하고, 구획도 나눴다면!
이제 그 구획에 알맞는 콘텐츠를 디자인할 차례입니다.
여러 작은 요소들이 복합적으로 작용하기 때문에 하나하나 잘 살펴보면서 해야겠죠? 😅
/* card__type */
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 15px;
}
.card__body .desc {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
.card__body .btn {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='8' viewBox='0 0 32 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM31.3536 4.35355C31.5488 4.15829 31.5488 3.84171 31.3536 3.64645L28.1716 0.464466C27.9763 0.269204 27.6597 0.269204 27.4645 0.464466C27.2692 0.659728 27.2692 0.976311 27.4645 1.17157L30.2929 4L27.4645 6.82843C27.2692 7.02369 27.2692 7.34027 27.4645 7.53553C27.6597 7.7308 27.9763 7.7308 28.1716 7.53553L31.3536 4.35355ZM1 4.5H31V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
</style>
- <div> 태그는 block 요소이기 때문에 세로로 쌓이는 기본적인 특성을 가지고 있다. "display: flex"를 이용해 가로로 배치한다.
- 카드의 갯수에 따라 한 줄에 차지하는 width 값을 설정한다.
- 카드에 들어가는 요소들의 배치를 margin과 padding을 이용해 배치한다.
- background-image는 불러오는 이미지가 주어진 영역을 모두 차지할 때까지 반복하는 기본 특성을 가지고 있다.
화살표는 1번만 쓰기 때문에 "no-repeat" 설정을 하고, background-position으로 위치를 잡아준다.
여기까지 모든 요소의 스타일 작성을 끝냈다면...!
드디어 디자인을 마치고 한 페이지의 멋진 section을 완성하셨을 거예요!! 👍
이렇게 카드형 디자인을 만드는 순서를 알아봤습니다.
카드형 디자인은 카드를 어떤 크기로 만들고, 배치하느냐에 따라 수많은 디자인을 만들 수 있는 디자인 형태입니다.
여러분도 다양한 페이지를 보고 따라하면서 자신만의 카드형 디자인을 만들길 바랍니다!! 🧐
