7. 텍스트 속성

1. font-family 속성

- 글꼴 지정 가능

- 속성값에 글꼴명을 적음, 쉼표로 구분하고 한글로 된 글꼴이나 공백이 있는 건 " " 로 감쌈

/* 형식 */
font-family:<글꼴1>, <글꼴2>,....<글꼴 유형>;

- 맨 앞에 있는 글꼴부터 적용 가능 여부를 판단한다.

- 글꼴 유형 : 글꼴의 형태를 의미 따라서 못 불러온다는 개념이 없음 / 아무글꼴도 못 불러올 때 대비

• serif : 삐침이 있는 명조 계열 글꼴
• sans-serif : 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
• monospace : 텍스트 폭과 간격이 일정한 글꼴
• fantasy : 화려한 글꼴
• cursive : 필기체 계열의 글꼴

2. font-size 속성

- 텍스트 크기를 변경하는 속성

- 속성값에 크기를 넣음

/* 형식 */
font-size:크기;

- 일반적으로 기본 스타일 시트에 따른 텍스트 크기는 16px임

3. font-weight 속성

- 텍스트의 굵기 지정

/* 형식 */
font-weight:숫자표기법 or 키워드표기법;

- 속성값은 숫자 표기법과 키워드 표기법으로 나뉨

• 숫자 표기법: 숫자 100단위로  정하는 텍스트 굵기, 100부터 900까지 있음(클수록 굵다)
• 키워드 표기법: 키워드로 굵기 표시, lighter(부모 요소보다 얇게)/normal(400)/bold(700)/bolder(부모 요소보다 굵게) 4가지가 있다.

4. font-style 속성

- 글꼴의 스타일 지정

/* 형식 */
font-style:속성값;

-속성값은 3가지로 나뉨

• normal : 기본 형태
• italic:이탈릭체로 표시
• oblique:기울임꼴로 표시

- 브라우저에서 itlaic 이랑 oblique은 보기에는 별 차이 없다

5. font-variant 속성

- 영문 텍스트를 크기가 작은 대문자로 변경

/* 형식 */
font-variant:속성값;

-속성값은 2가지로 나뉨

• normal : 텍스트 변환 안함
• small-caps : 텍스트를 크기가 작은 대문자로 변환

6. color 속성

- 텍스트의 색상 지정

- 속성값에는 색상 표기법을 사용하면 됨

/* 형식 */
color:속성값;

7. text-align 속성

- 텍스트 정렬에 사용

/* 형식 */
text-align:속성값;

- 속성값은 4가지로 나뉨

• left : 텍스트를 왼쪽 정렬
• center : 텍스트를 중앙 정렬
• right : 텍스트를 오른쪽 정렬
• justify : 텍스트를 양쪽 정렬(텍스트 사이 간격을 조절해서 양쪽에 꽉차게 정렬)

8. text-decoration 속성

- 텍스트에 선을 그음

/* 형식 */
text -decoration:속성값;

- 속성값은 4가지로 나뉨

•  none: 선 다 지우기
• line-through : 텍스트 중간 관통하는 선 그음
• overline : 텍스트 위에 선 그음
• underline : 텍스트 아래에 선 그음

9. letter-spacing 속성

- 자간 조절에 사용

/* 형식 */
letter-spacing:속성값;

- 속성값에는 normal(브라우저에서 정한 기본값) 또는 크기(px)를 넣을 수 있음

10. line-height 속성

- 텍스트 한 줄의 높이 지정

/* 형식 */
line-height:속성값;

- 속성값은 4가지로 나뉨

• normal : 웹브라우저 기본값, 일반적으로 1.2
• 숫자 : 현재 font-size 값에 입력한 숫자를 곱한 값 사용
• 퍼센트 : 현재 font-size 값에 입력한 비율을 곱한 값 사용
• 크기(px) : 입력한 크기를 적용 

- font-size = 글자 자체의 크기 / line-height = 글자 자체와 텍스트 위 아래 여유공간을 포함한 간격 = 행간

- font-size > line-height 이면 위 아래 텍스트가 겹쳐 보인다

 

번외. 웹 폰트와 아이콘 폰트

-웹 폰트 : 기관 또는 회사에서 웹 서버에 돌려 놓은 폰트

시스템에 글꼴이 없어도 모든 사용자가 같은 글꼴을 사용 가능

ex) Google font

-아이콘 폰트 : 다양한 아이콘을 웹 포트 사용하듯이 쉽게 쓰는 기술

이미지 파일이 아니라 CSS를 적용하는 방식으로 간단하게 활용 가능

ex) Font Awesome , Material Icon