개발 공부 기록하기

DAY 8. 글꼴 관련 스타일(3): font-style, font-weight 본문

프밍/CSS

DAY 8. 글꼴 관련 스타일(3): font-style, font-weight

태영(泰伶) 2022. 11. 1. 21:29

font-style: normal | italic | oblique

 

font-style: normal;

기울어지지 않은 보통의 글씨체

 

font-style: italic;

이탤릭체 (대부분 기울어진 글꼴이 따로 디자인되어 있음)

 

font-style: oblique;

이탤릭체(일반 글꼴을 그저 기울여 놓음)

* oblique: 비스듬한, 사선의

 

 

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

 

font-weight: normal;

보통 굵기. default값.

 

font-weight: bold;

굵게

 

font-weight: bolder;

원래보다 더 굵게

 

font-weight: lighter;

원래보다 더 가늘게

 

font-weight: 100;

가장 가는 굵기

 

font-weight: 200;

조금씩

 

font-weight: 300;

조~오금씩

 

font-weight: 400;

좀 더

 

font-weight: 500;

좀 더 많이

 

font-weight: 600;

더더

 

font-weight: 700;

많이 많이

 

font-weight: 800;

두꺼워집니다

 

font-weight: 900;

이게 제일 두꺼운 거

 

 

 

 

 

 

예제.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            body {
               font-size: 20px;		/* 전체 글자 크기 */
            }
            h1 {
               font-family: 바탕;		/* 글꼴 */
               font-size: 3em;		/* 글자 크기 */
            }
            .accent {
               font-size: 150%;		/* 글자 크기 */
               font-weight: 800;	/* 글자 굵기 */
            }
            .italic {
               font-style: italic;	/* 글자 스타일 */
            }
         </style>
      </head>
      <body>
         <h1>레드향</h1>
         <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span> 이라 불린다.</p>
         <p>레드향은 한라봉과 귤을 교배한 것으로</p>
         <p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      </body>
   </html>

↓

 

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

'프밍 > CSS' 카테고리의 다른 글

DAY 9. Google Font  (0) 2022.11.02
DAY 8. Web Font  (0) 2022.11.01
DAY 7. 글꼴 관련 스타일(2): font-size  (0) 2022.10.31
DAY 6. 글꼴 관련 스타일(1): font-family  (0) 2022.09.04
DAY 5 - 스타일 상속  (0) 2022.08.27
'프밍/CSS' Related Articles more
Comments