오늘은 카드 타입의 레이아웃을 만들어보겠습니다~!!
카드 유형 페이지 만들기
피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다.
기본 CSS 리셋값 설정해주기
CSS 리셋(CSS Reset)은 웹 사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠??
이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다.
그리고 바디 안쪽에 섹션들을 나누어주겠습니다.
<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%;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* common */
</style>
카드 타입 섹션들을 지정해주고 CSS를 설정해줍니다. (제목, 설명글 등등)
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">향수, 그 날의 기분</h2>
<p class="section__desc">향수는 보통 향기로 연결되어 있는데, 향수의 이미지는 여러 가지로 표현될 수 있습니다.향수나 화장품의 조향은 소비자에게
매우 중요한 요소 중 하나입니다. 좋은 향기는 사용자에게 기분 좋은 감정을 전달하고, 제품의 매력을 높여주기 때문입니다.</p>
<div class="card__inner">
</div>
</div>
</section>
</body>section 태그와 h2태그, p태그, div태그에 각각 이름들을 붙여줍니다.
그리고 제목에 맞는 텍스트를 넣어줍니다.
메인 제목과 설명 글에 CSS를 적용시켜줍니다.
.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;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
카드 영역을 구성해주고 CSS 설정해주기
inner 안쪽에 article 태그를 3개 만들고, 그 안에 카드의 사진과 내용을 구성해 넣어줍니다.
그리고 이미지(저장 후 asset 폴더에 img 파일에 넣어줌)와 글, 버튼에 각각 class로 이름을 지정해줍니다. (CSS 적용하기 위해)
<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">프로방스 지역의 풍부한 자연과 농촌 생활을 상기시키는 이미지를 가지고 있습니다. 라벤더와 같은 식물성 향료를 사용하여 경쾌하고 상쾌한 느낌을 줍니다.</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">우드(목재)의 향기를 기반으로한 향수로, 자연스럽고 편안한 느낌을 주며, 특히 남성용 향수에 많이 사용됩니다. 우디 향수는 호불호가 많이 갈리는 향입니다. </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">신선하고 경쾌한 이미지를 가지고 있으며, 그레이프푸르트, 레몬, 라임 등의 시트러스 향료를 사용하여 만듭니다. 보통 봄과 여름철에 많이 사용됩니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
아직 CSS를 적용하기 전이라 이렇게 블록 구조로 처리가 됩니다.
.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,%0A%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%0A");
background-repeat: no-repeat;
background-position: right center;
}css를 설정해줍니다.
그럼 이렇게 페이지가 뚝딱 만들어집니다 ㅎ____ㅎ
CSS 사전
| text-align | 속성은 텍스트 정렬 방식을 설정합니다. |
|
vertical-align
|
인라인 요소의 수직 정렬 방법을 설정하는 속성입니다. |
| justify-content | CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다. |
|
background-repeat
|
배경 이미지의 반복 여부를 지정하는 속성입니다. |
| background-position | 배경 이미지의 위치를 지정하는 속성입니다. |
|
background-image
|
요소의 배경 이미지를 설정하는 속성입니다. |
|
display
|
요소의 표시 방법(display method)을 설정하는 속성입니다. |
완성된 페이지
https://yeodaseul4355.github.io/web2023/site/textType/textType01.html
다른 유형의 페이지 보러가기
이미지 유형 : https://duektmf34.tistory.com/37
이미지텍스트 유형 : https://duektmf34.tistory.com/42
슬라이드 유형 : https://duektmf34.tistory.com/43
텍스트 유형 : https://duektmf34.tistory.com/48
배너 유형 : https://duektmf34.tistory.com/59
푸터 유형 : https://duektmf34.tistory.com/53
728x90
반응형
