웹 폰트 적용하기

카테고리 Daily

1. @import 방식으 CSS 최상단에 복붙

1
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.4/dist/web/static/pretendard.css");

2. font-family 설정

1
2
3
4
5
6
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
}
  • font-family는 하나로 정해두고 굵기는 원하는 부분에서 font-weight로 조절한다.

댓글 공유

<오늘부터 CSS 마스터 5일차> text와 font

카테고리 CSS

text

CSS는 많은 텍스트 속성을 가지고 있다.

❗️ 여기서 중요한 것은 text의 색상과 배경색의 대비이다. 이는 시각적인 문제에 있어 매우 중요하므로 대비를 고려하여 스타일링 해야한다.

text-alignment

text-align

text-align 속성은 text의 가로 정렬을 위해 사용된다.

1
2
3
p {
  text-align: center; // 가운데 정렬
}

vertical-align

vertical-align 속성은 요소의 세로 정렬을 위해 사용된다.

1
2
3
img {
  vertical-align: text-top; // 텍스트 기준보다 위쪽으로 이미지요소 배치
}

text-decoration

text-decoration 속성은 text에 라인을 추가한다.

❗️ 다만, underline 속성은 a 태그와 헷갈릴 수 있으니 유의하도록 하자.

Tip

a 태그는 기본값으로 underline 속성이다. 이것을 제거하고 싶다면 다음과 같이 한다.

1
2
3
a {
  text-decoration: none;
}

text-transform

텍스트의 소문자, 대문자를 지정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

text-spacing

text-indent

첫줄의 들여쓰기 너비를 지정하는 속성이다.

1
2
3
p {
  text-indent: 50px;
}

letter-spacing

글자 간격을 설정하는 속성이다.

1
2
3
4
5
6
7
h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

line-height

라인 사이의 공백을 설정하는데 사용된다.

1
2
3
4
5
6
7
p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

text-shadow

글자의 그림자를 설정하는 속성이다.

1
2
3
h1 {
  text-shadow: 2px 2px 5px red;
}

첫번째부터 가로길이, 세로길이, blur, 색상이다.

shadow

1
2
3
4
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

여러가지 그림자를 설정할 수도 있다.

font

🔥 font 선택은 매우 중요하다!

왜냐하면 폰트를 적절히 선택하면, 웹사이트 브랜드와 가독성에 큰 영향을 줄 수 있기 때문이다.

computer 화면에서는 sans-serif 폰트가 serif 폰트보다 더 가독성이 좋다.

font-family

font-family 속성의 이름이 한 단어 이상이면, 따옴표로 감싸줘야한다.

1
2
3
4
5
6
7
8
9
10
11
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

모든 브라우저와 장치에 범용적으로 설치된 웹 폰트가 있다. 하지만 100% 모든 곳에 지원하는 웹 폰트는 없기 때문에 fallback 폰트를 지정해줘야한다.

위 예시에서도 첫번째 폰트가 없으면 다음 폰트를 보여주는 방식으로 fallback 폰트를 지정해줬다.

주로 사용되는 웹 폰트는 다음 5가지이다.

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

font-style과 font-weight

font-style은 italic 텍스트를 사용할 때 설정한다.

1
2
3
4
5
6
7
8
9
10
11
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

font-weight 속성은 font의 두께를 설정한다.

1
2
3
4
5
6
7
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

font-size

폰트 사이즈를 설정하는 속성이다. 절대크기이거나 상대크기 일 수 있다.

❗️ 주의사항

폰트 사이즈를 사용하여 제목을 단락처럼 보이게 하거나 단락을 제목처럼 보이게하면 안된다. 제목은 h1 ~ h6, 단락은 p 태그와 같이 적절한 태그를 사용해야한다.

절대 크기

  • 정확한 크기를 설정한다.
  • 사용자가 글자 크기를 모든 브라우저에서 변경하는 것을 허락하지 않는다.(좋지 않는 접근성 이유 때문에)
  • 절대 크기는 결과물의 물리적인 크기가 알려져있을 때 유용하다.

상대 크기

  • 주변 요소의 상대적인 크기를 설정한다.
  • 브라우저에서 사용자가 글자 크기를 변경할 수 있도록 허락한다.

font-size를 em으로 설정하라.

브라우저 메뉴에서 사용자가 글자를 재설정하는 것을 허락하기위해 pixel 대신 em을 사용한다.

1em은 현재 폰트 크기와 동일하다. 브라우저에서 기본 폰트 사이즈는 16px이다. 즉, 1em = 16px

pixel / 16 = em 이라는 공식으로 계산할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

%와 em의 조합하여 사용하기

모든 브라우저에 작동하는 해결책은 body 태그의 기본 폰트 크기를 %로 설정하는 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Google fonts

만약 HTML에서 기본적으로 제공하는 폰트가 싫다면 Google font를 사용해라.

Google fonts 사용법

1
2
3
4
5
6
7
8
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia" />
  <style>
    body {
      font-family: "Sofia", sans-serif;
    }
  </style>
</head>

여러 폰트 사용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong"
  />
  <style>
    h1.a {
      font-family: "Audiowide", sans-serif;
    }
    h1.b {
      font-family: "Sofia", sans-serif;
    }
    h1.c {
      font-family: "Trirong", serif;
    }
  </style>
</head>

| 로 구분하여 사용할 수 있다.

font 효과 적용하기

구글 폰트는 기본적으로 font 효과를 제공한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Sofia&effect=fire"
  />
  <style>
    body {
      font-family: "Sofia", sans-serif;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1 class="font-effect-fire">Sofia on Fire</h1>
</body>

fonteffect

댓글 공유

  • page 1 of 1

loco9939

author.bio


author.job