[CSS] 텍스트 관련 스타일

Day37. 230621

텍스트 관련 스타일

글꼴 관련 스타일

font-family속성

웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다.

font-family:<글꼴 이름>[,<글꼴 이름>,<글꼴 이름>]

 

@font-face 속성 - 웹 폰트 사용하기

웹 폰트란?

웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식.

사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자가 컴퓨터에 다운로드한 후 표시하기 때문에 웹제작자가 의도한 대로 텍스트를 표시 할 수 있다.

 

웹 폰트 적용하기

@font-face{
   font-family:글꼴 이름;
   src:url(글꼴 파일 경로) format(파일 유형);
}

 

 

font-size 속성

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

font-size에서 주로 <크기>값을 직접 지정하는 방법을 사용한다.

사용한 수 있는 단위는 다음과 같다.

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절한다.
ex	x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다.
px	픽셀, 모니터에 따라 상대적인 크기를 나타낸다.
pt	포인트, 일반 문서에서 많이 사용하는 단위이다.

1em=16px

 

 

font-weight 속성  -  글자 굵기 지정하기

font-weight: normal | bold | bolder | lighter | 100~900

 

font-style 속성  -  글자 스타일 지정하기

font-style : normal | italic | oblique

 

 

font속성 - 글꼴 속성을 한꺼번에 묶어 표현하기

p{font:16px/25px "맑은 고딕"}
p{font:bold italic 12pt}

 

다음과 같이 글꼴 속성을 한번에 묶어 표현 할 수 있다.

 

 

 

문단 스타일

text-align속성

문단의 텍스트 정렬 방법을 지정한다.

text-align : start | end | left | right | center | justify | match-parent

속성 값으로 "왼쪽 정렬", "오른쪽 정렬", "양쪽 정렬", "가운데 정렬" 등을 지정 할 수 있다.