사이트 만들기 _ 카드 유형01
사이트 만들기 첫번째 시간입니다. 사이의 구성 유형은 메뉴 유형, 배너 유형, 이미지 유형 기타 등등 많은 유형이 있습니다. 그 중 카드 유형에 대해 공부해보겠습니다.
카드 유형 중 기본이 되는 유형입니다. 아래 피그마를 참조하여 똑같이 만들고 웹표준 기준도 준수해봅시다.
보통 wrap의 width 값을 1200px으로 부여했지만, 이번 사이트-카드유형은 양쪽에 살짝식 여백이 있으므로 1160px로 작업합니다. 레이아웃 배치 속성은 'display:flex'를 사용하여 작업하겠습니다.
aria-hidden="true"
웹표준을 준수하기 위해 aria-hidden="true"을 사용하였습니다. 청각장애인들이 사이트를 이용할때는 스크린리더를 통해 사이트를 이용하는데요. 위 사이트의 경우에는 '자세히보기 옆의 화살표'의 태그는 굳이 읽히지 않아도 되겠죠? 그래서 스크린리더가 위 속성값이 들어가는 경우에는 읽는걸 무시하고 지나갑니다.
.section > h2 {}
새로운 CSS선택자 속성을 사용해보겠습니다. > 를 사용하게 되면 바로 아래 자식요소만 적용시킬 수 있게 됩니다.
.section h2 {}처럼 사용하게 되면 section안의 h2요소들에게 전부 style을 부여하지만, .section > h2 {}를 사용하게 되면 section안에 h2요소들이 많이 있어도 첫번째 h2에만 style을 적용하게 됩니다.
.section h2 {}처럼 사용하게 되면 section안의 h2요소들에게 전부 style을 부여하지만, .section > h2 {}를 사용하게 되면 section안에 h2요소들이 많이 있어도 첫번째 h2에만 style을 적용하게 됩니다.
text-overflow
텍스트가 길어질 경우 넘치는 텍스트를 어떻게 처리할지에 관한 속성입니다. 이 속성은 overflow 속성값이 hidden, scroll, auto 이면서 white-space:nowrap일 경우에만 적용됩니다. 이를 응용하여,
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
을 추가해주면 3줄 이상의 텍스트를 …으로 표현가능합니다.
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
을 추가해주면 3줄 이상의 텍스트를 …으로 표현가능합니다.
| 속성 | 설명 |
|---|---|
| clip | 넘치는 텍스트를 자릅니다. |
| ellipsis | 넘치는 텍스트는 말 줄임표로 표시하여 뒤에 내용이 있음을 표시합니다. |
CSS 속성
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: "NexonLv1Gothic";
font-weight: 400;
}
/* 리셋 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.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: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* cardType */
.card__inner {
display: flex;
justify-content: space-between; //양쪽에 맞춰 균등하게 정렬 ≒ word-균등분할
}
.card {
width: 32%;
background: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .tit{
font-size: 24px;
margin-bottom: 10px;
overflow: hidden; //제목이 길어지면 잘라서 표현해주기위한 효과
white-space: nowrap; //제목이 길어지면 잘라서 표현해주기위한 효과
text-overflow: ellipsis; //제목이 길어지면 잘라서 표현해주기위한 효과
}
.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: 4; //네줄 이상의 텍스트는 …으로 표현하는 효과
-webkit-box-orient: vertical; //네줄 이상의 텍스트는 …으로 표현하는 효과
}
HTML 속성
<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_01.jpg" alt="외형에 대한 오해 이미지">
</figure>
<div class="card__body">
<h3 class="tit">외형에 대한 오해</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.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg01_02.jpg" alt="도베르만의 성격 이미지">
</figure>
<div class="card__body">
<h3 class="tit">도베르만의 성격</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.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg01_03.jpg" alt="도베르만을 키울때 주의할 점 이미지">
</figure>
<div class="card__body">
<h3 class="tit">도베르만을 키울때 주의할 점</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.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
결과보기
728x90
'SITE' 카테고리의 다른 글
| [사이트 만들기]모든 유형을 모아서 만들어보자 실전유형01 (13) | 2022.09.12 |
|---|---|
| 웹사이트 만들기/CardType 03 (12) | 2022.08.10 |
| 웹사이트 만들기/CardType 02 (9) | 2022.08.09 |
댓글