728x90
CSS 폰트 크기 설정 Font-size
CSS 폰트 사이즈 설정 방법은 여러가지가 있지만
그중 대표적으로 두가지를 소개하고자 한다.
첫번째. HTML 태그에서 style 속성을 이용하여 직접 설정
두번째. CSS 파일에서 CSS Selector를 통해 설정
1. HTML 엘리먼트 직접 설정
기본 골격
<!--HTML 태그의 style 속성을 이용한 직접 설정-->
<태그명 style="font-size : 원하는크기;">This is Sample</태그명>샘플 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Font Size Example</title>
</head>
<body>
<!--HTML 태그에 style 속성을 이용하여 폰트 사이즈 직접 설정-->
<div style="font-size:30px;">안녕하세요</div>
<div style="font-size:20px;">티스토리 방문을 환영합니다.</div>
</body>
</html>출력 결과
2. CSS 파일내 CSS Selector를 통해 폰트 사이즈 설정
기본 골격
/*CSS Selector를 통한 폰트 사이즈 설정*/
CSS Selector {
font-size:원하는사이즈;
}샘플 코드 [HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Font Size Example</title>
</head>
<body>
<!--HTML 태그에 style 속성을 이용하여 폰트 사이즈 직접 설정-->
<div class="content1">안녕하세요</div>
<div class="content2">티스토리 방문을 환영합니다.</div>
</body>
</html>샘플 코드 [CSS]
/*CSS Selector를 통한 font size 설정*/
/*엘리먼트는 Class 명을 통해 선택*/
.content1 {
font-size : 30px;
}
.content2 {
font-size : 20px;
}출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 마우스 클릭 금지, 안되게 막기 및 해제 (0) | 2021.04.17 |
|---|---|
| [CSS] CSS Selector 선택자 우선순위 (0) | 2021.04.15 |
| [CSS] border 테두리 속성 설정하기 (0) | 2021.04.06 |
| [CSS] 모서리 모양 변경하기 border-radius (0) | 2021.04.03 |
| [CSS] 배경 색상 변경하기 background color (4) | 2021.04.03 |
댓글