이 번 강좌에서는 배운 글씨체, 크기, 형태, 굵기, 칼라 등등 적용해봅니다
그렇게 하기 위해서 여러개의 요소를 넣는 법을 알아야 하는데요 방법은 간단합니다.
태그{font-family:값;line-height:20px;letter-spacing:30px;font-style:italic;text-decoration:underline}
위와 같이 {속성:값;속성:값;속성:값} 으로 진행 하시면 됩니다. 속성과 값을 입력하고 구분은 ;(세미콜론)을 사용하구요.^^
그럼 테스트 해봅시다.
텍스트에 스타일 적용
이번에는 텍스트에 스타일시트를 적용해 보도록 할게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
</head>
<body>
<p> hello world </p>
</body>
</html>
기본 소스는 위의 소스로 테스트를 할거구요.
글씨체 적용하기
글씨체를 적용할려면 font-family 속성을 이용 하면 됩니다.
셀럭터{font-family:글씨체1,글씨체2,글씨체3}
위의 css에서 셀럭터는 앞에서 설명한 .클래스명, 태그명 을 말합니다.
그리고 font-family는 글씨체를 적용하는 속성이구요, 값이 글씨체1,2,3가 있는 이유는 우선순위 입니다. 첫번재 글씨체가 없으면 그 다음 글씨체 적용 또 없다면 그 다음 글씨체 적용 이런 순입니다.
그럼 한번 적용해 보도록 합시다.
p{font-family:verdana}
위의 소스를 적용 하면 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-family:verdana}
</style>
</head>
<body>
<p> hello world </p>
</body>
</html>
위의 소스를 웹에디터나 본인의 에디터에 적용을 시켜보세요. 그리고 해당 CSS 를 없애서 차이를 비교해 보시면 됩니다.
글씨 크기 적용하기
이번에는 글씨 크기를 적용해 봅시다.
p{font-size:값}
위와 같이 적용을 합니다. 그리고 단위는 pt 와 px 가 있습니다. 더 있는데 일단 이것만 알아두도록 합시다.
pt는 절대값이고 px는 상대값 입니다. pt는 절대값이기 때문에 거의 쓰지 않고 px를 대부분 사용 합니다.
그 이유는 모니터 해상도에 따라서 글씨 크기가 적절히 변하고 모바일로 띄워도 맞게끔 크기를 변경해 줍니다.
그러므로 px(상대값)를 많이 사용 합니다.
p{font-size:12px}
적용해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-size:12px}
</style>
</head>
<body>
<p> hello world </p>
</body>
</html>
위의 소스를 테스트 해보시고 px값을 변경해서 테스트 해 봅시다.
글씨 형태 지정하기
p{font-style:값}
값에는 italic 와 normal 이 있으며 normal은 italic효과를 주지 않는 것이구요 italic를 주면 이탤릭 효과가 적용 됩니다.
font-style은 이탤릭 효과를 줄 때 사용 합니다.
그럼 예제로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-style:italic}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
위의 소스를 에디터로 테스트 해보면 이탤릭 효과를 볼 수 있습니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| CSS에서의 색상 설정 (0) | 2017.11.18 |
|---|---|
| CSS 텍스트에 굵기를 지정 (0) | 2017.11.15 |
| CSS에 텍스트에 굵기를 지정 (0) | 2017.11.15 |
| CSS에 텍스트(글씨)를 꾸미는 방법에 (0) | 2017.11.15 |
| [CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용 (0) | 2017.11.14 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.