글꼴 크기, 굵기와 스타일
font-size로 텍스트 크기를, font-weight로 굵기를, font-style로 스타일을 조절합니다.
글꼴 크기, 굵기와 스타일은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
font-size 속성
font-size는 글리프의 높이를 설정합니다. 모든 길이 단위를 사용할 수 있습니다. 확장 가능하고 접근성이 높은 글꼴 설정에는 rem을 사용하는 것이 좋습니다.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
키워드 글꼴 크기
CSS는 절대 키워드 크기(xx-small부터 xx-large까지)와 부모 글꼴 크기를 기준으로 하는 상대 키워드(smaller, larger)도 제공합니다.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
글꼴 두께
font-weight는 텍스트의 두께를 설정합니다. 숫자 값(100부터 900까지 100 단위)이나 다음 키워드를 사용합니다:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
글꼴 두께와 가변 글꼴
가변 글꼴에서는 모든 정수 두께(예: font-weight: 550)를 사용할 수 있으며, 글꼴은 정의된 축 사이를 보간합니다. 따라서 글꼴을 세밀하게 제어할 수 있습니다.
글꼴 스타일
font-style은 기울임꼴 및 사선 렌더링을 제어합니다:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
글꼴 변형
font-variant는 작은 대문자와 같은 타이포그래피 기능을 활성화합니다:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
글꼴 단축 속성
font 단축 속성은 스타일, 변형, 두께, 크기, 줄 높이 및 글꼴 모음을 한데 묶습니다:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
반응형 글꼴 크기 조정
clamp()를 사용하면 최소 크기와 최대 크기 사이에서 부드럽게 조정되는 유동적인 글꼴 설정을 만들 수 있습니다:
<h1>Resize the window — this heading scales fluidly.</h1>
가독성을 위한 줄 높이
line-height는 줄 사이의 세로 간격을 설정합니다. 단위가 없는 값(예: 1.5)을 사용하는 것이 좋습니다. 이 값은 하위 요소의 글꼴 크기에 맞춰 조정됩니다.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
자간과 단어 간격
letter-spacing은 문자 사이에 간격을 추가하고, word-spacing은 단어 사이에 간격을 추가합니다. 글꼴 크기에 맞춰 조정되도록 em 단위를 사용합니다.
<h2 class="heading">Spaced Out Heading Text</h2>
접근성을 고려한 글꼴 크기
html 또는 body 요소에 font-size를 px 단위로 절대 설정하지 마십시오. 이렇게 하면 브라우저에서 사용자가 설정한 글꼴 크기 기본 설정이 무시됩니다. 대신 브라우저 기본값을 기준으로 하는 rem 단위를 사용하십시오.
빠른 확인
bold 키워드와 같은 글꼴 두께 숫자 값은 무엇입니까?
복습
사용자 설정을 존중하려면 글꼴 크기에 rem을 사용하십시오. font-weight에는 100부터 900까지의 값이나 키워드를 사용할 수 있습니다. font 단축 속성은 여러 속성을 한데 묶습니다. 유동적인 글꼴 설정에는 clamp()를 사용하고, 일관된 간격에는 단위가 없는 line-height를 사용하십시오.
자주 묻는 질문
“글꼴 크기, 굵기와 스타일” 강의는 무료인가요?
네 — “글꼴 크기, 굵기와 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“글꼴 크기, 굵기와 스타일”에서 뭘 배우나요?
font-size로 텍스트 크기를, font-weight로 굵기를, font-style로 스타일을 조절합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“글꼴 크기, 굵기와 스타일” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 글꼴 패밀리와 웹 안전 글꼴
- 글꼴 크기, 굵기와 스타일
- 텍스트 정렬, 장식과 간격
- Google Fonts와 @font-face