본문으로 건너뛰기
실습하기

글자 두께(font-weight), 글자 기울임(font-style)

글을 쓸 때 강조하고 싶은 부분이나 특별한 느낌을 주고 싶은 부분이 있을 때, 볼펜의 압력을 세게 하거나 필기체로 쓰곤 합니다.

CSS에서는 글자 두께에 변화를 주기 위해 font-weight 속성을, 스타일에 변화를 주기 위해 font-style 속성을 사용합니다.


  1. font-weight

font-weight 속성은 글자의 두께를 조절합니다. 마치 볼펜의 압력을 조절하는 것처럼, 글자의 두께를 더 두껍거나 얇게 만들 수 있습니다.

글자 두께는 키워드 값(normal, semi-bold, bold...) 또는 숫자 값(300, 400, 500...)으로 지정할 수 있습니다.

CSS
.normal-text {
  font-weight: normal; /* 보통 두께의 글씨, 400으로도 설정 가능 */
}

.bold-text {
  font-weight: bold; /* 두꺼운 글씨, 700으로도 설정 가능 */
}

.thicker-text {
  font-weight: 400;
}

숫자값과 키워드는 폰트에 따라 다르게 적용될 수 있습니다.

예를 들어 bold는 폰트에 따라 700으로 적용되기도 하고, 600으로 적용될 수 있습니다.


  1. font-style

font-style 속성은 글자의 스타일을 바꿉니다.

normal은 보통 스타일의 글씨로, italic은 기울어진, 마치 필기체처럼 보이는 폰트를 사용합니다.

예시 코드:

CSS
.regular-text {
  font-style: normal; /* 보통 스타일의 글씨 */
}

.italic-text {
  font-style: italic; /* 기울어진, 필기체 느낌의 글씨 */
}

italic체를 지원하지 않는 폰트를 사용하면 font-style: italic 속성이 적용되지 않습니다.


코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!