CSS:텍스트
틀:CSS. css에 대한 문서들을 담아두기 위한 틀.
개요[편집 | 원본 편집]
주어진 폰트 하나만 사용하는 게 아니라, 다양한 폰트를 사용해야 하거나 자신의 웹페이지에 맞는 폰트를 찾아야 할 때가 있다.
기본적으로 웹페이지는 문서형태이기 때문에 폰트의 중요성이 빠질 수 없다.
폰트 적용[편집 | 원본 편집]
일반적으로 html에서 폰트의 경로를 불러오고, <style>태그 안에서 글꼴을 지정한다.
<link href="폰트주소" rel="stylesheet">
<style>
선택자{font-family: 폰트명;}
</style>
static 안에 폰트파일을 넣고, head 안에서 폰트를 불러온다.
<style>
@font-face {
font-family: '폰트명';
src: local('폰트명'),
url("{% static '폰트파일경로' %}") format("opentype");
}
</style>
적용법[편집 | 원본 편집]
기본폰트로 적용[편집 | 원본 편집]
base.html 의 body 태그를 다음과 같이 수정하면 기본폰트를 지정할 수 있다.
<body style="font-family: '폰트명';">
| 의도 | 설명 | 코드 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 글씨 크기 조절 | 폰트사이즈 속성을 지정한다. | font-size: 10px; | ||||||||||||
| 글씨 굵기 조절 | 폰트의 굵기를 조절한다.
|
font-weight: 100; | ||||||||||||
| 위치조절 | 세로 위치를 맞춰준다. | text-align: center; |
구글 폰트[편집 | 원본 편집]
구글 폰트에서 무료 폰트들을 다운받을 수 있다. https://fonts.google.com/ 에서 다양한 폰트들을 지원한다.
해당 폰트를 선택하면 HTML 안에서 불러오기 위해 <head>에 넣을 코드를 제공하고, CSS 사용도 그냥 복사, 붙여넣기로 적용할 수 있다.
<div style='font-family: 'Noto Sans KR', sans-serif;'> 형태로 style 안에 구글에서 제공하는 CSS를 그대로 붙여넣으면 간단하게 적용된다.