[멋쟁이사자처럼 FE-5] 카드 UI 만들어보기
2023. 3. 6. 22:22ㆍ멋쟁이사자처럼 FE스쿨
멋쟁이사자처럼 프론트엔드 스쿨 수업을 진행하면서 배운 내용들을 활용하여 위와 같은 카드 UI를 만들어보자!
작성한 코드
reset.css는 normalize.css로 사용했다.
<!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>Card UI</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Card UI</h1>
<article class="card">
<a href="#">
<section class="profile-wrap">
<div class="profile-img">
<img src="img/profile.jpg" alt="" />
</div>
<div class="title-box">
<h2 class="title">그것은 아마도 불꽃</h2>
<p>secondary</p>
</div>
</section>
<img src="img/thumbnail.png" alt="" />
<section class="card-body">
<p class="card-text">
이상, 실현에 꽃 곳으로 그것은 이것이야말로 아니다. 가슴에 그들의
거친 그와 소담스러운 그들은 우리의 힘차게 때문이다. 따뜻한 미묘한
일월과 방지하는 얼음에 곳이 목숨을 심장의 것이다. 있는 끝에 역사를
가치를 교향악이다. 방지하는 풀이 우리는 쓸쓸한 미인을 만물은
소담스러운 낙원을 기쁘며, 것이다. 대중을 속에 피는 것은 보이는
약동하다. 우리의 광야에서 싸인 힘있다. 되는 눈에 피가 우리 동력은
무엇을 이는 청춘에서만 있다. 긴지라 이것이야말로 얼음 풍부하게 밥을
있는 이상을 우리 예수는 황금시대다. 가슴이 꽃 타오르고 힘차게 무엇을
만물은 피고, 있는 찾아다녀도, 철환하였는가?
</p>
<div class="read-wrap">
<span class="underline">Read</span>
<span style="font-weight: bold">›</span>
</div>
<div class="menu-icon">
<img src="img/icon-heart.png" alt="" />
<img src="img/icon-share.png" alt="" />
<img src="img/icon-more.png" alt="" />
</div>
</section>
</a>
</article>
</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;
}
body {
font-family: "Pretendard-Regular";
background: gainsboro;
}
.card {
background: white;
width: 288px;
height: 374px;
margin: 50px auto;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
transition: linear .2s;
}
.card:hover {
transform: scale(0.95);
}
.card a {
text-decoration: none;
color: #29363d;
}
.profile-wrap {
display: flex;
width: 254px;
height: 40px;
padding: 16px;
font-size: 0;
}
.profile-img {
width: 40px;
height: 40px;
border-radius: 70%;
overflow: hidden;
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
}
.title-box {
width: 200px;
height: 50px;
padding-left: 16px;
}
.title-box h2 {
margin: 3px 0 0 0;
font-size: 16px;
}
.title-box p {
margin: 1px 0 0 0;
font-size: 12px;
line-height: 14px;
color: #5a6a72;
}
a img {
width: 100%;
object-fit: cover;
vertical-align: top;
}
.card-body {
padding: 0 16px 0 16px;
}
.menu-icon {
float: right;
}
.read-wrap {
float: left;
padding: 5px 0 0 6px;
}
.menu-icon img {
width: 32px;
height: 32px;
padding-left: 5px;
}
.underline {
text-decoration: underline;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: #29363d;
padding-right: 15px;
}
.card-text {
font-size: 12px;
color: #5a6a72;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
margin: 12px 0 16px;
line-height: 20px;
}
느낀점 및 회고
피그마를 보고 최대한 따라서 만들어봤는데 내가 봐도 코드가 너무 복잡하다.. CSS 너무 어렵다 ㅠㅠ
프로필 이미지랑 타이틀 박스를 가로 정렬하는 과정에서 막혀버려서 이것저것 다 만져본 것 같다..
프로필 이미지와 타이틀 박스를 감싸는 section 태그의 display 속성을 flex로 주는 것으로 해결했다. 이렇게 쉬운걸
뭐그리 해멨는지.. 아직 난 많이 많이 부족한 것 같다. 더 열심히 하자
선택자 사용이나 중복 코드 최소화 등 CSS 요소를 잘 정리해서 적는 법도 많이 연습해야겠다.
'멋쟁이사자처럼 FE스쿨' 카테고리의 다른 글
| [2023.03.21] 프론트엔드 스쿨 오늘의 TIL (0) | 2023.03.21 |
|---|---|
| [2023.03.16] 프론트엔드 스쿨 오늘의 TIL (0) | 2023.03.16 |
| [2023.03.15] 프론트엔드 스쿨 오늘의 TIL (0) | 2023.03.15 |
| [2023.03.14] 프론트엔드 스쿨 오늘의 TIL (0) | 2023.03.14 |
| [2023.03.13] 프론트엔드 스쿨 오늘의 TIL (0) | 2023.03.13 |