Receipt
😎 html
html 코드
<h1>
Bill sharing request
<span>from frenchkebab</span>
</h1>
<div class="receipt">
<h2>
McDonald's
<strong class="barcode"><img src="./assets/barcode.svg" alt="Barcode" /></strong>
</h2>
<span aria-label="Issued on June 24th, 20xx"> 24.06.20xx </span>
<div>
<dl>
<div>
<dt>Cock Light - 0.3<span aria-label="litter">L</span></dt>
<dd>$1.50</dd>
</div>
<div>
<dt>Chicken McNuggets</dt>
<dd>$21.00</dd>
</div>
<div>
<dt>In total</dt>
<dd>
<strong>$25.75</strong>
</dd>
</div>
</dl>
</div>
</div>결과 화면
😎 css 입히기
css 코드
receipt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1>
Bill sharing request
<span>from frenchkebab</span>
</h1>
<div class="receipt">
<h2>
McDonald's
<strong class="barcode"><img src="./assets/barcode.svg" alt="Barcode" /></strong>
</h2>
<span aria-label="Issued on June 24th, 20xx"> 24.06.20xx </span>
<div>
<dl>
<div>
<dt>Cock Light - 0.3<span aria-label="litter">L</span></dt>
<dd><strong>$1.50</strong></dd>
</div>
<div>
<dt>Heineken Beer - 0.5<span aria-label="litter">L</span></dt>
<dd><strong>$3.25</strong></dd>
</div>
<div>
<dt>Chicken McNuggets</dt>
<dd><strong>$21.00</strong></dd>
</div>
</dl>
<dl>
<dt>In total</dt>
<dd>
<strong>$25.75</strong>
</dd>
</dl>
</div>
</div>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap');
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Nunito Sans', sans-serif;
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;
}
body > h1 {
margin-bottom: 32px;
font-size: 20px;
line-height: 28px;
color: #fff;
}
body > h1 span {
display: block;
font-size: 14px;
font-weight: 400;
line-height: 20px;
opacity: 0.5;
}
body > h1 a {
color: #fff;
text-decoration: none;
}
body > h1,
.receipt {
width: 100%;
max-width: 320px;
}
.receipt {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px 32px 32px;
border-radius: 12px;
background-color: #fff;
background-image: url('./assets/logo-mcdonalds.png');
background-repeat: no-repeat;
background-size: 40px auto;
background-position: 91% 28px;
}
.receipt > span {
order: 1;
display: block;
width: 100%;
margin-bottom: 20px;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #80868e;
}
.receipt h2 {
order: 2;
margin-bottom: 24px;
font-size: 18px;
font-weight: 600;
line-height: 24px;
color: #333e47;
}
.receipt .barcode {
order: 3;
width: 120px;
margin-bottom: 32px;
}
.receipt img {
width: 100%;
height: auto;
}
.receipt > div {
order: 4;
}
.receipt dl {
width: 100%;
}
.receipt dl div,
.receipt dl:last-child {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 14px;
color: 333e47;
opacity: 0.8;
}
.receipt dl:last-child {
margin-bottom: 16px;
}
.receipt > div {
display: flex;
flex-direction: column-reverse;
width: 100%;
}
결과 화면
😎 알아갈 점들
제목 속의 내용
제목 안의
from frenchkebab은 그냥 h1 태그 안에서 span으로 감싸주면 된다!
바코드는 뭘로 처리할까?
나름 중요한 정보 이므로 strong태그로 감싸주도록 하자
발행 날짜는 어떻게 처리할까?
제목 속의
from frenchkebab과 마찬가지로, span 처리를 해 주도록 하자!
이쯤되니 span을 언제 쓸지 조금씩 보이는 것 같다
total 값은 중요하니까!
그냥 임의적으로 strong 태그로 감싸주었다.
한층 더 다른 금액과는 다르게 강조된 시멘틱한 의미가 생겼다!
L 같은 알파벳 단위는 어떻게 처리할까?
span으로 감싸서 aria-label을 적용할 수 있도록 해주자!
의미상 total 값이 하단에 오는 것이 자연스러우니까...
total 값을 아래에 작성하고, css로 올려주도록 하자!
가격 값은 강조해 주자!
strong 으로 가격을 강조해 주면 조금 더 시멘틱하게 할 수 있을 것 같다!
Blockchain Dev Journey