CSS _폰트(font)_font-weight

💻Coding/📒 CSS

CSS _폰트(font)_font-weight

음은응 2021. 11. 22. 12:08

728x90

CSS _폰트(font)

font는 폰트 스타일을 바꾸기 위한 속성명으로 font-()뒤의 내용에 따라
폰트의 스타일에 변화를 줄 수 있음!
↓↓↓

[ CSS - font 문법 ]

<style>
    선택자 { font-속성: 속성값; }
</style>

▶ CSS에서 자주 사용하는 font의 속성입니다.

▶ font-weight
ㄴ 폰트의 굵기를 변경하는 속성
ㄴ 속성값이나 숫자로 굵기로 변경할 수 있음

[사용하는 속성값]
- normal : 기본값
- bold : 폰트 굵게
- 100~900 : 숫자별로 글꼴 굵기를 지정 가능
※ 숫자가 클수록 두꺼워집니다! (normal이 400, bold가 700임)

▶ font-weight 사용 방법

<style>
    선택자 { font-weight: 굵기설정값; }
</style>

▶ font-weight 실전 예시

[ html - css 작성 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-weight</title>
    <style>
        .weight1 {
            font-weight: normal;
            /* 기본값이라 변화가 없음 */
        }
        .weight2 {
            font-weight: bold;
        }
        .weight3 {
            font-weight: 100;
        }
        .weight4 {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>font-weight</h1>
    <h3>font-weight : 폰트의 굵기를 설정하는 속성</h3>
    <p class="weight1">normal : 기본값</p>
    <P class="weight2">bold : 폰트 굵게</P>
    <P class="weight3">숫자로 설정시 400보다 작으면 얇아지고</P>
    <P class="weight4">400보다 크면 두꺼워집니다.</P>
</body>
</html>

[ 실행 화면의 변화 ]

↓ css style 적용 전 화면

↓ css style 적용 화면

728x90

저작자표시 비영리 변경금지 (새창열림)