CSS, text-decoration 과 font-family

text-decoration

글자 장식, 글자 스타일 , 글자를 변형 시키는 기능.

 

text-decoration-style , text-decoration-color 등과 같은 속성은 반드시 text-decoration 속성이 설정 된 후 사용 가능.

 

text-decoraion:underline;

글자 장식 밑줄

text-decoration:overline;

글자 장식 윗줄

text-decoration:line-through;

글자 장식 가운데 줄

 

text-decoration:line-through ; text-decoration-style:double;

 

<del></del> 글자 장식 지정속성 제거

line-through 속성과 동일한 기능은 하나 ,

text-decoration-style , text-decoration-color 속성 적용 불가

<h2 class="deco line-color"><del>글자 장식 - del 태그</del></h2>

 

font-style :italic;

이텔릭 체로 변경

font-style: oblique;

비스듬한 체로 변경

---

text-transform : uppercase ; 

모든 글자를 대문자로 변경

text-transform : lowercase ;

모든 글자를 소문자로 변경

text-transform : capitalize ; 

시작하는 첫 글자를 대문자로 변경

text-transform : none ;

변경하지 않음. 디폴트

---

font-variant :

글꼴 표시형태를 일괄적으로 설정.

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

 

---

font-family

폰트 종류를 설정한다.

폰트명은 한글이거나 여러 단어인 경우 큰따옴표를 설정해야 한다.

: serif ;   활자 꺾어진 선 ( 명조체 )
: sans;    ~없이
: sans-serif;   꺾어진 선이 없이 ( 고딕체 )
:cursive;   ( 필기체 )
:monospace ;   동일 공간 글꼴 ( 모든 글자의 가로 너비가 같은 글꼴 )

 

구글 폰트 다운로드

https://fonts.google.com

 

1)지시자를 이용한 방법.

 

@font-face 지시자를 이용해 외부 사용자 정의 글꼴로 경로를 명시하고

사용자 정의 글꼴명을 정의하여 사용할 수 있다.

@font-face {

    /* font-face 지시자 내 font-family 에 지정하는 폰트명은 사용자 임의로 지정 가능. */
    font-family: shizuru;
    src: url(../font/Shizuru/Shizuru-Regular.ttf);
}

.shizuru {
    font-family: shizuru;
}

 

2)웹 링크를 지정하여 사용하는 방법.

 

-웹폰트 링크를 지정함으로 외부 폰트를 다운받는 방법에 비해 접속시 트래픽 발생을 회피 할 수 있다.

 

헤더 안의 스타일 시트 링크 위에 다운받은 html 링크를 복사 붙여넣은 다음.

클래스의

font : ' ' 로 지정이 가능하다.

 

 

참고사항 *

font 속성을 이용하여 색상을 제외한 글꼴 침 줄 간격등을 한꺼번에 지정 가능.

font-size 와 font-family 는 필수 속성.

font-style / font-variant / font-weight 속성들은 font-size 앞에 반드시 지정. 순서는 상관 없음.

line-height 는 font-size 뒤에 / 구분자로 지정되어야 한다.

font-family 는 무조건 마지막에 지정되야 함에 주의.

font : font-style font-variant font-weight font-size/line-height font-family.