오늘은 CSS를 사용하여 웹 페이지의 글자 크기와 굵기를 조정하는 방법에 대해 알아보겠습니다.
기본적인 인라인 스타일을 사용하는 방법부터 시작하겠습니다.
1. 인라인 스타일로 글자 크기와 굵기 설정하기
인라인 스타일은 HTML 태그에 직접 CSS 속성을 추가하여 적용하는 방법입니다. 이 방법은 간단하고 빠르게 특정 요소에 스타일을 적용할 수 있습니다.
<p style="font-size: 20px; font-weight: bold;">안녕하세요! CSS로 글자 크기와 굵기를 설정하는 방법입니다.</p>위의 코드에서 font-size 속성은 글자 크기를 설정하고, font-weight 속성은 글자의 굵기를 설정합니다.
여기서 font-weight: bold;는 글자를 두껍게 만들어줍니다. font-size는 원하는 크기로 변경할 수 있으며, 일반적으로는 px(픽셀), em, % 등의 단위를 사용합니다.
인라인 스타일의 장점과 단점
- 장점
- 간단하게 사용할 수 있다.
- 특정 요소에만 스타일을 적용할 수 있다.
- 단점
- 코드가 복잡해지면 유지보수가 어려워진다.
- HTML과 CSS 코드가 섞여 가독성이 떨어진다.
2. 내부 또는 외부 스타일 시트로 글자 크기와 굵기 설정하기
인라인 스타일 외에도 CSS를 사용하는 두 가지 주요 방법은 내부 스타일 시트와 외부 스타일 시트입니다. 이 방법들은 스타일을 한 곳에서 관리할 수 있어 유지보수가 용이합니다.
내부 스타일 시트
HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 CSS를 정의합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기와 굵기</title>
<style>
.my-text {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="my-text">이것은 내부 스타일 시트를 사용한 예시입니다.</p>
</body>
</html>외부 스타일 시트
CSS 파일을 별도로 만들어 HTML 문서에서 링크합니다. 이는 웹 페이지가 커질수록 더 효과적입니다.
/* styles.css */
.my-text {
font-size: 24px;
font-weight: bold;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기와 굵기</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="my-text">이것은 외부 스타일 시트를 사용한 예시입니다.</p>
</body>
</html>3. 글자 크기와 굵기를 조정하는 추가 방법
다양한 글자 크기 단위
- px (픽셀): 고정 크기
- em: 부모 요소의 글자 크기를 기준으로 상대적으로 크기 설정
- %: 부모 요소의 글자 크기를 기준으로 비율 설정
다양한 글자 굵기 값
- normal: 기본 굵기
- bold: 두껍게
- bolder: 더 두껍게
- lighter: 더 얇게
- 숫자 값 (100, 200, ..., 900): 세부적인 굵기 설정
CSS를 사용하여 글자 크기와 굵기를 조정하는 방법은 매우 다양합니다. 인라인 스타일로 간단히 적용할 수도 있고, 내부 또는 외부 스타일 시트를 사용하여 보다 효율적으로 관리할 수도 있습니다.
이러한 기술을 통해 웹 페이지의 디자인을 더욱 매력적으로 만들 수 있습니다!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > CSS' 카테고리의 다른 글
| CSS에서 크기 조절하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
|---|---|
| CSS에서 글 정렬 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS에서 글꼴 변경하는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS로 글자색 쉽게 넣는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS로 배경색 쉽게 넣는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.25 |
