[CSS]텍스트 스타일링

색상

속성명 : color

속성값 : 색깔 이름을 직접 영어로 입력해주거나, HEX(16진수로 된 색깔 값)를 입력한다.

- 글자 색이 아닌, 박스 테두리 색/배경 색 등에도 같은 방법으로 속성값을 줄 수 있음

(속성 명만 다르게 한다. border-color/backgroud-color 등)

글꼴

속성명 : font-family

속성값 : "폰트이름" 형식으로 작성해준다. 지정한 폰트가 웹 페이지에서 사용되지 않는 경우를 대비하여

여러개를 ',(콤마)'로 구분하여 쓸 수 있다. 앞에서 부터 순서대로 적용됨.

 

<다양한 글꼴을 사용하는 방법>

아무리 다양한 글꼴을 적용하더라도, 해당 글꼴이 사용자의 기기에 설치가 되어있지 않으면 사용할 수 없다.

따라서 웹 폰트 기술을 적용하여 이러한 문제를 해결할 수 있다.

Google Fonts 서비스를 이용하여 HTML 문서에 <link>태그를 적용해, 다양한 폰트를 사용할 수 있다.

크기

속성명 : font-size

속성값 : 절대단위 혹은 상대단위를 이용하여 폰트 크기 결정

-절대단위 : 기기나 브라우저의 사이즈의 영향을 받지 않는 절대적인 크기 

화면의 사이즈가 유동적이지 않고 고정된 경우에 사용하는 것이 좋음

예) px, pt 등

-상대단위 : 기기나 브라우저의 사이즈에 따라 설정한 값(단위)에 맞춰 변하는 상대적인 크기.

반응형 웹에 사용하는 것이 좋음.

예)%, rem, ch, vw, vh 등

기타 스타일링

굵기 : font-weight

밑줄, 가로줄 : text-decoration

자간 : letter-spacing

행간 : line-height

텍스트 정렬

속성명 : text-align

속성값 : left, right, center, justify(양쪽정렬), initial(기본값으로 설정)