Recent Posts

한 컨테이너 안에 여러 항목이 가로 한 줄로 놓인 Flexbox 일러스트

CSS Tutorial / Flexbox Basics: Containers, Items, and Axes

Create a Flexbox container, distinguish direct children from nested content, and compare row, column, and their main and cross axes.

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

CSS Tutorial / CSS Tables: Borders, Sizing, and table-layout

Style semantic tables, compare automatic and fixed layout with long content, and provide horizontal scrolling when a table needs more space.

얇은 테두리, 둥근 모서리, 그림자가 있는 카드 세 개를 비교한 일러스트

CSS Tutorial / CSS Borders, Rounded Corners, and Shadows

Build cards with borders and shadows, compare circles and ellipses, and inspect how ancestor overflow changes visible shadows.

컨테이너를 넘는 콘텐츠와 스크롤 안에 담긴 콘텐츠를 대비한 일러스트

CSS Tutorial / CSS Overflow, Long Text Wrapping, and Ellipsis

Compare scrolling, clipping, long-word wrapping, and single-line ellipsis, including keyboard access and minimum-size issues in layout containers.

가로로 이어지는 인라인 항목과 세로로 쌓인 블록을 비교한 추상적인 일러스트

CSS Tutorial / CSS display: Block, Inline, inline-block, and Hiding

Compare block and inline sizing, replaced elements such as images, and the layout and interaction differences between common hiding techniques.

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

CSS Tutorial / CSS Width, Height, min/max Limits, and box-sizing

Compare content-box and border-box sizing, percentage heights, fluid width limits, and the consequences of fixed heights for growing text.

콘텐츠, 안쪽 여백, 테두리, 바깥 여백을 네 겹의 직사각형으로 표현한 일러스트

CSS Tutorial / The CSS Box Model: Content, Padding, Border, and Margin

Measure the four box areas, compare padding shorthand and vertical margin collapse, and inspect the resulting dimensions in DevTools.

색상 면과 반복·확대된 배경 무늬를 비교한 추상적인 일러스트

CSS Tutorial / CSS Background Colors and Images: cover and contain

Create and load a local background image, compare repetition, cover, contain, and position, and diagnose image-path and cropping problems.

링크의 여러 상태와 키보드 초점 테두리를 색으로 구분한 일러스트

CSS Tutorial / CSS Link States and Visible Keyboard Focus

Compare link states in a working multi-file example, inspect keyboard focus, and understand browser privacy restrictions on visited-link styles.

문단과 목록의 간격과 정렬 차이를 추상적인 선과 점으로 나타낸 일러스트

CSS Tutorial / CSS Paragraph and List Styling

Style paragraphs and ordered or unordered lists, compare inside and outside markers, and check spacing and wrapped text on narrow screens.