#typography

Frontend › Accessibility

CSS는 표현만 맡고 의미는 HTML이 진다. 소스 순서와 화면 순서를 맞추고, 숨김은 모두에게 숨길지(display:none·hidden) 화면에서만 숨길지(visually-hidden) 구분한다. 400% 확대에서도 가로 스크롤 없이 읽히게(1.4.10 Reflow), 사용자가 줄·글자 간격을 넓혀도 깨지지 않게(1.4.12 Text Spacing) 만들고, 글꼴·정렬·글줄 길이로 읽기 부담을 줄인다.

• #accessibility
• #frontend
• #css
• #responsive

Frontend › CSS

유동 그리드·유동 미디어·미디어 쿼리라는 세 요소에서 출발해 뷰포트 메타 태그, 미디어 쿼리와 브레이크포인트, 부모 크기에 반응하는 컨테이너 쿼리와 미디어 쿼리 없는 레이아웃, 모바일 퍼스트, 해상도와 기기 픽셀 비율, 상대 단위로 화면 크기에 맞추는 법. rem과 :lang()으로 언어마다 글자 크기를 바꾸는 다국어 반응형 타이포그래피까지 다룬다.

• #css
• #frontend
• #mobile

Frontend › CSS

사람이 화면의 글을 읽는 방식에서 출발해 글줄 길이(45~85자, ch 단위), 글자 크기와 줄 간격의 균형, x-height를 맞추는 font-size-adjust, 자간·단어 간격과 가변 폰트, 양쪽 정렬과 하이픈, 대비와 다크 모드, 그리고 @font-face로 웹폰트를 선언하는 법까지.

• #css
• #design
• #a11y
• #frontend

Frontend › CSS

같은 font-size라도 글꼴마다 높이가 다른 이유(em 사각형과 ascent·descent 지표), 인라인 요소의 두 높이(content-area와 line-height가 만드는 가상 영역), 줄 상자(line box)의 높이가 정해지는 방식, line-height: normal의 실제 값, vertical-align이 줄 상자를 키우는 원리와 이미지 아래 틈 같은 증상의 원인.

• #frontend
• #css
• #layout

Frontend › UI Design

화면에 질서를 주는 세 가지 수치 체계. 단위·거터·칼럼·필드로 이뤄진 칼럼 그리드와 3·4·6단으로 나뉘는 12단 그리드, 모든 크기·간격을 8의 배수로 맞추는 8pt 그리드(하드·소프트 방식, 4pt 기준선), 본문 줄 높이를 기준으로 세로 간격을 맞추는 수직 리듬과 모듈러 스케일을 정리하고, CSS Grid·rlh·text-box-trim·디자인 토큰으로 구현하는 법을 붙였다.

• #design
• #layout
• #design-system
• #css

Frontend › UI Design

웹은 크기가 고정되지 않은 매체다. 화면 폭 대응은 고정폭·리퀴드·적응형을 거쳐 반응형으로 왔고, 지금은 플렉스박스·그리드·컨테이너 쿼리로 콘텐츠에 맞게 늘고 줄어드는 본질의 웹 디자인(Intrinsic Web Design)이 기본이다. 페이지(매크로)와 컴포넌트(마이크로) 레이아웃을 나눠 설계하고, 인쇄의 단락·문자 스타일은 CSS의 블록·인라인 규칙으로, 칼럼 그리드와 8pt 간격 체계는 CSS 그리드와 디자인 토큰으로 이어지며, 이미지 위 텍스트는 대비·위치·심도로 읽히게 한다.

• #design
• #layout
• #css
• #frontend

Frontend › Web

웹 폰트는 레이아웃이 필요로 할 때에야 요청되는 늦게 발견되는 자원이다. preload나 인라인 @font-face로 일찍 발견되게 하고, 자체 호스팅·WOFF2·서브셋으로 빨리 받고, font-display로 글자가 숨거나 밀리는 방식을 고른다.

• #performance
• #css
• #web
• #frontend

Life & Learning

3의 법칙, 정렬, 자간, 굵기로 하는 강조, 키워드 중심 구성 등 발표 자료를 깔끔하게 만드는 원칙과 상업적 이용 가능한 무료 폰트를 구하는 곳.

• #design
• #presentation
• #portfolio
• #resources