[부스트코스] 6-1 CSS 폰트, 텍스트

6. 폰트, 텍스트

1) 속성-typography

• em: 폰트 전체 높이
• ex(=x-height): 해당 폰트의 영문 소문자 x의 높이
• Baseline: 소문자 x를 기준으로 하단의 라인을 의미
• Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미 (g, j, p, q, y)
• Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역 (b, d, h, l)

 

 

 

2) 속성-font-family (글꼴)

font-family: family-name|generic-family|initial|ingerit;

/* 맨 마지막 선언은 generic-family */
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

• family-name과 generic-family로 구성
• family-name은 지정순서로 폰트의 우선순위의 결정(한글 지원 여부)
• generic-family는 family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 시 적절한 폰트를 선택할 수 있도록 함

 

 

 

3) 속성-line-height

line-height: 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용

기본값: normal

line-height: normal | number | length | initail | inherit

line-height: normal;
line-height: 2; /* 숫자만 입력 가능하다 */
line-hight: 20px;
line-height: 200%;

https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_line-height

 

 

 

4) 속성-font-size

font-size: medium | xx-small | x-small | small | large | x-large | xx-
large | smaller | larger | length | initial | inherit;

/* <absolute-size> values - 브라우저마다 다사이즈가 다르게 정의되어 있음, 부모 상속 없음 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium; /* 기본 사이즈 */
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> values */
font-size: smaller; /* 부모 사이즈 약 0.8배 */
font-size: larger; /* 부모 사이즈 약 1.2배 */

/* <leghth> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* <viewport-units> values */
font-size: 1vw; /* 1% of viewport width */
font-size: 1vh; /* 1% of viewport height */

기본 값 미지정 시 글꼴의 기본크기는 16px(1em)

 

 

 

5) 속성-font-weight

글꼴 굵기

font-weight: normal | bold | border | lighter | number | initial | inherit;

font-weight: normal; /* 400과 같음 */
font-weight: bold; /* 700과 같음 */
font-weight: lighter; /* 부모 요소보다 얇은 폰트 가중치 */
font-weight: border; /* 부모 요소보다 굵은 폰트 가중치 */

font-weight: 100; /* Thin (Hairline) */
font-weight: 200; /* Extra light (Ultra Light */
font-weight: 300; /* Light */
font-weight: 400; /* Normal */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold (Demi Bold) */
font-weight: 700; /* Bold */
font-weight: 800; /* Extra Bold (Ultra Bold */
font-weight: 900; /* Black (Heavy) */

/* Global values */
font-weight: inherit; /* 상속된 값 */
font-weight: initial; /* 초기 값 */

normal과 bold만 지원하는 폰트일 경우, 100-500은 normal, 600-900은 bold임

 

 

 

6) 속성-font-style

font-style: normal | italic | oblique | initial | inherit;

font-style: normal; /* 기본 */
font-style: italic; /* 이탤릭체 */
font-style: oblique; /* 기울임 */

/* Global values */
font-style: inherit;
font-style: initial;

oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있음

 

 

 

7) 속성-font-variant

• 문자 변환의 의미로 이 속성을 이용해 모든 소문자를 대문자로 변환할 수 있음
• 변환된 대문자는 실제 대문자 사이즈보다 더 작은 사이즈로 나타나며 대소문자 변환이기 때문에 한글에는 적용되지 않음

font-variant: normal | small-caps | initial | inherit;

font-variant:normal; /* 기본 */
font-variant: small-caps; /* 소문자를 작은 대문자로 변환 */

/* Global values */
font-variant: inherit;
font-variant: initial;

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_font-variant

 

 

 

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록