Product Card
😎 html
html 코드
<img
src="https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png"
alt=""
/>
<div class="product-card-title">
<h1>혼자가 혼자에게</h1>
<strong aria-label="오늘의 책 선정">오늘의 책</strong>
</div>
<strong aria-label="저자 이병률">이병률</strong>
<strong aria-label="평점 9.4">
<span aria-hidden="true">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-hafl"></i>
</span>
9.4
</strong>결과 화면
😎 css 입히기
ProductCard.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Post Card</title>
<script src="https://kit.fontawesome.com/b9d1456fd5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp"
crossorigin="anonymous"
/>
</head>
<body>
<div class="product-card">
<div class="product-card-title">
<img
src="https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png"
alt=""
/>
</div>
<div class="product-card-title">
<h1>혼자가 혼자에게</h1>
<strong aria-label="오늘의 책 선정">오늘의 책</strong>
</div>
<strong aria-label="저자 이병률" class="product-card-author">이병률</strong>
<strong aria-label="평점 9.4" class="product-card-review">
<span aria-hidden="true">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-hafl"></i>
</span>
9.4
</strong>
</div>
</body>
</html>
styles.css
@import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
* {
margin: 0;
box-sizing: border-box;
letter-spacing: -0.03em;
}
html {
font-family: 'SpoqaHanSans';
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #1f2d3d;
}
body::after {
content: 'frenchkebab©';
display: block;
margin-top: 50px;
color: #fff;
font-size: 12px;
font-weight: 600;
}
.product-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 48px 24px;
border-radius: 4px;
background-color: #fff;
}
.product-card:hover .product-card-image::after {
box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.4);
}
.product-card-image {
order: 1;
position: relative;
}
.product-card-image img {
position: relative;
z-index: 1;
border-radius: 5px;
}
.product-card-image::after {
content: '';
position: absolute;
z-index: 0;
left: 50%;
bottom: 8px;
width: 75%;
height: 0;
padding-bottom: 75%;
transform: translateX(-50%);
background-color: #fff;
transition: box-shadow 250ms ease-in;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.65);
}
.product-card-title {
order: 3;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 16px;
}
.product-card-title h1 {
font-size: 18px;
line-height: 1.3333333333;
color: #212529;
}
.product-card-title strong {
padding: 0 5px 0 4px;
border-radius: 4px;
margin-left: 8px;
font-size: 13px;
line-height: 20px;
color: #fff;
background-color: #0257c7;
}
.product-card-author {
order: 2;
margin: 8px 0;
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: #80868e;
}
.product-card-review {
order: 4;
display: flex;
justify-content: center;
align-items: center;
margin-left: -4px;
font-size: 14px;
}
.fas {
color: #ffcf14;
margin-right: -1px;결과 화면
😎 알아갈 점들
lang 속성을 잘 체크하자!
한글로 작성된 문서이므로, lang값을 ko로 넣어줌!
저자 - 제목 순서
이미지 다음에 자연스럽게 제목이 읽힐 수 있도록 제목을 우선 배치해 준다.
중요한 정보들
저자 또한 중요한 정보이므로 시멘틱하게 strong 태그를 넣어주도록 한다!
평점
스크린리더를 사용하는 사람은 별점을 통한 유추가 되지 않으므로, 평점 이라는 단어를 넣어주도록 하자!
aria-hidden
별점 같은 경우에는 스크린 리더로 읽히지 않도록 aria-hidden="true"로 속성을 넣어주도록 하자!
fontawesome 사용
별표같은 것들은 fontawesome을 적극적으로 사용하도록 하자!
Blockchain Dev Journey