CSS:텍스트 편집하기

{{CSS}}


==개요==
주어진 폰트 하나만 사용하는 게 아니라, 다양한 폰트를 사용해야 하거나 자신의 웹페이지에 맞는 폰트를 찾아야 할 때가 있다.

기본적으로 웹페이지는 문서형태이기 때문에 폰트의 중요성이 빠질 수 없다.


<br />

===폰트 적용===
일반적으로 html에서 폰트의 경로를 불러오고, <style>태그 안에서 글꼴을 지정한다.<syntaxhighlight lang="html">
<link href="폰트주소" rel="stylesheet">
    <style>
        선택자{font-family: 폰트명;}
    </style>
</syntaxhighlight>static 안에 폰트파일을 넣고, head 안에서 폰트를 불러온다.<syntaxhighlight lang="python">
<style>
    @font-face {
            font-family: '폰트명';
            src: local('폰트명'),
            url("{% static '폰트파일경로' %}") format("opentype");
    }
    
</style>

</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>