소낙눈님 시작하기에 앞서 CIFT : 폰트 선택 시 고려하면 좋은 요소를 확인한 후 진행하세요.
#0 : 시작
트게더에 폰트를 적용하려면 로딩 단계와 적용 단계를 거쳐야 합니다.
예외가 있긴 하지만 기본적으로 두 단계 모두 이루어져야 폰트가 정상적으로 적용됩니다.
로딩 단계(=웹 폰트)에서는 사용할 폰트를 불러오며, 적용 단계에서는 폰트를 사용할 요소를 지정합니다.
|| cf. 로딩 단계가 필요한 이유 || 내가 사용하려는 폰트가 모든 기기에 설치되어 있는 게 아니기 때문입니다. 모자가 없는 사람에게 모자를 쓰라고 요청해도 쓸 수 없는 것과 마찬가지라고 보시면 됩니다. 이러한 문제를 해결하기 위해 그냥 기기에 폰트를 불러와버리는 방식을 사용합니다. 이를 '웹 폰트'라고 부르지만 여기서는 용어보다 단계가 중요하기 때문에 '로딩 과정'으로 부릅니다. |
#1 : 로딩 과정
눈누 웹 사이트에 접속한 뒤 사용하고 싶은 폰트를 찾아 클릭해 폰트 상세 정보 페이지로 진입합니다.
폰트 상세 정보 페이지의 중앙에 있는 '웹폰트로 사용' 부분의 복사 버튼을 클릭해 코드를 복사합니다.
이후 CSS 코드의 앞부분에 통째로 붙여넣으면 로딩이 끝납니다.
#1-1 : 로딩 구문 파악하기
이러한 폰트 로딩 구문은 크게 @font-face형과 @import형으로 나눌 수 있습니다.
| @font-face형 | @import형 |
@font-face { font-family: 폰트명; ··· } | @import url( ··· ); |
폰트를 적용하기 위해서는 이러한 폰트 로딩 구문에서 폰트의 정식 명칭(폰트명)을 확인해두어야 합니다.
#1-1-A : @font-face형
font-family 속성을 확인하세요. 속성의 값에 들어간 이름이 폰트의 정식 명칭(=폰트명)입니다.
물론 font-family 속성의 값을 변경하면 폰트명을 원하는 대로 바꿀 수 있지만 그냥 사용하는 것을 추천합니다.
#1-1-B : @import형
url( ··· ) 안에 있는 주소로 이동해보세요. @font-face로 시작하는 수많은 구문들을 확인할 수 있을 겁니다.
쫄지 마세요. 위에 설명한 @font-face { ··· } 형태의 구문을 여러 개 사용한 것과 똑같습니다.
위의 @font-face형에서 설명한 것과 동일하게 폰트명만 기억해 두세요.
대부분 각 @font-face 구문들 여러개가 font-family를 동일하게 사용할 겁니다.
본인이 직접 소스를 관리하는 게 아니라면 @import형의 경우 폰트명을 수정할 수 없다고 봐야 합니다.
#2 : 적용 과정
폰트는 트게더 전체에 적용할 수도 있고 일부 요소에만 적용할 수도 있습니다.
두 경우 모두 font-family 속성을 사용하며. 차이점은 단지 선택자가 다르다는 것 뿐입니다.
|| cf. font-family 속성 || 폰트를 적용하기 위해 사용하는 속성은 font-family입니다. 그런데 아까 선언 과정에서의 font-family는 불러온 폰트의 이름을 정해주는 역할을 했죠. @font-face에 결합된 경우와 일반 선택자에 결합된 경우가 각각 기능이 다르다고 생각하시면 편합니다. |
#2-1 : 적용 구문 파악하기
먼저 트게더 전체에 적용하는 두 가지 방법을 알아봅시다.
#2-1-A : body 상속형
body에 적용 후 상속을 받는 방법입니다.
body는 실제로 보이는 콘텐츠들이 들어가는 영역입니다.
즉 body 안에 있는 요소(=콘텐츠)들이 폰트 옵션을 상속받는다고 생각하면 됩니다. (폰트 관련 속성은 대부분 값을 상속받음)
아래의 구문으로 사용합니다.
body {
font-family: 폰트명;
}
#2-1-B : 전체 선택자형
전체 선택자(=Universal Selector)를 이용한 방법입니다.
전체 선택자는 모든 요소를 선택합니다.
즉 모든 요소를 선택해서(=일괄적으로) 폰트를 지정해줬다고 생각하면 됩니다.
아래의 구문으로 사용합니다.
* {
font-family: 폰트명;
}
|| cf. 상속형 vs 전체 선택자형 || 상속형 사용 시 일부 영역에서 폰트가 적용되지 않는 현상을 확인했습니다. 해당 문제에 대한 원인 파악 후 문서에 내용을 반영하겠습니다. 전체 선택자형을 사용하면 해당 문제가 발생하지 않으므로 전체 선택자형을 사용하시는 것을 권장합니다.
|
#2-2 : 부분 적용하기
이제 요소 일부분에만 폰트를 적용해 보겠습니다.
전술한 구문의 형태를 유지하되 선택자 부분만 원하는 요소의 선택자로 바꾸면 됩니다.
선택자 {
font-family: 폰트명;
}
형태로 말이죠.
#3 : 유의사항
이제 마지막으로 폰트 적용 시 알아두어야 할 점들을 짚어보겠습니다.
#3-1 : 정식 명칭 사용
적용 시 정식 명칭을 사용해야 합니다. 정식 명칭이 아니면 웹 페이지가 못 알아먹습니다.
정식 명칭은 전술하였듯 로딩 구문에서 알 수 있습니다.
@font-face {
font-family: 'NanumSquareRound';
···
}
에서 폰트명은 NanumSquareRound입니다. 그냥 나눔스퀘어라운드라고 쓰면 안 됩니다.
#3-2 : 따옴표 감싸기
폰트를 사용할 때 폰트명을 따옴표로 감싸야 할까요?
결론부터 말하면 그냥 따옴표를 사용해 폰트 이름을 감싸주시기 바랍니다.
body {
font-family: 'NanumSquareRound';
}
처럼 말입니다.
왜 '결론부터 말하면' 인지는 CIFT : 폰트 이름과 따옴표에서 따로 설명하겠습니다.
생각보다 긴 내용이라 여기서 다루기 힘듭니다.
#3-3 : 폰트 스택과 우선 순위
적용 구문의 font-family는 명색이 family인 만큼 폰트(=폰트명)를 여러 개 지정할 수 있습니다.
각각의 폰트는 콤마를 사용하여 구분합니다.
N {
font-family: 'A', 'B', 'C';
}
폰트가 여러 개 지정된 경우 앞에 있는 폰트를 우선으로 사용합니다.
#3-4 : 대체 옵션 (Generic Font)
앞에서 지정한 글꼴들을 모종의 이유로 사용할 수 없는 경우 사용할 폰트 스타일(=대체 옵션)입니다.
폰트명이 아니고 일종의 대체 스타일 값이기 때문에 따옴표로 묶으면 안 됩니다.
이러한 대체 옵션은 여러 개 존재하지만 가장 무난하게 자주 쓰이는 건 sans-serif 입니다.
N {
font-family: 'A', 'B', sans-serif;
}
와 같이 font-family의 값 맨 뒷부분에 따옴표 감싸기 없이 sans-serif를 덤처럼 붙여준다는 느낌으로 사용해주면 됩니다.
우리는 폰트를 로딩하여 사용하기 때문에 크게 중요한 것은 아니지만 그래도 덧붙여 주시는 것을 권장합니다.
댓글 0개 ▼