HTML5+CSS3]6-1 글꼴 관련 스타일
https://www.youtube.com/user/easyspub
easyspub
'사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메
www.youtube.com
⭐글꼴 관련 CSS규약은 www.w3.org/TR/css-fonts-3 에서 볼 수 있다
✔font-family 속성 : 글꼴 지정하기
👉기본형 : font-family:<글꼴 이름>[,<글꼴 이름>, <글꼴 이름>]
👉웹 문서에서 사용할 글꼴은 <body>태그를 비롯해 <p> 태그나 <hn>태그처럼 텍스트를 사용하는 요소들에서 주로 사용한다
👉윈도우7 이상의 사용자라면 " 맑은 고딕"글꼴이 설치되어 있으므로 제작자가 처음 의도한 모습으로 텍스트가 표시되지만,
글꼴이 설치되어 있지 않은 시스템인 경우, 브라우저 기본 값이 나타나 각각 다른 글꼴로 표시된다.
웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정해야 한다.
두 개 이상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 쉼표(,)로 구분한다
👉font-family 속성은 상속되기 때문에 <body>태그 스타일에서 일단 한번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용된다.
그 글꼴이 아닌 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴을 정의 하면 된다.
✔@font-tace 속성 : 웹 폰트 사용하기
👉웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식이다
👉사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드한 후 표시하기 때문에 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다.
👉구글 웹 폰트 사용하기
- https://fonts.google.com/ 접속
- 사용하고 싶은 스타일 오른쪽의 [Select this style]을 클릭
- 웹 폰트에 대한 정보를 확인후 [Embed]를 클릭
- [@import]탭 클릭후 @import로 시작하는 소스를 복사
- 복사한 소스를 웹 문서의 <style> 태그에 붙여 넣기
👉구글 웹 폰트 사용하기
- https://fonts.google.com/ 접속
- 한글 폰트 검색
- Link 항목에 있는 소스 복사 & 글꼴 이름 기억
- 웹 문서의 <style>태그 안에 붙여 넣음
- font-family 속성에서 웹 폰트 글꼴 이름 사용
👉직접 웹 폰트 업로드해 사용하기
사이트에서 제공하지 않는 폰트이거나 자신이 가지고 있는 ttf폰트를 변환해서 사용한다
컴퓨터에서 사용하는 글꼴은 트루타입 유형이고 파일확장자는 *.ttf이다.
웹에서 사용할 수 있는 폰트는 woff(*.woff)와 트루타입(*.ttf, *.otf), 임베디드 오픈타입(*.eot), svg폰트(*.svg, *.svgz)이다.
Transfonter에서 한글 폰트까지 변환할 수 있다.
글꼴 저작권에 주의해야한다.
👉직접 웹 폰트 업로드해 사용하기
- 웹 폰트 파일 준비
- eot 파일, woff 파일
- 기존 ttf 파일을 변환해서 사용할 수도 있음
- 다운로드 하기 전에 사용자 시스템에 있는지 확인
- local(글꼴이름)
- IE8이하 버전을 위해 eot 파일 먼저 선언
- woff 파일 선언
- 용량이 큰 ttf 파일을 마지막에 선언
✔웹 폰트 적용하기
👉기본형
@font-face {
font-family : 글꼴 이름;
src:url(글꼴 파일 경로) format(파일 유형);
}
✔font-size 속성 : 글자 크기 조절하기
👉기본형 : font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
👉font-size속성에서 사용하는 속성 값
👉<크기>값을 직접 지정할 때 사용하는 단위
👉px단위 사용하기
px단위를 사용하면 폰트 크기가 고정된다.
작은 모바일 기기로 볼때도 같은 크기로 화면에 표시된다.
크기를 따로 지정하지 않으면 텍스트 문단의 크기는 16px로 표시된다
👉em단위 사용하기
사용하는 글꼴의 대문자 M을 기준으로 한다.
대문자 Mㅣ 너비를 1cm으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절한다
✔font-weight 속성 : 글자 굵기 지정하기
👉기본형
font-weight : normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
✔font-variant 속성 : 작은 대문자로 표시하기
👉기본형 : font-variant : normal | small-caps
👉대문자를 소문자 크기에 맞추어 작게 표시한다.
✔font-style 속성 : 글자 스타일 지정하기
👉기본형 :font-style: normal | italic | oblique
👉글자를 이탤릭체로 표시한다.
✔font 속성 : 글꼴 속성을 꺼번에 묶어 표현하기
👉기본형
font: <font-style><font-variant><font-wight><fodnt-size/line-height><font-family>
| caption | icon | menu | message-box | small-caption | status-bar
속성들을 한꺼번에 묶어 약식으로 표현할 수 있다
👉line-height는 줄 간격을 조절하는 속성인데 font 속성은 아니지만 글자 크기와 줄간격이 밀접한 관련이 있으므로 font-size/line-height처럼 하나의 속성처럼 사용하기도 한다
'Do it! HTML5+CSS3 웹 표준의 정석 > 노트필기' 카테고리의 다른 글
| HTML5+CSS3]6-3 문단 스타일 (0) | 2021.08.13 |
|---|---|
| HTML5+CSS3]6-2 텍스트 스타일 (0) | 2021.08.09 |
| HTML5+CSS3]5-4 CSS3와 CSS 모듈 (0) | 2021.07.24 |
| HTML5+CSS3]5-3 캐스케이딩 스타일 시트(CSS) (0) | 2021.07.24 |
| HTML5+CSS3]5-2 주요 선택자 (0) | 2021.07.24 |
