[HTML+CSS][텍스트 관련 스타일] 01

[HTML+CSS][CSS 기초] 03 - 캐스케이딩 스타일 시트 (CSS)

[HTML+CSS][CSS 기초] 02 - 주요 선택자 [HTML+CSS][CSS 기초] 01 - 스타일과 스타일 시트 [HTML+CSS][폼 관련 태그들] 05 - 다양한 폼 요소들 [HTML+CSS][폼 관련 태그들] 04 - 여러 데이터 나열해 보여주기 태그..

onelight-stay.tistory.com

글꼴 관련 속성에 대해서 알아보자.

font-family 속성 : 글꼴 지정

텍스트 문단의 글꼴을 '굴림'으로 설정하고 싶을 때

기본형에 맞춰서 입력해 주면 된다.

만약에 원하는 글꼴이 없을 경우에는 원래라면 브라우저 기본값으로 글꼴이 설정되는데,

이를 대비해 첫 번째 글꼴이 없을 경우 두 번째와 세 번째 글꼴을 지정해 줄 수 있다.

또한, font-family 속성은 상속되기 때문에

<body> 태그 스타일에 한번 정의할 경우 문서 전체에 적용이 되고

문서 안의 모든 자식 요소에 계속 같은 글꼴이 설정된다.

@font-face : 웹 폰트 사용

웹폰트란 웹 문서를 작성할 때 문서 안에 글꼴 정보도 함께 저장했다가

사용자가 웹 문서에 접속하면 글꼴을 시스템으로 다운로드시키는 방식으로,

사용자 시스템에 없는 글꼴을 다른 글꼴로 대처하는 것이 아닌

원하는 글꼴을 그대로 보여주고 싶을 때 사용한다.

- 구글 웹 폰트 사용하기 -

(1) 해당 링크를 클릭해 접속해 준다.

https://fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

(2) 원하는 글꼴을 입력해 준 뒤에 클릭해 준다.

(3) 순서대로 클릭해 준 뒤에 해당 코드들을 복사해 준다.

(이때, 밑에 있는 글꼴의 이름을 잘 기억해 둔다.)

(4) 복사한 코드 앞에 '@import url()'을 입력한 후 붙여 넣기 해준 뒤에

글꼴 관련 클래스를 작성할 때 기억해둔 글꼴의 이름을 입력해 주면 된다.

- 직접 웹 폰드 업로드한 후 웹 폰트 적용하기 -

기존에 사용하는 '*tff' 확장자 경우 파일의 크기로 인해

'*.eot'나 '*.woff'로 변환시켜 업로드 후에 사용할 수 있다.

폰트의 경로와 폰트의 확장자를 알려준 뒤에 사용하면 된다.

font-size 속성 : 글꼴 크기 조절

픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있으며

백분율을 이용해 사용할 수도 있다.

font-family 속성에서 <크기> 속성에서 사용하는 단위 값이다.

- px -

폰트 크기를 사용할 때 많이 사용하는 단위이지만

폰트 크기가 고정되기 때문에 창 크기가 작은 모바일 기기로 볼 때도

같은 크기로 화면에 표시되어 불편함이 있다.

- em -

부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고

상대적 값을 계산해 다른 요소들의 글자크기를 조절한다.

font-weight 속성 : 글자 굵기 지정

font-variant 속성 : 작은 대문자 표시

대문자를 소문자의 크기에 맞추어 작게 표시해 준다.

font-style 속성 : 폰트 스타일 지정

글자를 이탤릭체로 표현할지 여부를 결정한다.

font 속성 : 글꼴 속성을 한꺼번에 묶어 표현

font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을

한꺼번에 묶어 약식으로 표현해 준다.

line-height 같은 경우 줄 간격을 조정하는 속성인데 font-size와 함께 슬래시(/)로 표현한다.

또한 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표시할 수도 있다.

글꼴에 관련된 스타일이 굉장히 다양한 것 같다.

하지만 효과를 넣어줌으로써 글씨가 굉장히 명확해 보인다.

자주자주 사용해 익히도록 한다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][텍스트 관련 스타일] 03 - 문단 스타일 (0)	2020.06.27
[HTML+CSS][텍스트 관련 스타일] 02 - 텍스트 스타일 (0)	2020.06.26
[HTML+CSS][CSS 기초] 03 - 캐스케이딩 스타일 시트 (CSS) (0)	2020.06.24
[HTML+CSS][CSS 기초] 02 - 주요 선택자 (0)	2020.06.23
[HTML+CSS][CSS 기초] 01 - 스타일과 스타일 시트 (0)	2020.06.22

IT Information Notebook

[HTML+CSS][텍스트 관련 스타일] 01 - 글꼴 관련 스타일

font-family 속성 : 글꼴 지정