Card Type
모바일 사용자가 폭증하면서 다양한 디바이스들이 나오고 있는 시대에 걸맞는 디자인 형식이라고 한다면
바로 ' 카드 타입 ' 입니다. 카드형 디자인은 웹과 모바일, 그리고 여러디바이스 화면크기에 최적화되는 모듈식 UI패턴이기 때문입니다.
특히나 이 카드 형식을으로 날아오른 사이트가 있습니다.
바로 '핀터레스트'인데요. 저도 이 사이트를 자주 이용하는데 그 중 하나가 수많은 컨텐츠를 많이, 보다 편리하게 볼 수
있다는 장점 때문이었습니다.
카드형 디자인은 매력적인 이미지나 컬러를 사용하여 지루하게 보일 수 있는 모듈UI 디자인의 단점을 보완하고 사용자에게 시각적인 즐거움과 직관적인 정보를 전달할 수 있게 하기도 합니다. 그래서 오늘은 이 카드형식의 페이지를 만들어 보려고 합니다.
레이아웃 및 디자인 정하기
저는 스몰토크를 할 수 있는 가볍고, 짧고, 재미있는 내용들로 구성된 페이지를 구상했습니다.
가장 간단한 타입의 카드 형식입니다. 레이아웃과 디자인은 피그마로 작업해주었습니다!
CSS & HTML
작성한 코드를 종류별로 나누었습니다. 각 부분에 대해서 파헤쳐보도록 하겠습니다.
reset
reset 부분입니다.
reset은 고유 css 속성값들을 초기화 시켜서 다른 브라우저에서도 웹사이트가 똑같이 표시 되게끔 하기위해 만드는 것을 말합니다.
/* reset */
* {
margin: 0;
padding: 0;
}
/* *은 CSS에서 모든 요소를 선택하는 선택자입니다.
margin & padding 모든 요소의 마진값과 패딩값을 0으로 설정하는 스타일입니다.
마진이란 요소 주변의 공간으로 여백을 의미하며 패딩은 내부의 공간으로 컨텐츠와 요소의 여백을 의미합니다. */
a {
text-decoration: none;
color: #000;
}
/* text-decoration: none;은 링크에 적용되는 밑줄과 같은 텍스트 장식을 제거하는 스타일입니다.
color: #000;은 링크 텍스트의 색상을 검정색(#000)으로 설정하는 것을 의미합니다. */
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/* h1~h6은 제목 태그로 모든 제목 태그의 기본 글꼴 두께를 normal로 설정하는 것을 의미합니다.
"normal"은 기본 글꼴 두께를 의미합니다. */
img {
vertical-align: top;
width: 100%;
}
/* vertical-align: top;은 이미지의 수직 정렬 방법을 설정합니다. "top"은 이미지를 상단으로 정렬하는 것을 의미합니다.
width: 100%;은 이미지의 너비를 100%로 설정하는 것을 의미합니다. 즉, 이미지가 부모 요소의 너비를 가득 채우도록 합니다.
이 코드로 인해 이미지가 부모 요소의 너비를 가득 채우고 상단으로 정렬되어 텍스트와 같은 다른 콘텐츠와 함께 일관 된 레이아웃을 만들 수 있게됩니다. */여기서 CSS의 초기화란?
각 태그들의 css속성값들 (margin, padding, line weight) 들을 0이나 none값으로 만드는 것으로
이것을 통해 초기화 시킨 후 stylw.css를 통해 새 속성값을 지정합니다.
common
공통적으로 적용되는 스타일이 여기에 위치하게 됩니다. 예를 들어 테이블 태그에 항상 적용하는 동일한 스타일이 있거나 비슷한 양식의 대그를 조정할 경우 이 곳에 정의하여 항상 똑같은 스타일을 적용할 수 있습니다.
reset과 공통이라는 점이 비슷하지만 reset은 속성의 초기화가 목적이고 common은 스타일을 공통으로 적용하는 것이 목적입니다.
/* common 공통요소 */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
/* class="container"로 적용된 요소 모두에게 스타일을 적용합니다.
bgc의 경우 공간을 얼마나 차지하는지를 확인하기 위한 색상으로 마지막에 주석처리를 해줍니다. */
.nexon {
font-family: NexonLv1Gothic;
font-weight: 400;
}
/* nexon은 클래스 이름으로 적용된 요소들에게 스타일을 적용합니다. */
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2{
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
line-height: 1.5;
}
.section__desc {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
}
/* class="section center"으로 적용된 요소들에게 스타일을 적용합니다.
line-height: 1;은 section__h2 클래스를 가진 요소의 텍스트 라인 간격을 1로 설정합니다. */Card Type 부분
카드형 디자인에 들어 갈 내용과 스타일 작성입니다.
스타일부분
/* card__type */
.card__wrap {
}
.card__inner {
display: flex;
justify-content: space-between;
}
/* display: flex;는 요소의 배치 방식을 유연하게 제어할 수 있도록 하는 속성으로
자신이 가진 내용물의 width 만큼만 차지하게 됩니다.
justify-content: space-between;는메인축 방향으로 아이템을 정렬하는 속성인데
뒤에 따라오는 space-between;으로 아이템들 사이(between)에 일정한 간격을 만들어줍니다. */
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__header {}
.card__body {
padding: 24px;
}
.card__body .tilte {
font-size: 24px;
margin: 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='%23666666'/%3E%3C/svg%3E");;
background-repeat: no-repeat;
background-position: right center;
}
/* "background-repeat: no-repeat;"은 배경 이미지를 설정할 때 사용하는 CSS 속성 중 하나입니다.
이 속성을 사용하면 배경 이미지가 반복되지 않고, 한 번만 표시되도록 지정할 수 있습니다.
"background-position: right center;"은 배경 이미지의 위치를 설정하는 CSS 속성 중 하나입니다.
이 속성을 사용하면 배경 이미지가 오른쪽 가운데에 위치하도록 지정할 수 있습니다. */
</style>내용 부분
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">"
</head>
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">1분 지식</h2>
<p class="section__desc">인간 뇌는 하루에 약 7천 개의 생각을 하며, 이 중 대부분은 과거나 미래에 대한 걱정이나 상상을 한다는 것 알고 계신가요?
우리가 알지 못했던, 흥미로운 지식을 철학, 예술, 종교, 우주 등 전 분야에 걸쳐서 알아보겠습니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/image/_cradType01_01.jpg" alt="철학">
</figure>
<div class="card__body">
<h3 class="title">철학</h3>
<p class="desc">철학은 인간의 존재, 이해, 가치, 인식,사유, 윤리 등에 대한 깊은 질문을 다루는 분야로 인간이 무엇인지 대한 깊은 이해를 추구합니다. 철학철학철학철학철학철학철학철학</p>
<a href="#" class="btn">자세히 보기
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/image/cardType01_02.jpg" alt="예술">
</figure>
<div class="card__body">
<h3 class="title">예술</h3>
<p class="desc">예술은 인간의 감정, 아름다움, 창조성, 상상력, 인간성 등을 표현하고 전달하는 창조적 활동으로 일종의 커뮤니케이션의 형태를 띄고 있습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/image/cardType01_03.jpg" alt="우주">
</figure>
<div class="card__body">
<h3 class="title">우주</h3>
<p class="desc">우주는 모든 존재가 존재하는 공간으로, 끝없이 넓은 우주는 지구를 포함한 모든 행성,별, 은하, 검은 구멍, 중성체 등의 천체와 그들 사이의 거대한 공간으로 이루어져 있습니다</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</section>
</body>section태그를 사용하여 큰 페이지의 구분을 적용했고 각 카드 영역은 article이라는 태그 안에서 구현되도록 작성하였습니다. 카드 내부에 이미지를 삽입할 경우에는 figure을 사용 했고 웹 페이지 표준을 준수하여 작성하였습니다. 마지막으로
' 자세히 보기 ' 로 더보기 버튼을 만들었습니다.
이렇게 해서 간단한 카드 형식의 웹 페이지를 만들어보았습니다! 쉽다면 쉽고 어렵다면 어려운 페이지 만들기였는데요.
다음에 또 새로운 형식의 페이지 만들기로 포스팅을 해보도록 하겠습니다!