[html/css 기초] 폰트 굵기 설정하기 방법들 정리(font-weight: ;)

안녕하세요 여러분 캐시입니다.🙂

오늘은 html/css 기초로 폰트 굵기를 설정하는 방법 공부한 걸 정리해볼게요!

 

폰트 굵기 설정을 위한 스타일 태그는 font-weight: ; 을 사용해주면 됩니다.

font-weight 사용예시

위의 예시처럼 바디태그 안에 있는 꾸며줄 요소를 스타일 태그 안에 불러주고(id나 class 를 사용하면 각 태그를 부를 수 있는 고윳 값 부여 가능), font-weight 뒤에 원하는 수치 혹은 단어를 입력해주면 됩니다.

 

위의 예시에서 사용한 값 외에 사용 가능한 다른 값들도 한번 적어줘 볼게요!

<style>
    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;
    font-weight: normal;
    font-weight: bold;
    font-weight: bolder;
    font-weight: lighter;
    font-weight: initial;
    font-weight: inherit;
</style>

✅  체크 포인트

• 100, 200, 300, ..., 900 이런 숫자들을 정해서 정할수도 있고, 단어를 사용해 정해줄 수도 있습니다.
• 폰트마다 1 - 900중 존재하는게 다 재각각이다.
• 400은 normal과 같음
• 700은 bold와 같음
• bolder는 상속된 값 보다 굵은 굵기
• lighter는 상속된 값 보다 얇은 굵기
• initial은 기본값으로 지정(사이트 마다 다른 수 있음)
• inherit은 상위 요소의 속성값

 

그럼 오늘도 다들 열심히 공부하시고 좋은 하루 되시길 바랍니다!