다른 명언
728x90
반응형
우선, 카드 유형 페이지는 보통 카드들이 행과 열로 구성되어 있는 그리드 형태의 레이아웃을 가지고 있습니다. 각 카드는 일반적으로 이미지, 제목, 설명 등의 정보를 포함하고 있습니다.
이를 자바스크립트로 구현하기 위해서는 먼저 HTML과 CSS로 그리드 레이아웃을 만들어야 합니다. 그리드 레이아웃은 CSS의 display: grid 속성을 사용하여 쉽게 만들 수 있습니다. 그리고 각 카드는 HTML의 div 태그 등으로 만들어집니다.
피그마를 이용하여 레이아웃을 만든후 layout grid의 columns를 12개 margin을 380으로 지정후 작업 하였습니다.
눈금자를 두어 각 그림과 문구가 들어갈 위치를 정확히 지정하였습니다.
페이지를 확대하여 1픽셀 단위도 오차가 없게 위치하여야 합니다.
완성된 이미지 입니다.
피그마에서 만든 이미지를 코드로 작성하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카드 유형01</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<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%;
}
/* 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__desc {
font-size: 22px;
line-height: 1.5;
color: #666;
margin-bottom: 70px;
font-weight: 300;
}
/* card__type */
.card__wrap {
}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__header {}
.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>
</head>
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">여우의 생활</h2>
<p class="section__desc">사막여우는 사람과의 접촉을 피하는 경향이 있으며, 인간이 살아가는 지역과 구분된 지역에서 주로 발견됩니다.
사람들은 이들을 사냥 대상으로 삼는 경우가 많아서 사망하거나 멸종 위기에 놓여 있습니다.</p>
<div class="card__inner">
<article class="card">
<figure>
<img src="../asset/img/cardType01_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>
<img src="../asset/img/cardType01_02.jpg" alt="사막여우의 생김새">
</figure>
<div class="card__body">
<h3 class="title">사막여우의 생김새</h3>
<p class="desc">사막여우는 길이가 50에서60cm, 몸무게가 1.53kg 정도인 작은 포유류입니다. 몸은 길쭉하고 다리가 길어 머리는 비교적 작으며, 귀는 크고 뾰족합니다. 몸은 황갈색, 붉은갈색, 회색 등... </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="../asset/img/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>
</html>css 모르는 용어 정리
- margin: 요소의 바깥쪽 여백을 지정합니다.
- padding: 요소의 안쪽 여백을 지정합니다.
- text-decoration: underline; 글자에 밑줄을 긋습니다.
- text-align: justify; 양끝을 맞춥니다
- text-align: center; 가운데정렬
- font-weight: bold; 굵은체로 변경합니다.
- border(테두리) -radius(둥글게)
- transition(애니메이션효과),animation(애니메이션)
- <style>, .class , #id : 스타일 정의하고 적용
- <head>:브라우저에게 정보를 주는 태그
- <body>: 몸통과 같은 존재(내용)
- <hn>:크기별 제목
- 리스트에서 세로 줄 라인에 리스트 들을 Column, 가로 줄 라인을 Row 라 합니다.
- text-transform: capitalize; 영어 단어의 첫글자를 대문자로
728x90