1. HTML&CSS의 기초 (6) 폰트, 텍스트_1
1. 타이포그래피(typography)
이름 | 설명 |
---|---|
em | 폰트의 전체 높이 |
ex ( = x-height ) | 해당 폰트의 영문 소문자 x의 높이 |
Baseline | 소문자 x를 기준으로 하단의 라인 |
Descender | 소문자에서 baseline 아래로 쳐지는 영역 |
Ascender | 소문자 x의 상단 라인 위로 넘어가는 영역 |
2. font-family
- font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한다.
글꼴을 지정
/* 사용법 */
font-family: family-name | generic-family ( | initial | inherit );
- family-name : 사용할 폰트의 이름
- generic-family : family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 한다.
serif는 글자 획에 삐침이 있는 폰트
로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트
로 대표적으로 돋움체가 있다.
/* 사용 예시 */
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;
마지막에는 반드시 generic-family를 선언 해주어야 한다. -> 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다.
글꼴을 지정
/* 사용법 */
font-family: family-name | generic-family ( | initial | inherit );
serif는 글자 획에 삐침이 있는 폰트
로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트
로 대표적으로 돋움체가 있다.
/* 사용 예시 */
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;
마지막에는 반드시 generic-family를 선언 해주어야 한다. -> 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다.
3. line-height
- 장문의 글에서는 가독성을 위해서
행간을 조정
한다.
- 숫자만 입력가능!
line-height: normal | number | length | initial | inherit ;
줄간격이 아니라 em 박스 + 상하단의 여백
까지를 의미한다!
※ 주의할 점
행간을 조정
한다.line-height: normal | number | length | initial | inherit ;
줄간격이 아니라 em 박스 + 상하단의 여백
까지를 의미한다!
line-height의 값으로 1. number
를 선언할 때와 2. %
로 선언할 때의 차이를 알아야 한다.
number | % |
---|---|
부모 요소의 숫자 값이 그대로 상속 | %에 의해 이미 계산된 px값이 상속 |
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 20px; */
body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 40px; */
Author And Source
이 문제에 관하여(1. HTML&CSS의 기초 (6) 폰트, 텍스트_1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imyourgenie/1.-HTMLCSS의-기초-6-폰트-텍스트1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)