CSS:텍스트: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
(새 문서: {{CSS}} 구글 폰트에서 무료 폰트들을 다운받을 수 있다. <br /> === 폰트 적용 === 일반적으로 html에서 폰트의 경로를 불러오고, <style>태그 안...) |
편집 요약 없음 |
||
| (다른 사용자 한 명의 중간 판 4개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{CSS}} | {{CSS}} | ||
==개요== | |||
주어진 폰트 하나만 사용하는 게 아니라, 다양한 폰트를 사용해야 하거나 자신의 웹페이지에 맞는 폰트를 찾아야 할 때가 있다. | |||
기본적으로 웹페이지는 문서형태이기 때문에 폰트의 중요성이 빠질 수 없다. | |||
<br /> | <br /> | ||
=== 폰트 적용 === | ===폰트 적용=== | ||
일반적으로 html에서 폰트의 경로를 불러오고, <style>태그 안에서 글꼴을 지정한다.<syntaxhighlight lang="html"> | 일반적으로 html에서 폰트의 경로를 불러오고, <style>태그 안에서 글꼴을 지정한다.<syntaxhighlight lang="html"> | ||
<link href="폰트주소" rel="stylesheet"> | <link href="폰트주소" rel="stylesheet"> | ||
| 11번째 줄: | 16번째 줄: | ||
선택자{font-family: 폰트명;} | 선택자{font-family: 폰트명;} | ||
</style> | </style> | ||
</syntaxhighlight>static 안에 폰트파일을 넣고, head 안에서 폰트를 불러온다.<syntaxhighlight lang="python"> | |||
<style> | |||
@font-face { | |||
font-family: '폰트명'; | |||
src: local('폰트명'), | |||
url("{% static '폰트파일경로' %}") format("opentype"); | |||
} | |||
</style> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
===적용법=== | |||
====기본폰트로 적용==== | |||
base.html 의 body 태그를 다음과 같이 수정하면 기본폰트를 지정할 수 있다.<syntaxhighlight lang="python"> | |||
<body style="font-family: '폰트명';"> | |||
</syntaxhighlight> | |||
{| class="wikitable" | |||
|+ | |||
!의도 | |||
!설명 | |||
!코드 | |||
|- | |||
|글씨 크기 조절 | |||
|폰트사이즈 속성을 지정한다. | |||
|font-size: 10px; | |||
|- | |||
|글씨 굵기 조절 | |||
|폰트의 굵기를 조절한다. | |||
{| class="wikitable" | |||
!옵션 | |||
!설명 | |||
|- | |||
|숫자 | |||
|100부터 900까지 100단위의 숫자 값 9가지. | |||
|- | |||
|normal | |||
|400;과 동일. 기본값. | |||
|- | |||
|bold | |||
|700;과 동일. | |||
|- | |||
|border | |||
|부모(상위) 요소보다 더 두껍게 | |||
|- | |||
|lighter | |||
|부모(상위) 요소보다 더 얇게. | |||
|}<br /> | |||
|font-weight: 100; | |||
|- | |||
|위치조절 | |||
|세로 위치를 맞춰준다. | |||
|text-align: center; | |||
|} | |||
==구글 폰트== | |||
구글 폰트에서 무료 폰트들을 다운받을 수 있다. https://fonts.google.com/ 에서 다양한 폰트들을 지원한다. | |||
해당 폰트를 선택하면 HTML 안에서 불러오기 위해 <head>에 넣을 코드를 제공하고, CSS 사용도 그냥 복사, 붙여넣기로 적용할 수 있다. | |||
<nowiki><div style='font-family: 'Noto Sans KR', sans-serif;'> 형태로 style 안에 구글에서 제공하는 CSS를 그대로 붙여넣으면 간단하게 적용된다.</nowiki> | |||
2021년 6월 8일 (화) 13:54 기준 최신판
틀: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를 그대로 붙여넣으면 간단하게 적용된다.