이번 Typography 실습은 정해진 텍스트 스타일(폰트 크기/굵기/색상) 을 미리 클래스로 만들어두고, 필요한 곳에 조합해서 적용하는 방식으로 진행했다.
개별 요소마다 스타일을 매번 적는 게 아니라 재사용할 수 있어서 훨씬 효율적이다.
만들면서 궁금했던 점들
이번 실습은 궁금했던 점 없이 수월하게 진행할 수 있었다.
(오히려 “typography 클래스를 미리 만들어두는 방식이 이렇게 편하구나”를 체감한 느낌!)
강의 보면서 정리한 것
예를 들어, 정해진 typography 가이드(디자인 시스템)가 있다면..
그에 맞춰 font-size / font-weight / color 같은 값들을 묶어서 클래스로 만들어두고, 화면에서 필요한 조합으로 효율적으로 적용하면 된다.
line-height: 줄 간격
px로 주어진 값을 비율 값으로 바꿔서 적어주면 좋다. (단위 생략하고 숫자만 쓰기)- line-height(비율) = line-height(px) ÷ font-size(px)
letter-spacing: 자간
- 자간은 단위를 생략하면 안 되고, 보통
em을 사용한다.
코드
html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./typography.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<h1 class="fs-h1 fw-light fc-dark">
버그가 너무 많아
<br />
김 버그
</h1>
<h3 class="fs-base fw-bold fc-dark">
주니어 개발자의 성장 드라마, 김버그
</h3>
<p class="fs-base fw-regular fc-primary">
속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이, 있다. 그들에게 그들은 길지 보내는
얼마나 동력은 칼이다. 청춘 위하여 같은 새 노래하며 풀이 청춘을 천자만홍이 풍부하게 칼이다. 목숨이 사는가
그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이 이것은
<span class="text-error">품고 있으랴?</span>
</p>
<h3 class="fs-base fw-bold fc-dark">
앞으로의 계획
</h3>
<p class="fs-base fw-regular fc-primary">
끓는 봄바람을 끝까지 심장은 사는가 끓는 철환하였는가? 찾아다녀도, 우리는 청춘에서만 능히 행복스럽고 바로
위하여서. 반짝이는 광야에서 가지에 커다란 것이 청춘은 그들은 봄바람이다. 날카로우나 피가 얼마나 얼마나 기쁘며,
밥을 끓는 자신과 귀는 말이다. 그림자는 황금시대의 현저하게 곳으로 소리다.이것은 쓸쓸하랴? <strong>가진 인간의 옷을
생명</strong>을 창공에 그들의 얼마나 살 따뜻한 힘있다. 현저하게 투명하되 웅대한 대한 것이다.
</p>
<h2 class="fs-h2 fw-regular fc-dark">
프론트엔드 개발, 첫 단추를 꿰다
</h2>
<h3 class="fs-base fw-bold fc-dark">
HTML, CSS
</h3>
<p class="fs-base fw-regular fc-primary">
속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이, 있다. 그들에게 그들은 길지 보내는
얼마나 동력은 칼이다. 청춘 위하여 <strong>같은 새 노래하며</strong> 풀이 청춘을 천자만홍이 풍부하게 칼이다.
목숨이 사는가 그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이 이것은 품고 있으랴?
</p>
</div>
</body>
</html>css 코드
style.css
* {
box-sizing: border-box;
margin: 0;
}
.container {
width: 100%;
max-width: 740px;
padding: 48px;
margin: 0 auto;
}
h1 {
margin-bottom: 48px;
}
h2 {
margin-bottom: 24px;
}
h3 {
margin-bottom: 8px;
}
p {
margin-bottom: 32px;
}typography.css
body {
font-family: "Noto Sans KR", sans-serif;
letter-spacing: -0.015em;
}
/* Font Size */
.fs-tiny {
font-size: 12px;
line-height: 1.3333333333;
}
.fs-small {
font-size: 14px;
line-height: 1.4285714286;
}
.fs-base {
font-size: 16px;
line-height: 1.5;
}
.fs-medium {
font-size: 18px;
line-height: 1.5555555556;
}
.fs-large {
font-size: 20px;
line-height: 1.6;
}
.fs-h2 {
font-size: 28px;
line-height: 1.4285714286;
}
.fs-h1 {
font-size: 34px;
line-height: 1.4117647059;
}
/* Font Weight */
.fw-light,
.fw-300 {
font-weight: 300;
}
.fw-regular,
.fw-400 {
font-weight: 400;
}
.fw-medium,
.fw-500 {
font-weight: 500;
}
.fw-bold,
.fw-700 {
font-weight: 700;
}
/* Colors */
.text-dark {
color: #1f2d3d;
}
.text-primary {
color: #3c4858;
}
.text-secondary {
color: #8492a6;
}
.text-tertiary {
color: #c0ccda;
}
.text-white {
color: #fff;
}
.text-success {
color: #13ce66;
}
.text-error {
color: #ff5216;
}
.text-info {
color: #009eeb;
}이번 실습에서 배운 것
✔ Typography는 요소마다 스타일을 붙이기보다 정해진 스타일을 클래스로 만들어 재사용하면 훨씬 효율적이다.
✔ line-height 는 px 값을 그대로 쓰기보다 font-size로 나눈 비율 값(단위 없는 숫자) 으로 쓰는 게 유지보수/확장에 좋다.
느려도 천천히 꾸준히 !