728x90
SITE를 만들어봅시다 !
이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다.
1. Figma 활용하기
큰 영역 안에 3개의 카드가 있는 형태 입니다. 카드만 있는 것이 아닌 각각을 구분하는 선과 소제목 표시, 프로필 등 디테일 요소가 추가 되었습니다.
2. CSS 살펴보기
<style>
/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
font-family: "SCoreDream";
font-weight: 300;
}
/* 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;
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: 3oo;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* blind : 형식상 제목이 필요하지만 보이지 않도록 처리 */
/* text-indent: -9999px; 쓰면 버그가 발생한다고 함 */
/* .blind {
width: 0;
height: 0;
line-height: 0;
overflow: hidden;
position: absolute;
text-indent: -9999px;
}*/
/* 네이버 블라인드 효과 설정 */
.blind{
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
/* cardType03 */
/* common에 써주면 다른 유형들도 바뀌니까 따로 빼서 설정 */
body {
background-color: #2254c3;
}
/* 카드 배치 설정 */
.card__inner {
display: flex;
}
/* 카드 3개 설정 */
.card__inner .card {
padding: 26px;
width: 333.5px;
background-color: #fff;
}
/* 카드 사이 구분선 설정 */
.card__inner .card:nth-child(1) {
border-right: 1px solid #eee;
}
.card__inner .card:nth-child(2) {
border-right: 1px solid #eee;
}
/* card__header */
.card__header {
position: relative;
}
.card__header img {
border-radius: 10px;
box-shadow: 4px 4px 5px 0 rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.card__header figcaption {
position: absolute;
right: 10px;
top: 10px;
padding: 6px 16px;
border-radius: 50px;
background-color: #fff;
text-align: center;
font-size: 14px;
color: #7b7b7b;
}
/* card__contents */
.card__contents h3 {
font-size: 20px;
line-height: 1.4;
margin-bottom: 10px;
/* 두줄 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card__contents p {
color: #666;
font-size: 16px;
line-height: 1.7;
margin-bottom: 30px;
/* 세줄 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* card__footer */
.card__footer {
display: flex;
justify-content: flex-end;
}
.card__footer h4 {
text-align: right;
color: #dd2a2a;
}
.card__footer em {
display: block;
color: #666;
font-style: normal;
}
.card__footer span {
width: 40px;
height: 40px;
background: #000;
border-radius: 50%;
overflow: hidden;
display: block;
margin-left: 10px;
margin-top: -3px;
box-shadow: 0 px 5px 0 rgba(0,0,0,0.05);
}
</style>
3. HTML 살펴보기
<body>
<section id="cardType03" class="card__wrap score section">
<h2 class="blind">건축의 세계</h2>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_01.jpg" alt="Architects">
<figcaption>Architects</figcaption>
</figure>
<div class="card__contents">
<h3>세상에서 제일 높은 빌딩은 어디에 위치해 있고 특징이 무엇일까 ? (TOP5를 통해 살펴보자)</h3>
<p>세상에서 제일 높은 빌딩은 어디에 위치하고 있으며 누가 설계하였을까? 높게 짓기 위해 특별히 적용한 공법이 있는지 다같이 알아보기로 하자. 먼저 5위를 말해보자면...</p>
</div>
<div class="card__footer">
<h4>Arc_Building <em>9 minute ago</em></h4>
<span><img src="img/card_bg03_icon01.png" alt="프로필사진1"></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_02.jpg" alt="Roma">
<figcaption>Roma</figcaption>
</figure>
<div class="card__contents">
<h3>(서양 건축사) 로마네스크 시대의 특징과 건축의 특징을 알아봅시다 !</h3>
<p>로마네스크 건축은 당시 잦은 전쟁으로 인해 건물이 불에 타거나 붕괴되는 일이 많아 전체적으로 육중한 특징을 많이 볼 수 있습니다. 그 중에서도</p>
</div>
<div class="card__footer">
<h4>wody987 <em>2 minute ago</em></h4>
<span><img src="img/card_bg03_icon02.png" alt="프로필사진2"></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_03.jpg" alt="hanok">
<figcaption>hanok</figcaption>
</figure>
<div class="card__contents">
<h3>(동양 건축사) 한옥의 구조와 다양한 지붕의 형태를 알아봅시다 !</h3>
<p>우리나라 전통 건축 한옥의 구조를 살펴봅시다. 한옥은 나무를 다듬어서 기둥을 세우고 보를 걸고, 그 위에 소로와 첨차, 도리와 서까래를 짜 맞추...</p>
</div>
<div class="card__footer">
<h4>lovuKoreaP <em>30 sec ago</em></h4>
<span><img src="img/card_bg03_icon03.png" alt="프로필사진3"></span>
</div>
</article>
</div>
</section>
</body>
3-1. 자세히 살펴보자 !
/* 한줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
/* 두줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* 세줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
1) overflow: 속성값(value);
주어진 공간보다 더 많은 컨텐츠를 보여줘야 하는 경우, 넘치는 부분을 어떻게 표현할지 정해주는 속성입니다.
| 속성값 | 의미 |
|---|---|
| visible |
기본 속성값으로 내부에 주어진 공간보다 컨텐츠가 클 경우, 범위를 벗어나더라도 모든 컨텐츠를 보여줍니다. 하지만 넘치는 컨텐츠를 연속으로 배치할 경우, 서로 겹쳐 보일 수 있습니다. |
| hidden | 넘치는 부분을 숨겨주는 속성값 |
| scroll | 스크롤바를 통해 모든 컨텐츠를 볼 수 있는 형식 |
| auto | 컨텐츠의 양을 정하기 어려운 경우 설정해주면 주어진 공간을 넘어가는 경우에만 스크롤바가 생긴다. |
2) text-overflow: 속성값(value);
white-space를 이용해 줄 바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할지 정하는 속성입니다.
| 속성값 | 의미 |
|---|---|
| clip | 주어진 공간에서 벗어난 부분은 잘라서 표시한다. |
| ellipsis | 잘라지는 부분에 말 줄임표(...)를 이용해 텍스트가 더 있다는 표시를 해준다. |
* white-space : 요소의 공백을 어떻게 처리할 지 정하는 속성
| 속성값 | 의미 |
|---|---|
| normal | 공백과 줄바꿈을 하나의 공백으로 표시한다. 소스 내 줄 바꿈 문자도 공백 문자로써 처리된다. |
| norwap | 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시한다. |
| pre | 연속된 공백을 그대로 표시하며, 긴 줄도 줄 바꿈을 하지 않고 표시한다. |
| pre-wrap | 연속 공백은 그대로 유지한다. |
| pre-line | 연속 공백은 하나의 공백으로 처리된다. |
3) ir(image replacement) 효과;
콘텐츠를 지정한 줄 수 만큼만 표시하는 속성입니다.
| 종류 | 의미 |
|---|---|
| Phark Method | ir_pm { }; 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용한다. |
| Wa ir | ir_wa { }; 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용한다. |
| Screen out | ir_so { }; 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용한다. |
4. 결과 확인하기
'SITE > CARD' 카테고리의 다른 글
| SITE | cardType #2 (11) | 2022.08.10 |
|---|---|
| SITE | cardType #1 (10) | 2022.08.09 |
댓글