사이트 제작하기 : 카드 유형03
이번 카드 유형은 큰 여백 안에 3개의 카드를 만들어 내는 유형입니다.
카드를 분리하는 선, 그림 안에 글씨 넣기, 제일 밑 부분에 인물 정보 넣어주기 등 기존에 했던 카드유형과는 다른 새로운 부분들이 있으니 주의하셔야 합니다!
오늘 만들 사이트 형식
사이트 제작 방법
1. Figma 사용해서 레이아웃 설정
사이트를 만들기 위해서는 기존의 카드 유형의 방법들과 같이 먼저 사이트 레이아웃을 설정해야 합니다.
figma를 이용하여 레이아웃을 설정해줄 수 있습니다.
※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다.
2. vscode를 통해 코딩해주기! : HTML편
레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.
<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/Rectangle.jpg" alt="">
<figcaption>여름 별미</figcaption>
</figure>
<div class="card__contents">
<h3>여름철 더위를 시원하게 이겨내기 위한 음식은? 바로 “ 화채”</h3>
<p>수박은 수분이 많아서 더위로 인해 땀이 났을 때 충분한 수분 보충이 가능합니다. 또한 수박을 먹으면 더운 한 여름에도 시원함을 느낄 수 있습니다.</p>
</div>
<div class="card__footer">
<h4>김XX기자 <em>9개의 기사 더보기...</em></h4>
<span><img src="img/card_bg03_icon01.png" alt=""></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/Rectangle2.jpg" alt="">
<figcaption>여름 별미</figcaption>
</figure>
<div class="card__contents">
<h3>여름철 더위를 시원하게 이겨내기 위한 음식은? 바로 “ 화채”</h3>
<p>수박은 수분이 많아서 더위로 인해 땀이 났을 때 충분한 수분 보충이 가능합니다. 또한 수박을 먹으면 더운 한 여름에도 시원함을 느낄 수 있습니다.</p>
</div>
<div class="card__footer">
<h4>김XX기자 <em>9개의 기사 더보기...</em></h4>
<span><img src="img/card_bg03_icon02.png" alt=""></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/Rectangle 19.jpg" alt="">
<figcaption>여름 별미</figcaption>
</figure>
<div class="card__contents">
<h3>여름철 더위를 시원하게 이겨내기 위한 음식은? 바로 “ 화채”</h3>
<p>수박은 수분이 많아서 더위로 인해 땀이 났을 때 충분한 수분 보충이 가능합니다. 또한 수박을 먹으면 더운 한 여름에도 시원함을 느낄 수 있습니다.</p>
</div>
<div class="card__footer">
<h4>김XX기자 <em>9개의 기사 더보기...</em></h4>
<span><img src="img/card_bg03_icon03.png" alt=""></span>
</div>
</article>
</div>
</section>
</body>
3. vscode를 통해 코딩해주기! : CSS편
style을 통해 CSS를 설정해줍니다.
피그마로 만들어 놓은 레이아웃을 보며 HTML로 구역을 정해준 후 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;
}
.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;
}
/* blind */
.blind {
position: absolute;
clip: rect(0 0 0 0);
/*포토샵 클리핑 마스크 같은 것*/
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden
}
/* cardType03 */
body {
background-color: #2254c3;
}
.card__inner {
display: flex;
/*가로 정렬*/
}
.card__inner .card {
padding: 26px;
width: 33.33333%;
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 {
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 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;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 30px;
}
.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; /*em태그로 인한 글자 기울임 방지*/
}
.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 2px 5px 0 rgba(0, 0, 0, 0.25);
}
</style>
▶완성본
★ 새로 배운 내용 ★
긴 글을 한 줄로 표현하면?
white-space: nowrap;
text-overflow: ellipsis; /*아래 세개는 한 줄 효과!*/
위 코드는 어떤 글을 한 줄로 표현하고자 할 때 CSS style에 적어줘야 하는 내용입니다.
"overflow"는 콘텐츠가 너무 크거나 길어서 요소의 블록 서식에 맞출 수 없을 때 처리법을 지정하는 속성입니다.
: hidden;을 같이 써주면 블록 밖으로 컨텐츠가 나가지 않으며 블록보다 콘텐츠가 클 경우 큰 부분을 숨겨줍니다. 스크롤은 지원하지 않습니다.
※ overflow 속성이 효력을 갖기 위해선 반드시 블록 컨테이너의 높이(height 혹은 max-height)를 설정하거나, white-space를 nowrap으로 설정해주어야 합니다.
"white-space"는 요소가 공백 문자를 처리하는 법을 지정하는 속성으로 : nowrap;을 써주었을 때 한 줄로 나타납니다.
"text-overflow"는 white-space를 이용해 줄 바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것 인지를 처리하는 속성입니다.
넘치는 텍스트를 자르는 : clip;이 있으며 말 줄임표로 잘린 텍스트가 있다고 표시하는 : ellipsis;가 있습니다.
※ text-overflow 속성은 overflow 속성이 hidden, scroll, auto 이면서 white-space:nowrap일 경우일 때만 적용됩니다!
긴 글을 세 줄로 표현하면?
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /*줄효과 clamp : 줄 효과 : 2라고 적으면 두 줄 효과, 3이라고 적으면 세 줄 효과*/
-webkit-box-orient: vertical;
"-webkit-line-clamp"는 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성입니다.
display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient속성을 vertical로 설정한 경우에만
동작합니다.
단순히 요소의 줄 수만을 제한하기 때문에 overflow : hidden; 속성과 함께 사용한다면 요소를 넘치는 텍스트를 감출 수 있습니다.
'사이트 제작하기 > Card Type 카드 유형' 카테고리의 다른 글
| [사이트 제작] 두번째 : 카드 유형 TYPE.02 (7) | 2022.08.09 |
|---|---|
| [사이트 제작] 첫번째 : 카드 유형 TYPE.01 (7) | 2022.08.08 |
댓글