글꼴 관련 스타일

font-family

h1 {
  font-family: '맑은 고딕', 돋움, 굴림, sans-serif;
}

• 각 글꼴은 좌측부터 순서대로 우선순위로 적용됩니다.
• 좌측 글꼴이 없으면 그 우측의 글꼴이 적용됩니다.

형태

selector {
  font-family: <family-name1>, <family-name2>, ..., <generic-name>;
}

Generic font families

제너릭 폰트 패밀리란 직접 명기한 폰트들을 정상적으로 사용할 수 없을 때, 스타일시트 작성자(디자이너 혹은 개발자)의 의도를 살리기 위한 대체 수단입니다.

제너릭 폰트 패밀리의 이름은 따옴표로 감싸지 않습니다.

제너릭 폰트 패밀리는 폰트 패밀리 리스트의 마지막에 위치해야합니다.

종류

serif (세리프) 와 sans-serif (산세리프)

세리프는 타이포그래피에서 글자와 기호를 이루는 획의 일부 끝이 돌출된 형태를 가리킨다.
세리프가 있는 글꼴은 세리프체라 하며, 세리프가 없는 글꼴은 산세리프체로 부른다 - 위키백과

monospace (고정폭)

윗쪽은 가변폭 아래쪽이 고정폭.

얇은 문장부호를 눈으로 식별하기 용이하다 : () {} vs () {}
비슷한 문자열이 보다 명확하게 구분된다 : Il 0O vs Il 0O

cursive (필기체) 와 fantasy (장식용 글꼴)

글꼴 이름 규칙

!@#?와 같은 문장부호가 포함되어 있거나, 숫자로 시작하는 토큰이 포함된 경우에는 반드시 따옴표로 감싸야 합니다.

@font-face - 웹 폰트 사용하기

작성자의 의도에 따라 사용자 시스템에 없는 글꼴을 제공하기 위해 사용합니다.
폰트를 직접 첨부하거나 구글 폰트 처럼 웹 폰트 서비스를 통해 제공할 수 있습니다.

• local(...) 을 통해 로컬환경에서 동명의 폰트를 탐색합니다.
• url(...) 부분에 폰트의 내외부 url을 지정합니다.
• 좌측부터 순서대로 우선순위로 탐색합니다.
  • 탐색된 폰트가 있을 경우 그 폰트를 사용해 렌더링합니다.

기타 속성

구글 폰트

• 구글에서 제공하는 무료 웹폰트 서비스.
• 글꼴에는 저작권이 있기 때문에 함부로 사용하면 안됩니다.
• woff 와 woff2 포맷만 지원한다.

폰트 어썸

글자뿐 아니라 아이콘도 폰트 형태로 제공할 수 있습니다.

font-size 와 단위

h2 {
  font-size: 2em;
}

font-size는 글꼴 크기를 지정할 때 사용하는 속성입니다.

절대 길이 단위와 상대 길이 단위

절대 길이 단위

px

픽셀 단위입니다.

보통 디스플레이 상의 화소 하나를 의미하나, 프린터 같은 고해상도 화면에서는 1/96인치를 맞출 수 있도록 여러개의 화소 만큼의 크기를 나타냅니다.

상대 길이 단위

em, rem

em

• em은 '엠'이라고 읽으시면 됩니다.
• 현재 폰트 사이즈에 대해 상대적인 크기를 지정할 때 사용합니다.
• 폰트 사이즈는 부모 요소로부터 상속이 됩니다.
  • 부모로부터 20px이라는 폰트 사이즈가 상속 되었을 때, 2em은 40px로 계산이 됩니다.

rem

• rem은 Root em을 뜻합니다.
• em 의 경우 상대적인 크기를 나타내다보니 중첩된 요소에 대해 크기를 지정할 때 계산의 어려움이 생길 수 있습니다.
• 그래서 현재 요소의 폰트 사이즈가 아닌, 아예 Root.. 그러니까 가장 꼭대기 요소인 html 에 지정된 크기를 기준으로 상대적인 크기를 계산합니다.
• 브라우저의 경우 보통 기본 폰트 크기를 가지고 있으며 대개 16px로 설정되었습니다.
• html 요소에 명시적으로 폰트 크기가 지정이 되어있지 않은 경우, 브라우저의 기본 설정값을 기준으로 상대값을 계산합니다.
• 물론 브라우저 기본 폰트 크기는 사용자정의도 가능합니다.

vh & vw

뷰포트란 웹문서가 화면에 보여지는 영역을 의미합니다.

• vw는 viewport width 즉 뷰포트의 너비값을 기준으로 상대적인 크기를 계산합니다.
• vh는 viewport height 즉 뷰포트의 높이값을 기준으로 상대적인 크기를 계산합니다.

0-100 까지의 값을 가질 수 있으며 백분율로 나타냅니다.

뷰포트 크기의 변화에 따라 능동적으로 변화한다는 점이 특징입니다.

.container {
  width: 100vw; /* 뷰포트 전체 너비 */
  height: 100vh; /* 뷰포트 전체 높이  */
}

vmin & vmax

역시 뷰포트와 관련된 단위입니다.

vmin과 vmax 역시 뷰포트 크기의 변화에 따라 능동적으로 변화합니다.

• vmin은 vw와 vh 중 작은 값에 대해 백분율 만큼의 크기를 계산합니다.
• vmax는 반대로 vw와 vh 중 큰 값에 대해 백분율 만큼의 크기를 계산합니다.

font-weight & font-style & font-variant

font-weight

글꼴의 굵기를 설정합니다.

normal | bold 와 같이 지정된 키워드를 사용할 수 있고,
100~900 까지의 수치값을 지정할 수 있습니다.

수치값의 경우 400은 normal, 700은 bold에 해당합니다.

해당 폰트가 굵기값을 지원하지 않으면 명시적으로 굵기를 지정해도 굵게 나타나지 않습니다.

font-style

글자를 이탤릭체로 표시할 때 사용합니다.

h2 {
  font-style: italic | oblique | normal;
}

• italic과 oblique 모두 글자를 기울입니다.
• italic은 폰트 자체에서 제공하는 기울임꼴로 렌더링하고, oblique의 경우 본래의 모양새를 인위적으로 기울여서 렌더링한다고 합니다.