...
728x90
반응형
레이아웃 실전 _ 카드유형
카드유형 레이아웃 디자인하기
우선 만들고자 하는 웹 사이트의 레이아웃을 구상해봅니다.
구상한 디자인 기반으로 코딩하기
구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다.
<!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;
}
.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: 25px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* 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>
</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 class="card__header">
<img src="../asset/img/cardType01_01.jpg" alt="한강 주변 관광지">
</figure>
<div class="card__body">
<h3 class="title">한강 주변 관광지</h3>
<p class="desc">한강 주변에는 대표적으로 한강공원이 위치하며, 주요 관광지로는 남산타워, 경복궁, 국립중앙박물관, 63빌딩, 덕수궁 등이 있습니다. 또한, 한강을 따라 자전거도로와 산책로가 조성되어 ...</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_02.jpg" alt="한강의 중요성">
</figure>
<div class="card__body">
<h3 class="title">한강의 중요성</h3>
<p class="desc">한강은 또한 한반도의 역사와 문화를 반영하는 중요한 상징 중 하나입니다. 특히, 1950년대 한국전쟁에서 중요한 전장으로 사용되었던 곳으로, 이 곳에서는 자유를 지키기 위한 투쟁과 ...</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_03.jpg" alt="한강의 길이">
</figure>
<div class="card__body">
<h3 class="title">한강의 길이</h3>
<p class="desc">한강은 총길이 514.5km, 유역면적은 약 25,805km²로 대한민국에서 가장 긴 강 중 하나입니다. 또한, 서울특별시를 중심으로 인구 밀집 지역을 지나가며 수도권의 주요한 물길로 ...</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>HTML 정리해보기
- 우선 전체를 감싸는 하나의 section을 만들어주어 내용들을 넣었습니다.
- section안에 container를 만들어 크게 세 부분으로 나누어 만들었습니다.
- 첫 번째 부분은 <h>태그를 사용해 제목을 나타내었고, 그 밑 <p>태그를 사용해 설명란을 만들었습니다.
- 마지막으로 하나의 박스에 세가지의 이미지와 설명글을 넣었습니다.
CSS 정리해보기
- 현재의 페이지는 웹폰트를 사용해 외부로부터 링크를 받아와 사용했습니다.
- 공통적으로 들어가는 속성들을 우선적으로 적어주어야 편합니다. (margin:0, padding:0 등등)
- 작업하고자 하는 부분에 각각의 class를 두어 작업합니다.
- 같은 속성을 부여하는 곳에는 같은 class를 주어 작업합니다.
- 자세히보기에 들어가는 화살표의 경우 이미지 SVG파일을 CSS의 소스로 변환하여 넣어주었습니다.
- 소스로 변환하여 백그라운드에 넣어줄 때, 반복 속성을 없애주고 넣어야 합니다.
728x90
반응형