Category: CSS

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

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.

작은 화면과 큰 화면의 같은 웹페이지를 확대경으로 살펴보는 일러스트

CSS Tutorial / Check Responsive CSS with Width, Zoom, and Keyboard Tests

Follow a repeatable browser checklist, test breakpoint boundaries and longer text, and record layout problems before changing CSS rules.

같은 풍경이 여러 크기와 비율의 이미지·동영상 프레임에 맞춰 표시된 일러스트

CSS Tutorial / Responsive Images and Video: aspect-ratio and object-fit

Compare original image proportions, cover, contain, and object-position, then test responsive video sizing with a downloadable sample.

넓은 영역과 좁은 영역에서 카드 구성이 다르게 나타나는 일러스트

CSS Tutorial / CSS Container Queries for Reusable Components

Reuse one card in main content and sidebar containers, compare nearest and named containers, and verify the baseline layout when a query does not apply.

넓은 화면의 다열 카드와 좁은 화면의 한 열 카드 배치를 나란히 보여주는 일러스트

CSS Tutorial / CSS Media Queries and Content-Based Breakpoints

Calculate a practical layout breakpoint, compare overlapping min/max conditions, and test the widths immediately around each threshold.

넓은 화면과 작은 화면에서 같은 콘텐츠가 자연스럽게 폭을 바꾸는 일러스트

CSS Tutorial / Fluid CSS Layouts with min, max, and clamp

Build a bounded fluid layout, compare flexible sizes and spacing, and check that longer content fits without introducing horizontal page scrolling.

여러 반투명 카드가 앞뒤 층으로 겹쳐진 일러스트

CSS Tutorial / CSS z-index and Stacking Contexts

Inspect parent and child stacking contexts, compare real overlap examples, and distinguish stacking order from clipping problems.

일반 배치 위에 이동·겹침·고정된 요소들이 놓인 일러스트

CSS Tutorial / CSS position: relative, absolute, fixed, and sticky

Compare positioning modes in a complete example, identify containing blocks, and troubleshoot sticky limits and overlapping content.

상단·본문·측면 영역과 반복 카드가 격자에 배치된 일러스트

CSS Tutorial / CSS Grid: repeat, auto-fit, auto-fill, and Areas

Compare auto-fit and auto-fill, test minimum track sizes and long text, and use named areas without confusing visual placement with reading order.