목차
- <link>
1-1. 외부 스타일시트
1-2. 웹 폰트 추가 - CSS 단위 구성
2-1. 상대 크기
2-2. 절대 크기
1. <link>
1-1. 외부 스타일시트
❗ 앞서 개발을 완료한 시점에는 반드시 '외부 스타일시트'로 분리해야 함을 강조해왔다: [CSS3] 스타일 | 스타일시트 | CSS 개요
<!-- HTML -->
<head>
<link href="../resources/css/font.css" rel="stylesheet" type="text/css">
<link href="../resources/css/textstyle.css" rel="stylesheet" type="text/css">
<link href="../resources/css/paragraph.css" rel="stylesheet" type="text/css">
<link href="../resources/css/liststyle.css" rel="stylesheet" type="text/css">
</head>- .html의 <head> 태그 안에서 별도 저장한 .css 파일을 불러와 활용하는 것이 외부 스타일시트이다.
- 예시에서처럼 <link> 통해 연결한다: <link href="CSS 파일 경로" rel="stylesheet" type="text/css">
1-2. 웹 폰트 추가
❗ 구글 웹 폰트 사이트 : https://fonts.google.com/
- <link> 통해 웹 폰트 추가 역시 가능하다. 사이트서 제공하는 링크와 정보를 활용한다.
<!-- HTML -->
<head>
<link href="https://fonts.googleapis.com/css2?family=Festive&family=Syne+Tactile&display=swap" rel="stylesheet">
</head>
<body>
<p id="web-font">font style test</p>
</body>
#web-font { font-family : "Festive", cursive; }- 웹폰트추가①. 사이트에서 제공하는 <link> 태그 그대로 가져와 .html 문서의 <head>에 작성한다.
- 웹폰트추가②. .css 파일에 선택자 { font-family : 폰트이름; } 형식에 맞춰 스타일을 반영한다.
- font-family 속성은 { "폰트이름A", "폰트이름B", "폰트이름C"... } 연달아 작성할 수 있다. 사용 환경에 따라 A 폰트가 읽히지 못하면 그 다음 폰트를, 그조차 어려우면 뒤이은 폰트를 대신 쓰겠다는 양식이다.
2. CSS 단위 구성
❗ 보다 자세한 내용은 MDN Web Docs 참고 : 'CSS 단위와 값(CSS Values and Units)'
2-1. 상대 크기
em
- 배수를 의미하며, 부모 요소의 폰트 크기를 비교 대상 기준으로 삼는다.
- 해당 폰트의 대문자 M 너비를 기준으로 비교한다.
- 1.5em = 1.5배 = 150%와 같다.
rem
- 최상위 부모 요소의 크기를 기준으로 한 배수를 말한다.
%
- 기본 글꼴 크기에 대하여 상대적인 값을 가진다.
2-2. 절대 크기
px
- 기본 크기 규격이 지정돼 있는 픽셀(pixels)을 일컫는다.
- 모니터와 같은 표시 장치 해상도 따라 실제 크기는 다르게 보일 수 있으나, 각 픽셀에 대해 기본적으로 부여되는 규격이 정해져 있음은 분명하다.
pt
- 포인트(points)는 기본 지정된 크기를 갖는다.
- 1 포인트 = 1/72 인치이다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS3] 색상 및 배경 스타일 | 이미지 | background (0) | 2022.02.11 |
|---|---|
| [CSS3] 목록 스타일 | 불릿 기호 변경/삭제 | list-style (0) | 2022.02.11 |
| [CSS3] 텍스트 스타일 | 문단 스타일 | font | text (0) | 2022.02.11 |
| [CSS3] 선택자 | 선택자 우선순위 | 태그 | 아이디 | 클래스 (0) | 2022.02.10 |
| [CSS3] 스타일 | 스타일시트 | CSS 개요 (0) | 2022.02.10 |
