앱 만들기/CSS

CSS 주요 font 속성 4가지 알아보기

나도 처음이야 2023. 5. 12.

CSS 주요 font 속성은 4가지로 나눌 수 있습니다.

1. font-family :

글꼴을 나타냅니다.

2. font-size :

폰트 사이즈입니다.

3. font-weight :

폰트 굵기입니다.

4. font-style :

일반 및 이탤릭 스타일을 나타냅니다.

font-family , size, weight , style 예제를 만들어 봅니다,

<!DOCTYPE html>
<html>
<head>
	<title>Font Example</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			font-size: 16px;
			font-weight: bold;
			font-style: italic;
		}
		h1 {
			font-family: Georgia, serif;
			font-size: 28px;
			font-weight: normal;
			font-style: normal;
		}
		p {
			font-size: 18px;
			font-weight: normal;
			font-style: normal;
		}
	</style>
</head>
<body>
	<h1>Welcome to my Website</h1>
	<p>This is an example of using font-size, font-weight, font-style, and font-family properties in CSS.</p>
	<p>The font-size property sets the size of the text, the font-weight property sets the thickness of the text, and the font-style property sets the style of the text (italic, oblique, or normal).</p>
	<p>The font-family property sets the font family for an element. If the first font is not available, the browser will try the next font in the list.</p>
</body>
</html>

스타일을 적용한 결과 화면입니다,

font-family 스타일에서 사용자 PC에 폰트가 설치되어 있지 않는 경우를 대비하여 여러 폰트를 기재하거나, 웹 폰트 혹은 다운로드 폰트를 기재하기도 합니다.

font-size의 단위 등은 별도로 외우기보다는 필요시 CSS 태그 속성 문서를 찾아서 보면 됩니다.

코딩은 외우는 것이 아니니까 말이죠.

font-style 은 normal 및 italic 이 주로 사용됩니다.

font-weight의 속성 역시 필요시 문서를 찾아서 코딩하면 됩니다.

100~900 사이의 수치 값을 사용하여 굵기를 나타내기도 합니다.

이상, CSS 주요 폰트 스타일 이였습니다.

감사합니다.

저작자표시 비영리 변경금지

'앱 만들기 > CSS' 카테고리의 다른 글

CSS 전체선택자 란? (2)	2023.06.01
브라우저 스타일 초기화 하는 방법 (2)	2023.05.30
브라우저 기본 스타일 이란? (0)	2023.05.10
CSS 스타일 시트 우선순위 (3)	2022.11.22
CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기 (6)	2022.11.18