비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT

※FONT와 TEXT는 디자인적인 부분이나 가독성 측면에서 매우 중요한 요소 중 하나입니다.

CSS를 활용하여 TEXT에 크기, 글꼴, 효과등을 주거나 정렬하는 방법을 알아보도록 하겠습니다.

 

목차

1. FONT

2. TEXT

 

1. FONT

폰트는 크게 4가지의 속성을 가집니다. 각 속성에 대해 자세히 알아보도록 하겠습니다.

font-size	길이(px, em, ex), 백분율(%; 140%)	폰트의 크기를 지정
font-family	글자체(굴림체, 궁서, 맑은 고딕 등)	폰트 모양을 지정
font-style	normal, italic, oblique	폰트 형태(이태릭체 등)를 지정
font-weight	normal, bold, bolder, lighter, 숫자(100 200, ‥ ,900)	폰트의 굵기를 지정

 

@font-size 속성

글꼴의 크기를 지정하는 속성입니다.

keyword	medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
length	px, em 등 고정 수치로 지정합니다.
%	부모 요소의 font-size 기준의 퍼센트로 지정합니다.

 

@font-family 속성

글꼴을 지정하는 속성입니다.

 

font-family: '고딕', '돋움';

첫 번째 글꼴을 사용하되 첫 번째 글꼴이 없을 시 ', '로 구분된 두 번째 글꼴을 사용하는 방식입니다.

글꼴은 더 추가할 수 있습니다.

 

 

@font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

normal	기본 값 (400)
bold	굵게 표현(700)
bolder	부모 요소 보다 두껍게 표현
lighter	부모 요소 보다 얇게 표현
number	100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

 

@font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

normal	font-family 내에 분류된 기본 값
italic	italic 스타일로 표현합니다. (italic체)
oblique	oblique 스타일로 표현합니다. (기울임)

 

2. TEXT

 

@text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

none	텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline	밑줄로 꾸밈을 설정
overline	윗줄로 꾸밈을 설정
line-through	중간을 지나는 줄로 꾸밈을 설정

@text-decoration-style 속성

solid	한줄 스타일 ( 기본 값 )
double	이중선 스타일
dotted	점선 스타일
dashed	파선 스타일
wavy	물결 스타일

 

@text-indent 속성

텍스트의 들여 쓰기를 지정하는 속성입니다. 

length	px, em 등 고정 수치로 지정. 음수 허용
%	부모 요소의 width를 기준으로 퍼센트로 지정

 

@text-align 속성

텍스트의 정렬을 지정하는 속성입니다. text 가운데 정렬을 위해 많이 사용됩니다.

left	텍스트를 왼쪽으로 정렬
right	텍스트를 오른쪽으로 정렬
center	텍스트를 중앙으로 정렬
justify	텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

@text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

 

block 요소를 가운데 정렬 하고자 한다면 margin의 auto 값을 이용해서 양쪽 여백값을 조절하면 됩니다. 

- 인라인 요소 : text-align (center) 

- 블록 요소 :  margin (auto) 

 

 ex) margin:0 auto;

-첫 번째 0은 top, bottom의 여백, 두 번째 auto부분은 left, right의 여백입니다. 좌우 여백을 auto로 줘서 자동으로 양쪽 여백을 같게 만들어 주면 가운데로 정렬됩니다.