폰트 태그 지정하기 - Font Tag

div 혹은 p 태그 속에서 폰트 지정하기

div나 p 태그와 함께 폰트를 지정하는 경우가 많이 생기는데, 이때 폰트를 지정하는 방법을 알아보겠습니다.  사실 포스팅하는 글 전체에 대해 미리 폰트를 정해두고 쓰기 때문에 각 글자(단어, 문단 등)에 대해서 별도의 폰트를 지정하는 일은 그리 많지는 않습니다.  하지만 강조를 하고 싶다던지, 예쁘게 꾸미고 싶다던지 하는 경우엔 별도로 폰트를 지정하게 됩니다.

이럴때 폰트를 바꾸는 일은 흔히 알고 있는 것처럼 <font></font>를 이용하면 됩니다.

그렇다면 <div>이나 <p>와 함께 쓰려면 어떻게 할까요?

예를 들어 글 전체의 폰트와 다르게 요소(여기서는 div) 내에서 궁서체를 따로 적용하고 싶다면...

<태그 작성 예문>

음... 예를 들어야 하는데 무슨 문장을 써야할지 모르겠네요. ㅋㅋ

<div style="margin: 0 auto; border: 1px solid #999; padding: 5px 10px 5px 10px; font-family:궁서체; font-size:20px; color:red; font-weight:bold; font-style:italic; ">적용된 예문입니다.^^</div>

이렇게 작성하면 됩니다.

<적용된 상태>

음... 예를 들어야 하는데 무슨 문장을 써야할지 모르겠네요. ㅋㅋ

적용된 예문입니다.^^

이렇게 작성하면 됩니다.

자~~ 그런데 여기서 혹시 의문이 생기지는 않으셨나요? 위의 예문에서 font-family / font-size / font-weight 등의 속성을 따로 정했는데요.  이것을 한꺼번에 정해주는 방법은 없을까요?

<폰트 속성 한번에 적용하기>

font 속성을 한번에 지정하려면 아래와 같이 속성의 순서를 지켜야 합니다.

font: [font-style] [font-weight] [font-size]/[line-height] [font-family];

그럼 위의 예문을 이용해서 font를 한번에 적용해보겠습니다.

<div style="margin: 0 auto; border: 1px solid #999; padding: 5px 10px 5px 10px; font: italic bold 20px 궁서체; color:red; ">적용된 예문입니다.^^</div>

이렇게 순서를 지켜 작성하면 되구요.

적용된 예문입니다.^^

그럼 이렇게 적용됩니다.^^

이해가 좀 되셨나요?

font 속성별 내용에 대해서는 다음에 다시 자세히 살펴보도록 하겠습니다.^^