고래씌

[CSS] 6. 글꼴(폰트)관련 스타일 본문

Front-End/CSS

[CSS] 6. 글꼴(폰트)관련 스타일

고래씌 2023. 11. 3. 18:26

1. 글꼴(폰트) 관련 스타일

1) font-size

: 글꼴의 크기를 지정하는 속성

 

 

■ 12_글꼴(폰트)관련스타일.html

 

 

■ font-style.css

#size-test>li:nth-child(1){font-size:24px;}
#size-test>li:nth-child(2){font-size:17pt;}
#size-test>li:nth-child(3){font-size:150%;}
#size-test>li:nth-child(4){font-size:1.5em;}

 

 

☞ 모두 같은 사이즈임

 

 

 

2) font-weight

: 글꼴의 굵기(두께)를 지정하는 속성

 

 

- 숫자 : 100(얇음) ~ 900(두꺼움) : 100단위로 입력 가능
- normal : 폰트에 지정된 기본 두께(400)
- bold : 굵게(700)
        
- bolder : 더 굵게(900)
- lighter : 더 얇게

 

 

■ 12_글꼴(폰트)관련스타일.html

 

 

■ font-style.css

#weight-test > li{
    font-size : 34px;
}

#weight-test > li:nth-child(1){font-weight: 600;}
#weight-test > li:nth-child(2){font-weight: bold;}
#weight-test > li:nth-child(3){font-weight: bolder;}
#weight-test > li:nth-child(4){font-weight: lighter;}
#weight-test > li:nth-child(5){
    font-weight: normal;
    font-style : italic;
}

 

☞ 기울임 글꼴

font-style : 글꼴의 모양을 지정하는 속성

italic : 폰트에서 제공하는 비슷한 글자(기울어진 글꼴 제시함)

oblique : 강제로 글자를 비스듬하게 변경

 

 

 

 

3) font-family

: 글꼴을 지정하는 속성

 

 

■ 12_글꼴(폰트)관련스타일.html

 

 

 

■ font-style.css

/* font-family */
.cls > li{font-size: 24px;}

#family-test1 > li:nth-child(1){
    font-family: '궁서'; /* 설치된 폰트인 경우 사용 가능*/
}

#family-test1 > li:nth-child(2){
    font-family: '배달의 민족체';
    /* 없는 폰트인 경우 기본폰트로 설정 */
}

#family-test1 > li:nth-child(3){
    font-family: '배달의 민족체', '굴림체';
    /* 배달의 민족체가 없는 경우 두번째 굴림체를 적용 */
}

 

☞ 설치된 폰트인 경우는 사용이 가능하다

 

 

 

 

4) 웹 폰트 사용

▶ 웹폰트 제공 사이트 : https://fonts.google.com (구글 웹폰트 사이트)

▶ 웹폰트 제공 사이트2 : https://noonnu.cc/ (상업용 무료 한글폰트 사이트)

 

 

■ 12_글꼴(폰트)관련스타일.html

 

 

 

① https://fonts.google.com 사이트 이용하여 폰트 적용

 

▶ Noto Sans Korean 폰트 이용

 

 

☞ 맨 오른쪽의 코드를 복사해둔뒤 12_글꼴(폰트)관련스타일.html 파일 <head>태그에 붙여놓기를 한다.(link 속성 걸어줌)

 

 

■ font-style.css

#family-test2 > li:nth-child(1){
    font-family: 'Noto Sans KR', sans-serif;

}

 

 

 

 

 

② https://fonts.google.com 사이트 이용하여 폰트 적용(@import 사용)

 

▶ Roboto 폰트 사용

 

☞ @import를 클릭하여 복사한 뒤, font-style.css 파일 제일 상단에 붙여놓기를 한다!

 

 

■ font-style.css(가장 상단 부분)

 

■ font-style.css

#family-test2 > li:nth-child(2){
    /* @import는 css 파일 제일 상단에 작성해야한다. */
    font-family: 'Roboto', sans-serif;
}

 

 

 

 

 

③ https://noonnu.cc/ 웹사이트를 이용하여 폰트 적용

 

▶ HS 겨울눈꽃체 2.0 글꼴 사용

 

 

☞ 복사한 후, font-style.css에 붙여놓기

 

 

■ font-style.css

 

 

 

저작자표시 비영리 변경금지

'Front-End > CSS' 카테고리의 다른 글

[CSS] 8. 웹문서 구조(실습)  (0) 2023.11.07
[CSS] 7. 변형 관련 스타일  (0) 2023.11.07
[CSS] 5. 글자관련 스타일  (1) 2023.11.03
[CSS] 4-3. FlexBox ③ (item 전용 속성-수축, 팽창 등)  (0) 2023.11.03
[CSS] 4-2. FlexBox ② (flex-container 전용 속성)  (1) 2023.11.03
'Front-End/CSS' Related Articles more