Recent Posts

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

CSS / Reference / tab-size: Preserved Tabs and Tab-Stop Positions

Set tab stops for real tab characters and inspect their positions. Distinguish editor-generated spaces, whitespace collapsing, and visual wrapping.

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

CSS / Reference / backface-visibility: Front and Back Faces Under 3D Rotation

Choose whether a 3D-transformed back face is painted. Compare front and reverse states and account for accessible interaction when building a multi-face interface.

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

CSS / Reference / text-align: Text, Inline Content, and Block Alignment

Align text by physical or logical sides and distinguish it from centering a block. Inspect justification, final lines, and direction-sensitive layouts.

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

CSS / Reference / color: Foreground Colors, CurrentColor, and Contrast

Set foreground colors and reuse them through currentColor. Inspect inheritance, alpha compositing, readable contrast, and non-color state cues.

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

CSS / Reference / word-wrap: Legacy Alias and Min-Content Wrapping

Use overflow-wrap to manage long strings and understand the word-wrap alias. Compare anywhere with break-word in intrinsic sizing and flex or grid layouts.

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

CSS / Reference / word-break: Language-Sensitive Breaks Versus Emergency Wrapping

Choose word-breaking behavior for actual scripts and long strings. Compare normal, keep-all, and break-all, and distinguish deprecated break-word from overflow-wrap.

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

CSS / Reference / text-shadow: Glyph Shadows, Layers, and Contrast

Add text shadows without box-shadow-only syntax. Compare blur and layer order, preserve legibility, and avoid treating decoration as a contrast guarantee.

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

CSS / Reference / text-decoration: Decoration Propagation, Underlines, and Link Meaning

Style text decoration and compare parent-originated lines with child rules. Keep links identifiable and separate meaningful deletions from visual strike-through.

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

CSS / Reference / opacity: Group Transparency, Background Alpha, and Interaction

Fade an element and its children or make only its background translucent. Check stacking, contrast, keyboard focus, and the difference between transparency and hiding.

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

CSS / Reference / list-style-position: Inside and Outside Markers on Wrapped Items

Choose marker placement using wrapped text, list spacing, and actual child structure. Preserve list meaning and diagnose clipped outside markers.