whatisthis?
CSS - Typography Library 제작 (prac) 본문
Typography Library 제작
하나의 라이브러리를 제작.
💡 라이브러리(library)란?
일종의 kit.
자주 사용하는 코드(CSS의 경우엔 클래스) 를 한번 적어놓고
계속해서 사용할 수 있게 함.
1/ Noto Sans KR import 해오기
- fonts.google 이용
font-size와
그에 어울리는 line-height, letter-spacing을 같이 묶어서 정의하는 경우가 많음.
2/ font-size에 대한 라이브러리 제작
(typography.css)
/* Font size */
.fs-tiny {
font-size: 12px;
line-height: 1.3333333;
letter-spacing: -0.015em;
}
위와 같이 font-size는 12px로 하고,
line-height는 16 / 12 = 1.333333 (em)이므로
em은 생략해서 1.333333이라고만 적어준다.
letter-spacing은 퍼센트->em(배)로 변환하기 위해
-1.5 / 100 = -0.015 em이라고 적어준다.
📌중요!
line-height는 em 적지말고
letter-spacing은 em 꼭 적자.
(이후 모든 폰트사이즈도 똑같이 해줌)
>> 모든 사이즈가 다 letter-spacing이 -1.5%로 같으므로
그냥 공통적으로 적용해주기 위해 body 선택자로 옮겨주자.
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;
}
이제 클래스별로 잘 작동하는지 테스트해보자!
index.html 🔻
<h1 class="fs-tiny">hello!</h1>
<h1 class="fs-small">hello!</h1>
<h1 class="fs-base">hello!</h1>
<h1 class="fs-medium">hello!</h1>
<h1 class="fs-large">hello!</h1>
<h1 class="fs-h2">hello!</h1>
<h1 class="fs-h1">hello!</h1>
3 / font-weight에 대한 라이브러리 생성
/* 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;
}
4 / color에 대한 라이브러리 생성
/* 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;
}
라이브러리 완성!
이제 라이브러리를 활용해서 스타일링을 해보자.
index.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 rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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 text-dark">
버그가 너무 많아
<br />
김 버그
</h1>
<h3 class="fs-base text-dark">주니어 개발자의 성장 드라마, 김버그</h3>
<p class="fs-base text-primary">
속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이,
있다. 그들에게 그들은 길지 보내는 얼마나 동력은 칼이다. 청춘 위하여 같은
새 노래하며 풀이 청춘을 천자만홍이 풍부하게 칼이다. 목숨이 사는가
그들에게 안고, 위하여서, 타오르고 말이다. 많이 자신과 얼마나 없으면 몸이
이것은
<span class="text-error">품고 있으랴?</span>
</p>
<h3 class="fs-base text-dark">앞으로의 계획</h3>
<p class="fs-base text-primary">
끓는 봄바람을 끝까지 심장은 사는가 끓는 철환하였는가? 찾아다녀도, 우리는
청춘에서만 능히 행복스럽고 바로 위하여서. 반짝이는 광야에서 가지에
커다란 것이 청춘은 그들은 봄바람이다. 날카로우나 피가 얼마나 얼마나
기쁘며, 밥을 끓는 자신과 귀는 말이다. 그림자는 황금시대의 현저하게
곳으로 소리다.이것은 쓸쓸하랴? 가진 인간의 옷을 생명을 창공에 그들의
얼마나 살 따뜻한 힘있다. 현저하게 투명하되 웅대한 대한 것이다.
</p>
<h2 class="fs-h2 fw-regular text-dark">
프론트엔드 개발, 첫 단추를 꿰다
</h2>
<h3 class="fs-base text-dark">HTML, CSS</h3>
<p class="fs-base text-primary">
속에서 같은 주며, 가지에 그들의 우리의 때문이다. 이 길지 가는 있는 같이,
있다. 그들에게 그들은 길지 보내는 얼마나 동력은 칼이다. 청춘 위하여
<strong>같은 새 노래하며</strong> 풀이 청춘을 천자만홍이 풍부하게
칼이다. 목숨이 사는가 그들에게 안고, 위하여서, 타오르고 말이다. 많이
자신과 얼마나 없으면 몸이 이것은 품고 있으랴?
</p>
</div>
</body>
</html>
추가로, style.css를 작성하자.
(typography가 아닌 디자인 적용)
* {
box-sizing: border-box;
margin: 0;
}
h1 {
margin-bottom: 48px;
}
h2 {
margin-bottom: 24px;
}
h3 {
margin-bottom: 8px;
}
p {
margin-bottom: 32px;
}
margin-bottom을 줘서 간격을 디자인대로 맞춰준다.
추가로,
max-width를 설정해서 일정 크기 이상으로는 못커지게 제한하자.
.container {
width: 100%;
max-width: 736px;
}
그리고 가운데 정렬이 되도록
margin: 0 auto를 주자.
(블록이니까 margin left, right를 auto로 나눠갖게)
+ container에 padding도 주기.
style.css 🔻
* {
box-sizing: border-box;
margin: 0;
}
.container {
width: 100%;
max-width: 736px;
padding: 48px;
margin: 0 auto;
}
h1 {
margin-bottom: 48px;
}
h2 {
margin-bottom: 24px;
}
h3 {
margin-bottom: 8px;
}
p {
margin-bottom: 32px;
}
ref lecture.
'PRACTICE > SELF' 카테고리의 다른 글
| CSS - Transition practice (1) | 2022.03.01 |
|---|---|
| CSS - Background practice (AirBnB card) (0) | 2022.02.28 |
| CSS - 미디어쿼리 (Media Query) prac (0) | 2022.02.26 |
| CSS - Flexbox prac.03 (0) | 2022.02.26 |
| CSS - Flexbox prac.02 (0) | 2022.02.26 |
