Recent Posts

크기와 굵기, 줄 간격이 다른 추상적인 글줄을 비교하는 일러스트

CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing

Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.

크기와 굵기, 줄 간격이 다른 추상적인 글줄을 비교하는 일러스트

CSS / Reference / text-indent: First-Line Indents and Hanging Paragraphs

Create first-line and hanging indents, distinguish them from paragraph padding, and check inheritance, writing direction, and narrow-screen clipping.

서로 다른 너비의 카드 두 개와 그 크기를 비교하는 안내선을 그린 일러스트

CSS / Reference / calc(): Calculate CSS Values and Understand Their Types

Combine percentages and lengths with calc(), inspect the actual parent width, and distinguish invalid expressions from newer typed arithmetic and special numeric results.

내용량에 맞게 서로 다른 폭을 가진 표의 열을 보여주는 일러스트

CSS / Reference / empty-cells: Show or Hide Empty Table Cells

Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.

같은 학습 사이트가 데스크톱·태블릿·휴대전화 화면에 맞춰 배치된 일러스트

CSS Tutorial / Build a Responsive Website with HTML and CSS

Create a complete two-file learning website with responsive cards and navigation, then test long text, keyboard focus, zoom, and reduced motion.

질서 있게 분리된 여러 스타일시트와 중첩된 구성 요소를 표현한 일러스트

CSS Tutorial / Organize CSS with Shared Styles, Nesting, and Layers

Refactor a small stylesheet without changing its layout, compare nesting and cascade layers, and check relative file paths and selector specificity.

하나의 색상·간격 팔레트가 여러 UI 카드에 재사용되는 모습을 나타낸 일러스트

CSS Tutorial / CSS Variables: var(), Scope, Inheritance, and Fallbacks

Declare and override custom properties, compare undefined and invalid values, and diagnose computed-value failures and inherited results.

초점 윤곽선이 뚜렷한 입력창과 체크 상태를 보여주는 폼 일러스트

CSS Tutorial / CSS Form States: Focus, Validation, disabled, and readonly

Compare form states, create accessible labels and error messages, and inspect which enabled, disabled, and read-only fields enter submitted form data.

움직이는 도형의 여러 단계와 멈춘 상태를 나란히 비교한 일러스트

CSS Tutorial / CSS Keyframe Animations, Fill Modes, and Pausing

Build a complete animation example, compare end states and delays, pause decorative motion, and check a prefers-reduced-motion alternative.

카드가 여러 중간 위치를 거쳐 부드럽게 이동하는 모습을 나타낸 일러스트

CSS Tutorial / CSS Transforms and Transitions

Compare transform order and origins, add hover and keyboard transitions, and test overflow and reduced-motion behavior.