[CSS] 일반 텍스트 속성 | font-size | font-family

 일반 텍스트 속성 

text-align (텍스트 정렬)

가로 정렬을 설정하려면 text-align을 사용해야 한다. 

➡️요소가 표시되는 위치를 정렬하는 게 아니라 요소 내적인 정렬을 의미한다. 

left(좌측 정렬) , center(가운데 정렬), right(우측 정렬)

h1 {
    text-align: center;
}

font-weight (폰트 굵기)

➡️선택한 텍스트에서 주어진 부분의 굵기를 조정하는 것 

 

<font-weight 설정방법>

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

일반적으로 가장 흔한 굵기는 400;이다.

 

text-decoration (텍스트 데코레이션)

➡️텍스트를 꾸미는 선을 조정하는 것(밑줄, 윗줄, 취소선 같은 것을 조정하는 것)

underline(밑줄), overline(윗줄), line-through(취소선)

취소선은 밑줄선과 윗줄보다 다소 복잡하다. why? 줄의 색깔, 선의 모양을 지정할 수 있기때문이다.

text-decoration: #f78120 underline wavy;

#f78120 (줄의 색깔) underline(밑줄) wavy(취소선)

 

line-height (줄 간격)

➡️텍스트의 줄 간격을 조정하는 것

 

letter-spacing (자간 정렬)

➡️텍스트의 간격만 정렬하는 것

 

 font-size (폰트 크기) 

 

font-size (폰트 크기)

➡️ 폰트 크기 설정

다만 어려운 점은? 값들의 옵션이 다양하다.

 

< Relative: 상대단위 >

em

rem

vh

vw

%

and more

 

< Absolute: 절대단위 >

 px 

pt

cm

in

mm

 

절대 단위인 이유? 최종 결과 크기이기 때문에

px? 다른 요소나 원래 폰트 크기 등의 영향을 받지 않는 다면 최소한 내 문서안에서는 항상 동일하다.

(다만! 디스플레이의 크기나 다른 요소에 따라 다를 수 있다. 1픽셀은 다소 차이가 있을 수 있지만, 그 차이는 아주 적다.)

(픽셀은 오랫동안 사용되어온 아주 일반적인 단위이다.)

 

 font-family (폰트 패밀리) 

font-family (폰트 패밀리)

➡️ 요소의 폰트를 변경할 때 사용

 

https://www.cssfontstack.com/

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

↑ Window와 Mac 기기에서 많이 지원하는 폰트들