반응형
HTML에서 글씨 크기를 변경은 주로 CSS(Cascading Style Sheets)를 이용합니다.
예전에는 <font size> 태그를 사용하기도 했지만, 지금은 권장되지 않는 방법이랍니다
CSS를 사용해서 글씨 크기를 조절하는 방법은 몇 가지가 있어요.
가장 많이 사용되는 font-size 속성을 사용하는 방법을 알려드릴게요
1. 인라인 스타일(Inline Style) 사용하기
HTML 태그 안에 style 속성을 직접 사용해서 글씨 크기를 변경하는 방법입니다.
특정 요소에만 스타일을 적용할 때 편리하지만, 여러 곳에 같은 스타일을 적용하려면 비효율적일 수 있어요.
html
<p style="font-size: 20px;">이 문단의 글씨 크기는 20px입니다.</p>
<span style="font-size: 1.5em;">이 텍스트의 글씨 크기는 1.5em입니다.</span>
2. <style> 태그 사용하기
HTML 문서의 <head> 섹션 안에 <style> 태그를 넣고, 그 안에 CSS 코드를 작성하는 방법이에요.
해당 HTML 문서 전체에서 선택자(Selector)를 이용해 스타일을 적용할 수 있어요.
html
<!DOCTYPE html>
<html>
<head>
<title>글씨 크기 변경 예제</title>
<style>
p {
font-size: 18px; /* 모든 p 태그의 글씨 크기를 18px로 설정 */
}
.large-text {
font-size: 2em; /* class가 large-text인 요소의 글씨 크기를 2em으로 설정 */
}
</style>
</head>
<body>
<p>이 문단의 글씨 크기는 18px입니다.</p>
<p class="large-text">이 문단의 글씨 크기는 2em입니다.</p>
</body>
</html>
3. 외부 CSS 파일 사용하기
가장 권장되는 방법으로, 별도의 .css 파일을 만들어서 HTML 문서에 연결하는 방식이에요.
여러 HTML 문서에서 동일한 스타일을 재사용하기 편리하고, 코드 관리가 용이해요.
styles.css 파일 내용:
css
p {
font-size: 16px;
}
#small-text {
font-size: 0.8em;
}
HTML 파일 내용:
html
<!DOCTYPE html>
<html>
<head>
<title>글씨 크기 변경 예제 (외부 CSS)</title>
<link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 연결 -->
</head>
<body>
<p>이 문단의 글씨 크기는 styles.css에 정의된 대로 16px입니다.</p>
<p id="small-text">이 문단의 글씨 크기는 0.8em입니다.</p>
</body>
</html>
font-size 속성에서 사용할 수 있는 단위
글씨 크기를 지정할 때 다양한 단위를 사용할 수 있어요
- px (픽셀): 화면의 픽셀을 기준으로 크기를 지정해요. 절대적인 크기를 원할 때 사용하지만, 사용자의 브라우저 설정이나 화면 크기에 따라 글씨가 너무 작거나 커 보일 수 있어요.
- em (엠): 부모 요소의 글씨 크기를 기준으로 상대적인 크기를 지정해요. 기본 글씨 크기(브라우저 기본값 16px)의 배수로 계산돼요. 예를 들어 1.5em은 기본 글씨 크기의 1.5배가 돼요
- rem (루트 엠): HTML 문서의 최상위 요소인 <html> 태그의 글씨 크기를 기준으로 상대적인 크기를 지정해요. em보다 예측하기 쉽다는 장점이 있어요.
- % (퍼센트): 부모 요소의 글씨 크기를 기준으로 백분율로 지정해요.
- vw (Viewport Width), vh (Viewport Height): 뷰포트(화면 표시 영역)의 너비 또는 높이를 기준으로 상대적인 크기를 지정해요. 반응형 웹 디자인에 유용해요.
어떤 방법을 사용하시든 font-size 속성을 이용하면 글씨 크기를 원하시는 대로 조절하실 수 있을 거예요.
반응형