폰트 굵기
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 20번째.
CSS에서 font-weight 속성은 HTML 요소 내 텍스트의 굵기나 두께를 조절하는 데 사용됩니다.
font-weight에 대한 일반적인 숫자 값은 다음과 같습니다:
100: Thin200: Extra Light300: Light
400: 보통500: 중간600: 세미 볼드
700: 굵게800: 엑스트라 볼드900: 블랙
font-weight에 일반적으로 사용되는 키워드 값은 다음과 같습니다:
normal:400과 동일bold:700과 동일
lighter: 부모 요소보다 더 가벼운(얇은) 두께를 지정합니다bolder: 부모 요소보다 더 굵은 두께를 지정합니다
예를 들어:
p {
font-weight: normal;
}
h1 {
font-weight: 700;
}
.highlight {
font-weight: bold;
}
챌린지
쉬움제목(<h1>), 단락(<p>), 그리고 구분(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 font-weight 속성을 사용하여 이 요소들의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:
<h1>요소를 대상으로 하는 CSS 규칙을 작성하세요.font-weight를900으로 설정하세요.<p>요소를 대상으로 하는 CSS 규칙을 작성하세요.font-weight를lighter로 설정하세요.<div>요소를 대상으로 하는 CSS 규칙을 작성하세요.font-weight를600으로 설정하세요.
치트 시트
font-weight 속성은 텍스트의 굵기나 두께를 조절합니다.
숫자 값:
100: Thin (가늘게)200: Extra Light (매우 가늘게)300: Light (가늘게)400: Normal (보통)500: Medium (중간)600: Semi Bold (세미 볼드)700: Bold (굵게)800: Extra Bold (매우 굵게)900: Black (가장 굵게)
키워드 값:
normal:400과 동일bold:700과 동일lighter: 부모 요소보다 더 가늘게bolder: 부모 요소보다 더 굵게
p {
font-weight: normal;
}
h1 {
font-weight: 700;
}
.highlight {
font-weight: bold;
}직접 해보기
<html>
<head>
<title>Font Weight</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
