Recent Posts

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

CSS / Reference / line-height: Unitless Ratios, Inherited Lengths, and Line Boxes

Choose scalable line-height values and compare ratio inheritance with fixed lengths. Separate line boxes from paragraph margins and test larger child text.

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

CSS / Reference / clip: Understand Legacy Clip and Migrate to Clip-Path

Read legacy rect coordinates and compare them with clip-path inset distances. Keep layout sizing and clipping separate when migrating existing CSS.

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

CSS / Reference / caption-side: Place a Table Caption Above or Below

Place captions visually while keeping them first in the table’s source structure. Match caption text to the data and check alignment, width, and writing direction.

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

CSS / Reference / box-sizing: Content and Border Boxes, Including Small-Size Limits

Calculate content-box and border-box sizes, including margins and the minimum content-size limit. Apply resets deliberately and check external components.

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

CSS / Reference / box-shadow: Offsets, Blur, Spread, and Inset Shadows

Build box shadows from offsets, blur, and spread, then inspect clipping and layering. Distinguish box geometry from glyph or transparent-image shadows.

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

CSS / Reference / border-style: Border Patterns, Side Order, and Hidden Conflicts

Choose border patterns for each side and inspect shorthand resets. Compare none with hidden in collapsed tables and account for zero computed border widths.

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

CSS / Reference / border-spacing: Separate Cell Gaps and Collapsed Borders

Set horizontal and vertical gaps in separate-border tables. Distinguish cell padding, zero spacing, collapsed borders, and browser default styles.

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

CSS / Reference / overflow: Visible Overflow, Scrolling, Hidden, and Clip

Choose clipping and scrolling behavior with appropriate size constraints. Compare hidden with clip and inspect axis interactions and flex minimum sizes.

로그 전달 단계를 사이에 둔 두 데이터베이스의 복제 개념도

MariaDB Tutorial / Understand Replication, Lag, Errors, and Failover

Prepare a two-server local Compose lab and interpret replication status, lag and errors. Observe apply-thread pause/resume behavior and distinguish replication from backup and controlled failover.

설정 조절 패널과 데이터베이스를 연결한 개념도

MariaDB Tutorial / Inspect Server Settings, SQL Modes, Time Zones, and Logs

Distinguish option files, GLOBAL defaults, and SESSION settings. Reproduce a SQL-mode error, compare time-zone behavior of TIMESTAMP and DATETIME, inspect log conditions, and restore changes deliberately.