|
스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 |
|
환경: Eclipse Mars |
CSS 에서 폰트 사이즈를 조절하려면 font-size 속성을 사용해야 합니다. <font> 태그의 size 속성과 동일한 효과를 얻을 수 있습니다. font-size 에 쓰이는 단위는 아주 다양합니다. pt, px, em, % 뿐만 아니라 상수 값도 있습니다. color 속성처럼 16진수 코드를 컬러 명으로 정의한 것처럼 숫자 대신 상수 값으로 대체가 가능합니다.
▼ 먼저 % 단위로 사이즈를 조절하는 방법입니다. 샘플에서 100%, 200%, 250% 적용했는데 100% 가 기본 Default 폰트 사이즈입니다. % 에는 마이너스가 없기 때문에 기본 폰트 사이즈에서 100% 이하를 입력하면 줄어 듭니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#fontsize1 {font-size: 100%;}
#fontsize2 {font-size: 200%;}
#fontsize3 {font-size: 250%;}
</style>
</head>
<body>
<p id="fontsize1">CSS font-size 100% 적용 시키기 </p>
<p id="fontsize2">CSS font-size 200% 적용 시키기 </p>
<p id="fontsize3">CSS font-size 250% 적용 시키기 </p>
</body>
</html>
▼ 다음은 %, pt, px 단위로 비교해 보았습니다. 사이즈 기준은 % 로 하겠습니다. 기본 폰트 크기인 100% 는 12pt 와 16px 입니다. 브라우저에서 사용자가 폰크 크기를 변경하지 않으면 기본 폰트인 12pt 를 적용합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#fontsize1 {font-size: 100%;}
#fontsize2 {font-size: 12pt;}
#fontsize3 {font-size: 16px;}
</style>
</head>
<body>
<p id="fontsize1">CSS font-size 100% 적용 시키기 </p>
<p id="fontsize2">CSS font-size 10pt 적용 시키기 </p>
<p id="fontsize3">CSS font-size 12px 적용 시키기 </p>
</body>
</html>
▼ 아래 소스는 숫자 대신 쓰이는 상수를 사용하는 방법입니다. 상수란 값이 변하지 않는 변수를 말합니다. 특정한 숫자를 사용자가 알기 쉽게 의미있는 문자로 만든 것입니다. 분류는 small, large, medium 으로 나눠 지며 접두사로 x 와 xx 를 사용해서 좀 더 세분화 합니다. 일일이 변수들을 다 외울 수 없기 때문에 잘 쓰이지는 않습니다. 가장 많이 사용하는 것이 pt 단위죠. 아마 개발자들 사이에서는 가장 익숙할 겁니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#fontsize1 {font-size: 100%;}
#fontsize2 {font-size: 12pt;}
#fontsize3 {font-size: 16px;}
#fontsize4 {font-size:xx-small;}
#fontsize5 {font-size:8pt;}
#fontsize6 {font-size:10pt;}
#fontsize7 {font-size:12pt;}
#fontsize8 {font-size:14pt;}
#fontsize9 {font-size:18pt;}
#fontsize10{font-size:24pt;}
#fontsize11{font-size:10pter;}
#fontsize12{font-size:14ptr;}
#fontsize13{font-size:initial;}
</style>
</head>
<body>
<p id="fontsize1">CSS font-size 100% 적용 시키기 </p>
<p id="fontsize2">CSS font-size 12pt 적용 시키기 </p>
<p id="fontsize3">CSS font-size 12px 적용 시키기 </p>
<hr/>
<p id="fontsize4">CSS font-size xx-small 적용 시키기 </p>
<p id="fontsize5">CSS font-size x-small 적용 시키기 </p>
<p id="fontsize6">CSS font-size small 적용 시키기 </p>
<p id="fontsize7">CSS font-size medium 적용 시키기 </p>
<p id="fontsize8">CSS font-size large 적용 시키기 </p>
<p id="fontsize9">CSS font-size x-large 적용 시키기 </p>
<p id="fontsize10">CSS font-size xx-large 적용 시키기 </p>
<p id="fontsize11">CSS font-size smaller 적용 시키기 </p>
<p id="fontsize12">CSS font-size larger 적용 시키기 </p>
<p id="fontsize13">CSS font-size initial 적용 시키기 </p>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
|---|---|
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
| 스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기 (0) | 2018.01.23 |
| 스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법 (0) | 2018.01.13 |
