[CSS] 폰트에 관하여, 폰트 적용법
안녕하세요, 초짜입니다.
이번 포스팅에는 폰트에 관한 글을 쓸까 합니다.
기본적인 폰트가 있는데 굳이 외부에서 가져와서 폰트를 사용하는 이유는 간단합니다.
보기 예쁘기 때문이죠.
웹 페이지를 더 예쁘게 하기 위해서는 어떤 방법을 써야 하는지 알아보도록 하겠습니다.
웹에서 폰트를 가져오거나 로컬로 다운로드 후 사용하는 방법을 각각 알아보겠습니다.
0. font-familly
우선 font-familly가 뭔지 알아야 합니다.
font-familly는 CSS에서 글꼴을 설정하는 속성입니다.
body {font-familly:"궁서체";}
이런 식으로 사용할 수 있습니다. 이렇게 사용한다면 결과는 body 태그 안에 있는 글의 폰트가 궁서체가 되는 것입니다.
font-familly 속성에서 쉼표(,)를 쓸 수 있습니다.
이럴 경우에 앞에 있는 폰트 적용이 실패할 경우 뒤의 폰트가 적용된다는 의미입니다.
body {font-familly: "궁서체" , "Arial", "sans-serif";}
이런 식으로 사용한다면 궁서체를 먼저 적용해본 후 적용에 실패하거나 궁서체 폰트가 없을 경우에 Arial 폰트를 적용합니다.
그런데 만약에 Arial 폰트 적용도 실패할 경우에는 sans-serif 폰트를 적용한다는 의미입니다.
그래서 마지막 부분에 있는 폰트는 가장 기본적인 폰트로 두는 것이 좋겠습니다.
1. link 태그로 사용하기
HTML의 link 태그로 사용하는 방법입니다.
먼저 자신이 사용할 폰트의 URL을 복사한 후, <head>~</head> 태그 사이에
<link href="주소" rel="stylesheet">
이런 식으로 넣어주시면 됩니다.
rel="stylesheet" 이 부분은 스타일시트로 연결할 때 쓰는 부분입니다.
그 후에 CSS로
body {font-familly: "폰트";}
이런 식으로 적용해주시면 됩니다.
로컬일 경우에는 URL 대신에 경로를 넣어주시면 됩니다.
2. @import로 적용하기
CSS의 import로 사용하는 방법입니다.
HTML의 style 태그 안에서도 정상 작동합니다.
@import url('주소');
이런 식으로 @import를 사용한 후에 CSS에서 위와 같이 font-familly를 사용하면 폰트가 적용됩니다.
로컬일 경우에는 URL 대신에 주소를 넣어주시면 됩니다.
저같은 경우는 이 방법을 많이 사용합니다.
이렇게 대표적인 두 가지 방법을 알아봤습니다.
이번 포스팅은 여기까지입니다, 감사합니다.
초짜, HTML, CSS, CSS3, font-familly, 폰트, 글꼴, 폰트적용, font, import, link, stylesheet, design