멋쟁이사자 FE7
멋쟁이사자 FE7 8일차
FrontEnd 개발자 준비생 최현우
2023. 7. 12. 14:56
728x90
Apply & Feeling (적용 및 느낀 점)
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>카드 만들기</title>
<link rel="stylesheet" href="./card.css" />
</head>
<body>
<div class="card">
<div class="cardHead">
<img class="cardHeadImg" src="../images/unsplash.png" alt="" />
<div class="cardHeadLetter">
<span class="cardHeadLetterSpan">그것을 피가 청춘을 것이다</span>
secondary
</div>
</div>
<div class="cardMain">
<img class="cardMainImg" src="../images/thumbnail.png" alt="" />
<p class="cardMainLetter">
청춘의 하였으며, 이것은 몸이 때문이다. 사는가 고동을 용기가 충분히
청춘 것이다. 얼마나 반짝이는 소담스러운 열락의 아름다우냐? 가지에 같지
청춘의 옷을 목숨을 피어나기 오직 군영과 칼이다. 거친 끓는 예가 뿐이다.
방지하는 꽃이 청춘을 생명을 이것이다. 인간의 거선의 피고, 모래뿐일
작고 우리 평화스러운 있는가?
</p>
</div>
<div class="cardFooter">
<div class="cardFooterOne">
<span class="cardFooterOneSpan">Read </span>>
</div>
<div class="cardFooterTwo">
<img class="a" src="../images/icon-heart.png" alt="" />
<img class="a" src="../images/icon-share.png" alt="" />
<img class="a" src="../images/icon-more.png" alt="" />
</div>
</div>
</div>
</body>
</html>@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
}
* {
box-sizing: border-box;
margin: 0;
font-family: "Pretendard-Regular";
}
.card {
width: 288px;
height: 374px;
background: #fff;
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
margin: 100px;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 16px 0;
}
.cardHead {
display: flex;
width: 256px;
height: 40px;
}
.cardHeadImg {
display: block;
width: 40px;
height: 40px;
border-radius: 100px;
margin-right: 10px;
}
.cardHeadLetter {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 12px;
color: #5a6a72;
width: 200px;
height: 40px;
font-size: 5px;
}
.cardHeadLetterSpan {
display: inline-block;
color: #29363d;
font-size: 16px;
font-weight: 700;
margin-bottom: 1px;
}
.cardMainImg {
display: inline-block;
object-fit: cover;
width: 288px;
height: 196px;
margin-bottom: 10px;
}
.cardMain {
display: flex;
flex-direction: column;
align-items: center;
}
.cardMainLetter {
width: 256px;
height: calc(1em * 1.6 * 2);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-weight: 400;
font-size: 12px;
line-height: 1.6;
color: #5a6a72;
}
.cardFooter {
width: 256px;
height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3px;
}
.cardFooterOne {
display: flex;
gap: 16px;
font-size: 14px;
font-weight: 700;
color: #29363d;
}
.cardFooterOneSpan {
font-weight: 700;
}
.cardFooterOneSpan:after {
display: block;
content: "";
width: 33px;
border-bottom: 2px solid #29363d;
margin-top: -1px;
}
.cardFooterTwo {
width: 112px;
display: flex;
justify-content: space-between;
}
.a {
width: 32px;
height: 32px;
}
중요 포인트 및 느낀 점 : Read부분의 밑줄은 text-decoration: underline를 사용해 봤는데 너무 이쁘지도 않
고, figma의 이미지와 많이 달라서, 오랜 시간의 구글링 끝에.. ::after 속성을 이용하여 만들어 봤다.
:: after는 CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 요소를 하나 생성한다.
그다음으로, heigh: calc(1em *1.6*2), calc를 배워서 사용해 봤다.
**어떤 웹사이트들의 CSS를 보면 가끔 calc라는 이름의 함수를 만나곤 합니다. 이름(calculation)으로 예측할 수 있듯이 속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 CSS3 버전부터 제공되는 함수입니다.**
이 코드는 예를 들어 card에 청춘의 하였으며~~ 이 부분이 2줄인데 한 줄로 줄어들어도 지금의 높이를 유지할
수 있도록 해주는 코드이다.
css는 아직 내가 많이 해본 건 아니지만, 많이 찾아보고, 만들어본다면 실력이 일취월장할 수 있을 것이라고
생각한다. 또한 생각보다 재미있어서 배운 내용 외에도 내가 구현하고 싶은 것 있다면 도전해서 블로그에 기
록해 볼 예정이다!