글꼴 스타일링

기본폰트 5가지이다

 

폰트 적용을 할땐 속성을 font-family: 폰트이름 을 쓴다

 <!-- 글꼴 스타일 -->

    <h1 style="font-family: fantasy">fantasy 폰트</h1>

하지만 기본폰트 5가지의 예제와 조금 다른 것을 볼 수 있다

이것은 브라우저마다 폰트가 조금씩 다르다고 한다

하지만 정의(특징은) 모두 같다

각종 폰트의 예제이다

Serif, Sans-serif, Monospace 까지는 글꼴이 다 비슷하다

Cursive, Fantasy 글꼴 은 확연히 차이가 나는걸 볼 수 있다

 

 

 

클래스 선택자를 사용해 font-family 속성을 입힐때 맨 첫번째로 나오는 속성을 사용해보자

 

 <style>

        .font1 {

            font-family:'Courier New', Courier, monospace ;    

          }

    </style>

이것은 

현재 브라우저에 Courier New 폰트가 있다면, Courier New 가 적용되고,

      없다면, Courier가 적용되고, 이것도 없다면 각 브라우저가 가지고 있는

      monospace 폰트가 적용

이라는 뜻이다

 

폰트 굵기

<!-- 폰트 굵기 -->

    <!-- nomal, bold, bolder, 100~900까지 값이 있다 -->

    <!-- normal : 보통 폰트, 숫자값 400과 동일 -->

    <p style="font-weight: normal">font-weight: nomal</p>

    <p style="font-weight: 400">font-weight: 400</p>

    <!-- bold: 굵은 폰트, 숫자값 700과 동일 -->

    <p style="font-weight: bold">font-weight: bold</p>

    <p style="font-weight: 700">font-weight: 700</p>

굵기는 font-weight 속성을 적용한다

nomal = 보통 폰트 숫자값 400과 동일

bold = 굵은 폰트, 숫자값 700과 동일으로

위의 사진을 보면 글꼴이 똑같은걸 볼 수 있다

 

 

bolder 와 lighter 속성은 상대적인 값이다

<!-- bolder : 부모를 기준으로 상대적인 값 -->

    <div style="font-weight: 100">

      <p style="font-weight: bolder">부모가 100~300 일때, bolder는 400</p>

    </div>

    <div style="font-weight: 400">

      <p style="font-weight: bolder">부모가 400~500일때, bolder는 700</p>

    </div>

    <div style="font-weight: 600">

      <p style="font-weight: bolder">

        부모가 600이상 일때, bolder는 무조건 900

      </p>

    </div>

 

이렇게 <div>라는 부모 안에 <p>라는 자식이 있는데

부모가 가진 font-weight 값이 정해져 있다

그러면 부모가 가진 값에 따라 bolder는 폰트 굵기가 정해진다

부모가 100~300 이면 bolder는 400의 값이 되고

부모가 400~500 이면 bolder는 700의 값이 되고

부모가 600 이상이면 bolder는 무조건 900의 값을 갖는다

 

<!-- lighter : 부모를 기준으로 상대적인 값 -->

    <div style="font-weight: 100">

      <p style="font-weight: lighter">부모가 100~500일때,lighter는 100</p>

    </div>

    <div style="font-weight: 600">

      <p style="font-weight: lighter">부모가 600~700일때,lighter는 400</p>

    </div>

    <div style="font-weight: 800">

      <p style="font-weight: lighter">부모가 800~900일때,lighter는 700</p>

    </div>

이라는 부모를 기준으로 상대적인 값을 갖는다

 

폰트 크기

<!-- 폰트 크기 -->

    <!-- 절대 값 :  xx-small, x-small, small, medium, x-large, xx-large -->

    <!-- 상대 값 : larger, smaller -->

    <!-- 길이 값 : em(부모 요소의 폰트 크기를 기준), rem(루트 요소의 폰트 크기를 기준), px, pt(1pt=0.72인치) -->

    <!-- 퍼센트(백분율) 값 -->

    <!-- 대부분의 브라우저는 폰트 크기의 기본값으로 12pt=16px=1em=100% -->

 

폰트 크기는 font-size 속성을 적용한다

   <p style="font-size: 10px">font-size : 10px</p>

    <p style="font-size: 8pt">font-size : 8pt</p>

10px 단위와 8pt 단위로 크기를 정해보았다

그러면 둘다 똑같은 크기인걸 볼 수 있다

 

대부분의 브라우저는 기본값을 가지고 있다

 

 <!-- 대부분의 브라우저는 폰트 크기의 기본값으로 12pt=16px=1em=100% -->

어느 단위가 제일 많이 쓴다는것은 없다

팀이나 프로젝트 마다 다 다르게 사용한다는걸 알고있자

폰트 크기 비교 표이다 참고만 하자

 

요기서 em 단위를 알아보자

em단위는 부모 요소의 폰트 크기를 기준으로 한다

 

    <!-- 부모는 18px -->

    <!-- 자식은 0.5em ==> 9px -->

 

부모는 18px 이고 자식은 0.5 em 이면 

18의 절반인 9가 되는 것이다

위의 폰트 크기 비교 표에서 처럼

1em = 100%이다

0.5em=50% 이고

그럼 0.467em 은 46.7%를 뜻한다 백분율로 이해하면 쉽다

 

부모가 없는 em단위를 써보자

  <p style="font-size: 1em">font-size : 1em</p>

   <!-- 대부분의 브라우저는 폰트 크기의 기본값으로 12pt=16px=1em=100% -->

이기 때문에 그러면 이것은 브라우저의 기본값일 것이다

 

 

이번에 부모를 만들어 보자

 <div style="font-size: 20px">

      <p style="font-size: 1em">20px</p>

      <p style="font-size: 0.5em">10px</p>

    </div>

<div> 가 부모이고 폰트 사이즈는 20px로 지정이 되어있다

그 안에 자식 <p>태그 2개는 하나는 1em단위 다른 하나는 0.5em단위로 지정했다

그러면 1em은 = 100%니까 20px 그대로 적용이 될 것이고

0.5em 은 =50%니까 10px로 적용 된다

다음으로 rem 단위를 알아보자

rem 단위는 루트 요소의 폰트 크기를 기준으로 한다

<div style="font-size: 20px">

      <p style="font-size: 1rem">16px</p>

    </div>

<div> 가 부모이고 폰트 사이즈는 20px 이면

20에 루트가 적용되어 1rem 은 16px가 적용된다

 

 

실무에서 em, rem 단위를 쓰는곳도 많다고 한다

예를 들어 한 홈페이지가 스마트폰에서도 제공이 된다고 가정하자

<h1>제목입니다</h1>

기본값으로 정해주는 폰트 크기로 제목을 만들면

PC에서는 전혀 문제되지 않는 크기로 나온다

하지만 모바일로 홈페이지를 들어갔는데 너무 크게 나오고 

화면의 많은 공간을 차지하면 되겠는가?

 

개발자가 절대값 또는 길이값(px,pt) 으로 정해놓으면

모바일로 갔을때 그 값들이 바뀌지 않는다

 

이런 상황에서 em이나 rem을 쓴다고 한다

<h1 style="font-size: 0.5em">제목입니다</h1>

이렇게 0.5em 이라는 값을 주면

PC에서는 기본 폰트 값이 12pt니까

6pt로 나올것이다

 

이와 같이

모바일 에서도 기본 폰트값이 정해져있을때

em단위를 통해 그 화면에 맞는 폰트크기를 지정할 수 있다고 한다

 

그래서 em, rem은 실무에서 자주 쓰인다고 한다