|
스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 |
|
환경: Eclipse Mars |
웹 페이지는 대부분 텍스트와 이미지로 이루어져 있습니다. 그래서 텍스트를 꾸미는 font 관련 속성들은 많이 사용할 수 밖에 없습니다. 자신만의 스타일을 살려 웹 페이지를 구성하고 싶다면 필히 속성에 대해서 알아야겠죠. 이번에는 텍스트의 글꼴, 글자 크기, 굵기, 색상, 모양 등을 지정하는 속성에 대해 알아 보겠습니다.
▼ 글꼴 관련 속성은 다음과 같습니다. 상세 내용은 개별 속성에서 다루기로 하고 어떻게 사용하는 지와 적용되는 형태에 대해 간략하게 알아 보겠습니다.
l font-family : 글꼴 종류를 지정합니다. 여러 글꼴을 동시에 지정할 수 있으며 순서대로 적용이 됩니다. 앞에 있는 폰트가 PC 에 설치되어 있지 않으면 다음으로 넘어갑니다.
l font-size : 다양한 단위로 글자 크기를 지정할 수 있으며 상수 값으로 지정할 수도 있습니다. 상수값은 xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger 이 있습니다.
l font-style : 글자 모양을 나타내며 normal, italic, oblique 가 있습니다.
l font-variant : 작은 크기의 대문자로 지정합니다.
l font-weight : 글자의 굵기를 지정합니다. 100~900 사이 값을 넣을 수 있으며 상수로는 normal, bold, bolder, lighter 이 있습니다.
l color : 접두어 font 가 없지만 글자색을 지정하는 속성입니다.
▼ 아래 샘플은 4개의 div 태그에 font 속성들을 적용했습니다. 첫 번째 font-family 는 입력한 3개의 폰트 중 앞에서 부터 차례대로 시스템에 설치된 것 부터 먼저 적용됩니다. 두 번째 font-size 는 브라우저에 기본으로 설정된 폰트의 150% 크기로 적용합니다. 세 번째 font-variant 에서 small-caps 는 알파벳을 대문자로 바꾸고 작게 표현합니다. 그림을 보면 쉽게 이해가 갈 겁니다. 네 번째 font-size 의 ex 단위는 폰트 사이즈의 소문자 “x” 높이를 1로 했을 때 크기 입니다. 현재 시스템 폰트 12pt 의 소문자 x 크기 입니다. font-weight 의 bold 처리로 글자를 굵게 표시했습니다. 그리고 폰트의 색상은 font-color 이 아니라 color 입니다. 헷갈리지 마세요.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
border: solid;
border-color: black;
background-color: #4e539a;
margin-top: 5px;
padding: 5px;
color: white;
height: 50px;
width: 500px;
}
#div1{
font-family: arial, 바탕체, serif;
}
#div2{
font-size: 150%;
font-style: italic;
}
#div3{
font-variant: small-caps;
font-style: oblique;
}
#div4{
font-size: 1ex;
font-weight: bord;
color: red;
}
</style>
</head>
<body>
<div id="div1">폰트 속성 : font-family</div>
<div id="div2">폰트 속성 : font-size, font-style</div>
<div id="div3">폰트 속성 : font-variant, font-style</div>
<div id="div4">폰트 속성 : color, font-weight</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
|---|---|
| 스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
| 스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
| 스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
| 스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
