[CSS 2-2] 글자 관련 스타일 속성

임승현·2022년 11월 11일

CSS

목록 보기

4/14

🐧글자 관련 스타일 속성

📌font-size : 글자 크기에 대한 스타일 속성 - 기본크기 : 16px

◈ 속성값(단위) : px(기본), pt, em, %, 키워드(small,medium,large 등)
.font1 {
	font-size: 14px;
}

📌font-style : 글자 기울기에 대한 스타일 속성 - normal(기본), italic
.font2 {
	font-size: 20px;
	font-style: italic;
}

📌글자 크기 관련 키워드는 medium(16px)을 기준으로 1.2배씩 증가 또는 감소

📌font-variant : 알파벳에 대한 스타일 속성 - nrmal(기본), small-caps(소문자를 작은 크기의 대문자로 변환)
.font3 {
	font-size: xx-large;
	font-variant: small-caps;
}

📌em : M 문자의 폭을 기준으로 설정된 글자 크기 단위 - 반응형 웹디자인에서 사용

→ http://pxtoem.com 사이트 참조

📌font-weight : 글자 굵기에 대하 스타일 속성 - 100~900(기본:400), 키워드(normal, bold 등)
.font4 {
	font-size: 1.5em;
	font-weight: bold; /* bold=700 */
}

📌font : 모든 글자 관련 스타일 속성값 사용 - 공백을 이용하여 속성값 구분

→ 글꼴을 반드시 설정
.font5 {
	font: italic 700 20px "궁서";
}

📃11_font.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.font1 {
	/* font-size : 글자 크기에 대한 스타일 속성 - 기본크기 : 16px */
	/* 속성값(단위) : px(기본), pt, em, %, 키워드(small,medium,large 등) */
	font-size: 14px;
}
.font2 {
	font-size: 20px;
	/* font-style : 글자 기울기에 대한 스타일 속성 - normal(기본), italic */
	font-style: italic;
}
.font3 {
	/* 글자 크기 관련 키워드는 medium(16px)을 기준으로 1.2배씩 증가 또는 감소 */
	font-size: xx-large;
	/* font-variant : 알파벳에 대한 스타일 속성 - nrmal(기본), small-caps(소문자를 작은 크기의 대문자로 변환) */
	font-variant: small-caps;
}
.font4 {
	/* em : M 문자의 폭을 기준으로 설정된 글자 크기 단위 - 반응형 웹디자인에서 사용 */
	/* → http://pxtoem.com 사이트 참조 */
	font-size: 1.5em;
	/* font-weight : 글자 굵기에 대하 스타일 속성 - 100~900(기본:400), 키워드(normal, bold 등) */
	font-weight: bold; /* bold=700 */
}
.font5 {
	/* font : 모든 글자 관련 스타일 속성값 사용 - 공백을 이용하여 속성값 구분*/
	/* → 글꼴을 반드시 설정 */
	font: italic 700 20px "궁서";
}
</style>
</head>
<body>
	<h1>글자 관련 스타일 속성</h1>
	<hr>
	<p class="font1">글자 관련 스타일 속성-1(Font Style Attribute)</p>
	<p class="font2">글자 관련 스타일 속성-2(Font Style Attribute)</p>
	<p class="font3">글자 관련 스타일 속성-3(Font Style Attribute)</p>
	<p class="font4">글자 관련 스타일 속성-4(Font Style Attribute)</p>
	<p class="font5">글자 관련 스타일 속성-5(Font Style Attribute)</p>
</body>
</html>

🐧글자 간격 관련 스타일 속성

.gab {
	font-size: 30px;

📌letter-spacing : 문자 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등
.gab1 {
	letter-spacing: 0.1em;
}

📌word-spacing : 단어 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등
.gab2 {
	word-spacing: 0.5em;
}

📌line-height : 줄 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등
.gab3 {
	line-height: 50px
}

📌font 스타일 속성에서 [글자크기/줄간격] 속성값 사용 가능
.gab4 {
	font: 30px/60px "궁서";
}

📃12_font_gab.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.gab {
	font-size: 30px;
}
.gab1 {
	/* letter-spacing : 문자 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등 */
	letter-spacing: 0.1em;
}
.gab2 {
	/* word-spacing : 단어 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등 */
	word-spacing: 0.5em;
}
.gab3 {
	/* line-height : 줄 간격을 설정하기 위한 스타일 속성 - 단위 : px, em, % 등 */
	line-height: 50px
}
.gab4 {
	/* font 스타일 속성에서 [글자크기/줄간격] 속성값 사용 가능 */
	font: 30px/60px "궁서";
}
</style>
</head>
<body>
	<h1>글자 간격 관련 스타일 속성</h1>
	<hr>
	<p class="gab">Java Programming</p>
	<p class="gab gab1">Java Programming</p>
	<p class="gab gab2">Java Programming</p>
	<hr>
	<h2>HTML5<br>CSS3</h2>
	<h2 class="gab3">HTML5<br>CSS3</h2>
	<h2 class="gab4">HTML5<br>CSS3</h2>
</body>
</html>