-
CSS 입문 (4) 폰트, 텍스트Frontend/CSS 2023. 7. 26. 23:36
1) typography
- Baseline: 소문자 ‘x’의 하단 라인 (소문자 ‘x’가 기준)
- ex: 소문자 ‘x’의 높이 (소문자 ‘x’가 기준)
- Descender: Baseline 아래로 넘어가는 영역 . ex) xgypqjx … 에서 x뒤에 나오는 문자들의 꼬리가 위치하는 영역
- Ascender: ex 위로 넘어가는 영역. ex) xTbAldkiJhx ….. 에서 x뒤에 나온 문자들의 상단이 위치하는 영역
- em: 폰트의 전체 높이.
2) font-family
글꼴을 결정하는 속성. font-family: family-name, generic-family
-
- 이름 중간에 공백이 있거나 한글명일 때에는 작은따옴표(’) 로 묶어서 선언.
- 한글 글꼴을 지정할 때에는 반드시 영문으로된 글꼴명도 같이 선언해줄 것.
- ex) font-family: Dotum, ‘돋움’, sans serif;
- serif: 삐침이 있는 기본 글꼴. sefit라는 단어 자체가 삐침이라는 의미를 가짐.
- sans serif: 삐침이 없는 기본 글꼴. 프랑스어로 without과 동일한 의미.family-name: 글꼴명. 쉼표(,) 를 이용하여 1개 이상 선언할 수 있고 앞순서부터 우선순위가 높다.
- generic-family: 글꼴명을 값으로 가지며, font-family 마지막에 오는 값이 generic-family가 된다. 앞에 나열된 family-name 글꼴이 모두 지원되지 않을 때 적절한 대체되어 사용되는 글꼴. 항상(상속받은 family-name이 있다고 하더라도) 반드시 사용해줄 것.
3) line-height
줄의 높이를 의미하는 속성. 행간을 조절할 때 사용.
font-size + 위, 아래 여백(=[em 박스] + [상하단의 여백])을 포함한 높이
line-height로 제어되는 부분을 line-box라고 한다. 모든 텍스트는 line box를 갖는다.
값
- normal : Default 값. 브라우저마다 조금씩 다르지만 기본적으로 폰트 크기 대비 1.2
- length: px, pt 처럼 높이를 고정값으로 지정. font-size가 커져도 여백은 그대로일 때.
- percent: 상속 받은 font-size 대비 계산. 상속 시 부모 요소 기준으로 계산된 line-height의 px 값이 상속됨.
- number: 단위 없이 숫자만 적음. 현재 font-size 기준으로 설정한 숫자만큼 배율 계산. 상속 시 number 값 자체가 상속됨. 자식요소에서 상속된 line-height 의 number 값을 가지고 재계산.
- percent와 number의 차이
<!-- <body>의 자식요소로 <p>가 있을 때--> body{font-size: 20px; line-height: 2;} p{font-size: 10px;} /* 실제 적용되는 line-height: 20px */ body{font-size: 20px; line-height: 200%;} p{font-size: 10px;} /* 실제 적용되는 line-height: 40px */
4) font-size
값
- Keyword로 지정 : absolute-size / relative-size(부모 요소 글자 크기 대비), 기본 값은 medium. 브라우저에 따라 지정된 Keyword 별 크기가 다를 수 있으므로 실무에서는 잘 사용하지 않음.
- length: px, pt, em 등 고정 값 사용.
- em: 부모 요소의 font-size에 em 값을 곲한 크기.
- rem: 루트의 font-size에 rem 값을 곱한 크기
- percent: %. 글자 크기에서는 em과 동일한 동작을 보임.
- viewport: vw, vh 단위 사용. 뷰표트 기준(?, 강의에서는 설명 X), 유동적인 font-size를 만들 때 사용. 반응형 Web 을 만들 때 사용되는 것 같음.
- font-size가 지정되지 않을 경우 기본적으로 글자 크기는 16px(=1em) 이다.
5) font-weight
글꼴의 굵기를 지정하는 속성
- 값
- Keyword: normal(Default), bold, bolder, lighter, initial, inherit… - bolder와 lighter는 부모 요소에 의존적이므로 실무에서는 잘 사용하지 않음
- number: 100 ~ 900 (100 단위). 기본적으로 400이 normal. normal과 bold만 지원한는 글꼴은 100 ~ 500 이 normal 그 이상은 bold로 인식함.
- 특정 symetic Tag들은 기본적으로 font-weitht 속성을 갖고 있는 경우도 있음. ex) <strong></strong>, 강조의 의미는 주고싶지만 굵기는 바꾸고 싶을 때 font-weight을 별도로 선언하면 됨.
6) font-style
글꼴 스타일 지정
- 값: normal, italic (여기까지 가장 많이 사용), oblique-각도를 세밀하게 조절하여 기울일 수 있음.
- initial / inherit
7) font-variant
글꼴 변환. 값이 small-caps일 때 소문자를 작은 대문자 형태로 표현하는 기능
- normal: 기본 값
- small-caps: 소문자를 작은 대문자로 변환.
8) font
font와 관련된 속성들을 축약형으로 사용할 수 있는 속성. 그러나 선언 순서나 반드시 사용되어야 하는 필수 속성(font-size, font-family) 등의 제약이 있어 실무에서는 사용 지양함.
font: font-style font-variant font-weight font-size/line-height font-family|……
9) 웹 폰트 (@font-face)
- 시스템 폰트: font-family로 선언한 글꼴이 사용되는 폰트(기기에서 해당 폰트를 지원할 때)
- 이미지 폰트: 이미지로 표현하는 글꼴. 실제로는 이미지임.
- 웹폰트: 서버에 저장했다가 제공하거나 웹 경로를 import시켜 사용하는 폰트. 폰트 파일 자체를 웹에서 제공하는 것이 특징. → 사용자 지정 font를 사용하려면 src 속성으로 경로를 제공하는 것이 필수임.
@font-face{ font-familyL: webTmpfont; /*자체제작 폰트*/ src: url(~); /*필요에 따라 속성 추가*/ } body{ font-family: webTmpfont; }- 설치형폰트: 사용 시 사용자의 로컬 한경에 글꼴을 다운로드 받아 적용하는 폰트. ex) 나눔고딕. 웹폰트와 유사. 명확한 차이점은 아직 모르겠음.
'Frontend > CSS' 카테고리의 다른 글
CSS 입문 (6) 미디어쿼리 (0) 2023.07.30 CSS 입문 (5) 레이아웃 (1) 2023.07.29 CSS 입문 (3) 단위, 배경, 박스모델 (0) 2023.07.20 CSS 입문 (2) 가상 선택자 ~ Cascading (0) 2023.07.15 CSS 입문 (1) 기본 문법 ~ 선택자 (1) 2023.07.14