#04 CSS강좌 html 폰트 크기, 스타일 적용

안녕하세요 공대남입니다. 오늘은 폰트 크기, 스타일 조절 및 적용 하는 방법에 대하여 다루어 보겠습니다.

폰트를 적용하는 방법은 후에 좀 더 자세하게 다루도록 하고 오늘은 이 두가지에 대해 배워볼게요.

먼저, 폰트 크기 조절하는 방법은 여러가지 있습니다. 다음과 같이 크게 3가지 있습니다.

1. px 단위로 설정하기

2. % 단위로 설정하기

3. em 단위로 설정하기

이렇게 크게 3가지로 나눌수 있습니다. 폰트 크기 (사이즈)를 조절하는 태그는 { font-size : 값; } 으로 나타내고,

상황에 맞게 편한 것으로써 값에는 1번,2번,3번의 형태중 하나를 넣어주시면 됩니다.

그럼 하나하나씩 구체적으로 보겠습니다.

---

1. px 단위로 설정하기

일단 px는 픽셀을 의미합니다. 한마디로 폰트의 사이즈를 픽셀로 정의하는 것이고 값으로 넣은 수치는 폰트의 픽셀 크기가 됩니다.

<p> 태그를 이용해 간단한 예시를 보겠습니다. 하나는 폰트 사이즈를 정의하고 하나는 기본 값으로 출력해보겠습니다.

폰트 사이즈를 적용하고자하는 단락에 id를 부여하여 각각 단락이 사이즈가 다르게 나오도록 코딩했습니다.

그럼 브라우저에는 다음과 같이 출력됩니다.

id가 a인 단락이 12픽셀의 크기로 출력되었습니다.

다음은 %단위로 폰트 크기를 적용하는 방법을 보겠습니다.

---

2. % 단위로 설정하기

폰트 크기는 퍼센트로도 설정할 수 있습니다. 여기서 퍼센트란 기준 폰트 크기 ( 기본값) 에 비하여 어느정도 인지 나타냅니다.

즉 200%라고 하면 기존폰트에 2배만큼 크게, 50%라고 하면 기존폰트에 2배만큼 작게가 되는겁니다.

앞서본 예시와 같이 코딩해보겠습니다.

위 코딩에서 아이디가 a 인 단락에다가 200% 만큼 적용했습니다. 

즉, 밑의 단락이 기본값이므로 밑의 단락보다 2배 큰 사이즈로 출력되게됩니다. 브라우저에는 다음과 같이 출력됩니다.

이와 같이 %를 활용해서 폰트 사이즈를 조절할 수 있습니다.

---

3. em 단위로 설정하기

em도 %와 비슷합니다. em 도 배수를 의미하고 1em은 기본값과 같은 크기를 나타냅니다.

즉 2.0em은 200%와 같은 의미를 갖게 됩니다. 앞선 예시들과 같은 예를 보겠습니다.

이번엔 아이디가 a인 단락에 3.0em 즉 기본값보다 3배큰 사이즈를 적용했습니다.

그러면 브라우저에는 다음과 같이 출력됩니다.

다음과 같이 출력됩니다. 폰트 크기 조절은 이까지 배워보겠습니다. 크게 3가지 있는데,

상황에 따라 편한걸 적절하게 사용하시면 됩니다. 폰트 사이즈 조절도 html 문서 작성에 빠질수 없기 때문에

잘 배워놓으시면 아주 유용하시게 사용가능 하실겁니다.

다음으로는 폰트 스타일에 관하여 배워보도록하겠습니다.

---

4. font-weight 속성

폰트 웨이트는 쉽게말해 폰트를 굵게, 진하게 나타내는겁니다. 강조하는 역할을 합니다. font-weight의 값은

normal, bold로 나타낼 수 있습니다. 즉, { font-weight : normal / bold ; } 이 둘중 하나로 적어주시면 되는겁니다.

normal 은 말그대로 보통이고 bold를 쓸 경우 굵게 출력됩니다. 예시를 보겠습니다.

다음과 같이 아이디를 a,b로 나눠 하나는 노말, 하나는 볼드로 설정했습니다. 그러면 브라우저에는 다음과 같이 출력됩니다.

하나는 보통, 하나는 굵게 출력되는걸 보실 수 있습니다.

다음은 font-style 에 대하여 보겠습니다.

---

5. font-style 속성

폰트 스타일은 이탤릭 텍스트로 설정한 것인지를 정하는겁니다. 이탤릭 텍스트를 한마디로 기울임을 적용한 텍스트입니다.

폰트 스타일 값에는 normal, italic, oblique 세가지 값이 있는데 oblique는 거의 italic과 같아서 동일하다고 보시면됩니다.

그러면 위 예제와 같이 하나는 노말 하나는 이탤릭으로 설정해보겠습니다.

아이디를 둘로 나눠 같은 태그에 각각 적용시켜보았습니다. 브라우저에는 다음과 같이 출력됩니다.

다음과 같이 텍스트가 기울여진 채로 출력됩니다.

-

이번에 폰트의 크기, 스타일 조절에 대하여 배워봤습니다. 다음번에는 텍스트 스타일에 관련되서 알아보겠습니다.

유용한 정보가 되었는지 모르겠습니다. 다음번에는 더 나은 강좌로 돌아오겠습니다. 감사합니다.