css에서 가장 많이 사용하는 속성중 하나인 font관련 속성들에 대해 알아보자.


폰트(font)

텍스트(서체)를 관장하는 옵션으로 글씨체, 컬러, 사이즈 등등 여러가지 폰트에 관련된 옵션을 설정할 수 있다.

▶ 크기 단위(font-size)

폰트의 사이즈는 ‘font-size‘옵션으로 지정해준다. 폰트의 크기를 결정하는 단위는 실제로는 여러가지가 있지만, 크게 세 가지를 주로 쓰며 폰트에만 국한된 사안은 아니다.

  • px

    : 고정값

  • em

    : 가변적 (old)

  • rem

    : 가변적 (new)

사용자가 브라우저의 글꼴 크기를 수정했을 때 px단위는 바뀌지 않고, rem은 같이 바뀌게 된다. 따라서, cascading의 철학적인 이유로 특정상황이 아닌경우에는 rem을 자주 쓴다.

최근에 자주 쓰이는 단위로는 vw, vh가 있다. 이는 여러 기기마다 브라우저의 사이즈가 다르기 때문에 반응형에 특화된 단위이며 vw는 브라우저 width의 1/100 단위이고, vh는 브라우저 height의 1/100단위 이다.



▶ 컬러(color)

영역의 폰트 컬러색을 지정하는 옵션은 ‘color‘이고, 이를 표현하는 방식에는 크게 세 가지 방식이 있다.

1. name

특정 컬러같은 경우에는 해당 색에 대한 이름을 가지고 있다.
이를 통해 color옵션의 값을 이름으로 지정이 가능하다.
ex ) color:red / color:tomato / color:powderblue … 등등

2. hex

color는 기본적으로 rgb를 표현하는데 이를 16진수 두 자리마다 끊어서 6자리의 16진수로 rgb값을 지정할 수 있다. 또한 16진수로 color를 표현하기 위해서는 앞에 #을붙여서 표기한다. ex ) color:#ff6347

3. rgb

0~255까지의 정수로 3개의 rgb를 지정할 수 있다. 정수표기를 위해서는 rgb()괄호 안에 3개의 인자로 지정하여준다.
ex ) rgb(255, 99, 71)
( w3schools에서 기본적인 사용법을 확인할 수 있다. https://www.w3schools.com/css/css_colors.asp )



▶ 정렬 ( text-align )

텍스트를 정렬하고자 할 때는 “text-align“속성을 사용한다.
text-align으로 지정할 수 있는 값은 “left”, “center”, “right” / “justipy”는 단어와 단어사이를 균등하게 해주는 값이다.
ex ) text-align:center;



▶ 글꼴 ( font-family )

글꼴을 지정하고자 할때는 “font-family“속성을 사용한다.
ex ) font-family: arial, verdana, “Helvetica Neue”;

해당 글꼴이 사용자의 컴퓨터에 깔려있지 않을 수 있기 때문에 콤마를 구분자로 여러개를 지정해 줄 수 있으며, 공백이 들어가는 폰트는 큰따옴표로 묶어준다.

또한 font-family값의 마지막에 추가로 설정해 줄 수 있는 값이 있다.

  • monospace : 글자와 글자사이 폭을 일정하게 해준다.
  • serif : 글자의 장식?을 추가로 달아준다.
  • sans serif : 글자의 장식을 없애준다. ex ) font-family: arial, verdana, serif;



▶ 폰트 굵기 ( font-weight )

<b>태그를 이용하여 텍스트의 굵기를 굵게 할 수도 있지만,
font-weight를 bold로 지정해도 폰트가 굵어진다.



▶ 줄간격 ( line-height )

‘line-height‘옵션을 통해 폰트 사이의 줄 간격을 수치형으로 지정할 수 있다.
해당 옵션을 설정한 영역내에서는 vertical-align옵션을 통해 수직정렬 또한 가능해진다.



▶ 동시설정(font)

위의 모든 옵션들을 font라는 옵션으로 한번에 설정이 가능하다.
설정은 기본적으로 “font : (font-weight) (font-size)/(line-height) (font-family)“형식으로 한다.
하지만 이 외의 더 많은 속성들을 지정해 줄 수도 있다.
ex ) font: bold 5rem/2 arial, vernana, serif;



▶ 웹 폰트 ( Web Font )

웹에서 제공되는 폰트(글꼴)을 의미한다.기본적으로 영어는 폰트의 용량이 크지 않지만, 한글의 경우에는 용량이 크다.

  • 구글 웹 폰트 ( https://fonts.google.com/?authuser=1 )
    구글에서는 무료로 웹 폰트를 제공해주고 있다. 사용하고자 하는 폰트들의 +버튼을 클릭하고 밑에 Families Seleted버튼을 클릭한 후 EMBED탭에서 코드를 카피하여 가져다 쓰면된다. ( 추가 후 font-family속성으로 지정 )
  • 웹 폰트의 장점
    이름으로 지정하는 font-family의 경우 사용자측에 해당 폰트가 존재하지 않다면 사용할 수 없지만, 웹 폰트의 경우 링크를 통해 브라우저가 자동으로 다운받아오기 때문에 사용자측에 해당 폰트가 기존에 없었어도 사용이 가능하다!

▶ 웹 폰트 만들기

폰트 파일을 가지고 있다면, font-family속성값을 만들 수 있다.

  • https://web-font-generator.com/ 접속 후 가지고 있는 폰트파일을 업로드 하고 “Download Package”를 하게되면 하나의 폴더를 생성해 주는데, 해당 디렉토리를 서버에 올려두고 해당 디렉토리안에 있는 html파일 예시를 이용하여 적용시킬 수 있다.