티스토리 뷰
안녕하세요 동기 여러분! 오늘은 HTML에 CSS로 폰트를 적용하는 방법에 대해 알아봅시다!
font-family
아래는 CSS 코드입니다.
h1 {
font-size: 32px;
font-family: "Comic Sans MS", "서울남산 장체EB", serif;
}Selector로 h1을 정해 놓고 중괄호 안에 font-family: "Comic Sans MS", "서울남산 장체EB", serif;가 오늘 알아볼 부분입니다.
제가 위 코드에 글꼴을 무려 3개나 적어 놓았는데 이유는 혹시 몰라서 입니다.
이게 무슨 소리인가? (누가 기침 소리를 내었어? 금부장은 무얼하는가? 어서 저놈의 ...)
- "Comic Sans MS"를 적어 놓은 이유는 영어 철자의 글꼴을 바꾸어 주기 위함
- "서울산 장체 EB"를 적어 놓은 이유는 한글의 글꼴을 바꾸어 주기 위함
- serif를 적어 놓은 이유는 사용자의 브라우저가 첫 번째와 두 번째의 글꼴을 지원하지 않는 경우를 대비한 백업 플랜입니다.
본인이 사용하고 싶은 글꼴이 영어와 한글 모두 지원하는 글꼴이라면 다음과 같이 적어도 됩니다.
h1 {
font-size: 32px;
font-family: "서울남산 장체EB", serif;
}
적용
<!DOCTYPE html>
<html>
<head>
<title>덩기덕 쿵더러러</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<h1>LET'S GET IT BRO! 덩기덕 쿵더러러 동기코딩딩딩</h1>
</body>
</html>이 HTML 코드를 CSS 없이 실행시켜보면
h1 {
font-size: 32px;
font-family: "Comic Sans MS", "서울남산 장체EB", serif;
}이 CSS 코드를 적용시켜 실행해보면
"Comic Sans MS"라는 영어 철자 글꼴을 빼고 실행시켜보면
어때요? 정말 쉽죠? 캬캬캬
오늘의 느낌
맥 프로 갖고 싶다...
'HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] CSS Class Selectors (0) | 2021.12.06 |
|---|---|
| [HTML & CSS] color (0) | 2021.12.06 |
| [HTML & CSS] Anatomy of a CSS Rule (0) | 2021.12.05 |
| [HTML & CSS] Link to a Stylesheet (0) | 2021.12.04 |
| [HTML & CSS] List & Div & Metadata (0) | 2021.12.03 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 동기코딩
- css position
- 자바스크립트
- Margin
- 메서드
- 반복문
- method
- 타입 좁히기
- javascript
- function
- 함수
- HTML 기본
- if문
- CSS 포지션
- Python
- Type
- CSS
- em
- html table
- Array
- Typescript
- for문
- html
- 객체
- 실수
- 파이썬
- padding
- 타입스크립트
- Object
- 프로그래머스
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
글 보관함