웹 프로그래밍 css(24) webfont

😣오늘의 생각😣

이번 방학 때 무조건 웹프로그래밍 한번 공부하고 자바 스프링 들어본다... 화이팅!
velog에도 익숙해지고 css공부에도 조금 익숙해져서 다행이다.
그리고 이번학기 성적이 나왔는데 재수강이 있었음에도 성적이 괜찮게 나와서 엄청 기쁘다. 
근데 내 기준 성적이라 남들은 평범하다고 할 수도 있다... 헤헤

🔥오늘의 목표🔥

예전 공모전에서 예쁜 글꼴을 지정해서 썼었는데 
이 경우 사용자 시스템에 기본으로 설치가 되어 있어 사용하는 시스템 폰트가 아니라 
서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 웹폰트이다.
폰트에는 시스템 폰트, 이미지 폰트, 웹 폰프가 있다고 한다. 
이번 강의에서는 웹폰트에 대해서 알아보자.

📖폰트의 종류

• 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우
• 이미지 폰트 : 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우
  정확히 얘기하면 이미지 폰트는 폰트가 아니고 이미지이다.
• 웹 폰트 : 웹 폰트의 경우는 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 말한다.

📕 웹 폰트 (@font-face)

• 서버에 저장해서 제공하거나, 웹 경로를 통해 사용하거나, 사용자의 로컬환경에 글꼴을 다운로드받아 적용하는 경우

📖 웹 폰트 지정 방법

• @font-face를 사용해 지정한다.
• 다른 폰트들과 동일하게 font-fmaily를 사용한다.

@font-face{
    font-family:ng;
    src:url(NanumGothic.eot);
    src:local(※), url(NanumGothic.woff) format(‘woff’)
}

body{font-family:'나눔고딕', 'NanumGothic', ng}

📒 속성명

• font-family : 글꼴의 이름을 지정 (필수)
  실제 이름과 똑같이 지정할 필요는 없지만 유지보수를 위해서 동일하게 해주는 것이 좋다. (31자 이상은 적용되지 않는다.)

• scr : 다운로드 받을 글꼴의 경로 (필수)
  url과 local로 지정할 수 있다.
  - local() : 사용자의 로컬에 이미 설치된 폰트의 경로
  - url() : 다운로드할 웹폰트의 주소
  

• font-style : 글꼴의 스타일 지정 (선택)

• font-weight : 글꼴의 굵기 지정 (선택)

😎오늘의 느낀 점😎

css에서 @가 어떤 역할을 하는지 알아봐야겠다.