'CSS에 글씨체 적용하기'에 해당되는 글 1건

 

이 번 강좌에서는 배운 글씨체, 크기, 형태, 굵기, 칼라 등등 적용해봅니다

그렇게 하기 위해서 여러개의 요소를 넣는 법을 알아야 하는데요 방법은 간단합니다.
태그{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>

 

위의 소스를 에디터로 테스트 해보면 이탤릭 효과를 볼 수 있습니다.

 

 

 

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,