728x90
SITE를 만들어봅시다 !
우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다.
오늘은 그 중에서도 카드 유형 첫번째 방법을 배워봅시다.
1. Figma 활용하기
모든 사이트들은 각각의 레이아웃을 가지고 있습니다. 레이아웃이 잘 짜여 있어야 그에 맞춰 코딩하기가 편하기 때문에 오차가 없도록 만들어 주는 것이 중요합니다. 아래 참고 사진은 figma를 통해 frame에 layout grid - Columns 를 사용해주었습니다.
2. CSS 살펴보기
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: "NexonLv1Gothic";
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 { /* +는 형제 바로 밑에 있는 자식은 > */
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 3oo;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* cardType */
.card__inner {
display: flex;
justify-content: space-between; /* 정렬 맞게 배치 */
}
.card {
width: 32%;
background-color: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .tit {
font-size: 24px;
margin-bottom: 10px;
/* 한줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
/* 세줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
#1. .section > h2 { }
부모 바로 밑에 있는 자식에게만 적용하고 싶을 때는 <, 형제일 경우는 + 를 사용해줍니다.
#2. justify-content: space-between;
정렬에 맞게 배치해 줄 때 사용해줍니다.
3. HTML 살펴보기
<body>
<section id="cardType" class="card__wrap nexon section">
<h2>운동하자 운동 👟</h2>
<p>운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다.</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="img/card_bg01.jpg" alt="스트레칭(Stretching)">
</figure>
<div class="card__body">
<h3 class="tit">>스트레칭(Stretching)</h3>>
<p class="desc">>스트레칭은 쉽게 말해서 평상시 상태보다 근육의 길이를 늘려주는 것으로 근육의 적절한 톤을 유지하는 데 도움을 줍니다. 모든 운동 전에 필수로 진행해줍니다...</p>>
<a class="btn" href="/">>
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0L0 4.5Z" fill="black"/>
</svg>
</span>
</a>>
</div>>
</article>>
<article class="card">>
<figure class="card__header">>
<img src="img/card_bg02.jpg" alt="피겨 스케이팅(Figure Skating)">>
</figure>>
<div class="card__body">>
<h3 class="tit">>피겨 스케이팅(Figure)</h3>>
<p class="desc">>아이스 링크 위에서 음악에 맞춰 스케이팅 기술을 선보이는 스포츠입니다. 피겨 이외에도 쇼트트랙 스피드스케이팅, 스피드 스케이팅이 있습니다. 피겨 스케이팅 종목...</p>>
<a href="/">>
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0L0 4.5Z" fill="black"/>
</svg>
</span>
</a>>
</div>>
</article>>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03.jpg" alt="서핑(Surfing)">
</figure>
<div class="card__body">
<h3 class="tit">서핑(Surfing)</h3>
<p class="desc">서프보드를 타고 파도의 경사진 면을 오르내리며 높이와 속도, 기술을 겨루는 스포츠입니다. 바다가 아니더라도 파도나 파도와 비슷한 경사진 수면만 있으면 서핑이...</p>
<a href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0L0 4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
</body>
#1. <article> 은 시멘틱 태그로 안에 제목 태그가 꼭 같이 있어야 합니다.
#2. .card 안에서도 .card__header와 .card__body로 나누어 보기 좋게 정리해줍니다.
#3. aria-hidden 을 사용하여 콘텐츠를 숨겨줍니다. 이러한 속성은 스크린 리터와 같은 보조기술에서도 탐색할 수 없어 사용자의 편의성에 맞춰 설정해주시면 됩니다.
4. 결과 확인하기
'SITE > CARD' 카테고리의 다른 글
| SITE | cardType #3 (13) | 2022.08.11 |
|---|---|
| SITE | cardType #2 (11) | 2022.08.10 |
댓글