웹 사이트 디자인에 필요한 그리드 시스템, 박스 모델, 폰트 단위, 툴 별 행간 차이, Proportional 폰트, Monospace 폰트

1. 그리드 시스템

Column(컬럼)
- 실제로 콘텐츠를 포함하는 부분
- 컬럼의 너비는 콘텐츠가 스크린 크기에 맞춰질 수 있도록 고정값이 아닌 백분율로 결정

Gutter(거터)
- 컬럼과 컬럼 사이의 공간
- 거터의 너비는 브레이크포인트(반응형에 의해 레이아웃이 바뀌는 포인트)에 따라 결정

반응형 웹에서는 일반적으로 12 컬럼 그리드 시스템을 사용
- 1, 2, 3, 4, 6 컬럼 등 모든 레이아웃을 대응할 수 있기 때문에 12 컬럼 그리드 시스템 사용

2. 박스 모델

3. 폰트 단위

폰트 단위
- 기본적인 디지털 미디어 디자인 시에는 PX(Pixel)를 사용
- 모바일 OS(안드로이드 OS, iOS)에 따라 SP(안드로이드), DP(안드로이드) 또는 PT(iOS) 사용
- 프론트엔드(Front-end) 개발 시 사용되는 단위는 더 다양함
  ex) em/rem, vw/vh, 기타
  1rem = 16px (rem은 배수로 지정해 반응형에 대응하도록 함)
  1vw는 전체 너비(width) 100%에서 1% 너비를 차지하는 폰트 크기(1/100th viewport width)
  1vh는 전체 높이(height) 100%에서 1% 높이를 차지하는 폰트 크기(1/100th viewport height)
PX(Pixel)
- 기본적인 디지털 미디어에서 사용
SP(Scale-Independent pixels)
- 안드로이드 OS에서 사용
- 텍스트의 크기를 지정하기 위해 사용하는 단위
- 확장 가능 픽셀
  → 가변 글꼴을 기준으로 한 픽셀로, 시스템 글꼴 설정에 따라 텍스트 크기가 변경됨
DP(Density-Independent pixel)
- 안드로이드 OS에서 사용
- 레이아웃 치수나 위치를 지정하기 위해 사용하는 단위
- 밀도 독립형 픽셀
  → 시스템 글꼴 설정과 상관없이 일정한 텍스트 크기 유지
PT(Point)
- iOS에서 사용

4. 툴 별 행간의 차이

폰트의 Content Area(콘텐츠 영역)에서 동일한 폰트 사이즈를 적용해도 글꼴에 따라 실제 높이값(글줄높이)은 다름
ex) 폰트 사이즈를 100px로 동일한 값을 주어도 실제 높이값은 115px, 97px, 164px로 모두 다름
따라서, 개발 작업 시에는 Line-height를 넣어주어 글줄높이가 동일하도록 만듦(전체 행간 동일)
Line-height는 Line-box의 높이를 설정하는 CSS 속성임
폰트의 Line-height 계산
- 웹 접근성 가이드(WCAG 2.1)에서는 글자 크기의 1.5배 이상을 권장
- 폰트 크기 * 1.75 = 보기 좋은 Line-height 크기

5. 자간, 글자사이, Tracking, Letter Spacing

6. Proportional 폰트, Monospace 폰트

Proportional 폰트
- 일반적으로 사용
- 영어가 가지고 있는 가로너비는 모두 다른데 이를 유지해 글자의 가로너비가 모두 다른 것
- 글자가 띄엄띄엄해보이지 않음
Monospace 폰트
- 영어 모든 글자의 가로너비를 동일하게 주는 것
- 글자가 띄엄띄엄해보이다가도 필요에 따라 균일해보이기도 함
  ex) 11:11:11 표기는 Monospace 폰트를 사용했을 때 보다 균일해보임
- 필요에 따라 적절히 사용

하루하루 차곡차곡