반응형
|
스타일 시트 CSS 강좌 - font-weight 사용법 |
|
환경: Eclipse Mars |
글자의 크기는 숫자로 조절이 가능하지만 두께는 디테일 하게 조절할 수 없습니다. 폰트의 두께를 구분하는 font-weight 속성은 lighter, normal, bold, bolder 4가지 입니다. 하지만 두께는 두 가지가 있습니다.
▼ 글자의 두께를 조절하기 위한 구분은 총 4가지가 입니다. lighter, normal, bold, bolder 로 나눠 지는데 실제 적용은 두 가지로만 구분이 됩니다. 그러니까 lighter, normal 와 bold, bolder 은 쌍으로 동일한 크기를 가집니다. 아래 샘플에서처럼 차이가 없습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>font-weight</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#fontweight1 {font-size:20pt; font-weight: normal;}
#fontweight2 {font-size:20pt; font-weight: lighter;}
#fontweight3 {font-size:20pt; font-weight: bold;}
#fontweight4 {font-size:20pt; font-weight: bolder;}
</style>
</head>
<body>
<p id="fontweight1">CSS font-weight normal 적용 시키기 </p>
<p id="fontweight2">CSS font-weight lighter 적용 시키기 </p>
<p id="fontweight3">CSS font-weight bold 적용 시키기 </p>
<p id="fontweight4">CSS font-weight bolder 적용 시키기 </p>
</body>
</html>
▼ 이번에는 변수가 아닌 숫자로 두께를 변경해 보겠습니다. 숫자는 100 ~ 900 사이 입니다. 글자 두께를 조절하는 4개의 상수 값에 해당하는 숫자는 다음과 같습니다. lighter, normal, bold, bolder 는 차례대로 100, 400, 700, 900 입니다. 숫자도 상수와 마찬가지로 크게 두 가지 두께만 변동이 됩니다. lighter, normal 와 bold, bolder 는 변화 없이 동일하게 적용됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>font-weight</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#fontweight1 {font-weight: normal;}
#fontweight2 {font-weight: lighter;}
#fontweight3 {font-weight: bold;}
#fontweight4 {font-weight: bolder;}
#fontweight5 {font-weight: 100;}
#fontweight6 {font-weight: 400;}
#fontweight7 {font-weight: 700;}
#fontweight8 {font-weight: 900;}
</style>
</head>
<body>
<p id="fontweight1">CSS font-weight normal 적용 시키기 </p>
<p id="fontweight2">CSS font-weight lighter 적용 시키기 </p>
<p id="fontweight3">CSS font-weight bold 적용 시키기 </p>
<p id="fontweight4">CSS font-weight bolder 적용 시키기 </p>
<p id="fontweight5">CSS font-weight 100 적용 시키기 </p>
<p id="fontweight6">CSS font-weight 400 적용 시키기 </p>
<p id="fontweight7">CSS font-weight 700 적용 시키기 </p>
<p id="fontweight8">CSS font-weight 900 적용 시키기 </p>
</body>
</html>
반응형
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기 (0) | 2019.01.14 |
|---|---|
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
| HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기 (0) | 2018.03.20 |
| HTML 특수문자 출력, 공백을 적용할 수 있는 코드 (0) | 2018.03.02 |
| HTML 기본 구조 알아 보기 (0) | 2018.01.30 |
