1. HTML&CSS의 기초 (6) 폰트, 텍스트_1

4732 단어 CSS웹UIhtmlCSS

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를 선언 해주어야 한다. -> 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다.




3. line-height

  • 장문의 글에서는 가독성을 위해서 행간을 조정한다.
  • 숫자만 입력가능!
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; */

좋은 웹페이지 즐겨찾기