Load 28

Writing on code & systems.

Alla11yagileaiarchitectureauthenticationawsbmadbrowsercacheclaudecompilercomponentcontextcookiecsrfcssdata-modelingdata-structuredatabasedesign-systemdeveloper-toolsdevelopmentdnsdxeffecteffect-tsenterpriseentireeslintfiberfido2functionfunctional programmingfunctional-programminggenericgitgraphqlgrpci18njavascriptloadingmathnext.jsnitrooauthoptimizationpasskeyperformancepnpmprotobufqueryqwikreactreconciliationredisrefactoringreflectionremixrenderingrscrustschemasecurityserverside-projectspec-drivenssrstreamingtanstacktanstack-querytestingtokiotype-systemtypescriptunicodeunjsuxvalidationvanilla-extractwebauthnwebsocketxssyarnzod
css4 postsโœ•
2026
Latest
2026.05.12ยท12 min read

๋ชจ๋ฐ”์ผ ๋””์ž์ธ ์‹œ์Šคํ…œ์—์„œ CSS๋ฅผ ์˜๋„์˜ ์–ธ์–ด๋กœ ๋‹ค๋ฃจ๊ธฐ

CSS๋Š” ์‹œ๊ฐ์  ๊ฒฐ๊ณผ๋งŒ ๋งž์œผ๋ฉด ํ†ต๊ณผํ•˜๋Š” ์ฝ”๋“œ์ฒ˜๋Ÿผ ๋‹ค๋ค„์ง€๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. padding: 12px 16px์€ ๋ถ„๋ช…ํžˆ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ์ฝ”๋“œ๋Š” "์™œ 12px์ธ์ง€", "์™œ ์ขŒ์šฐ์™€ ์ƒํ•˜๊ฐ€ ๋‹ค๋ฅธ์ง€", "๋‹ค๋ฅธ ์–ธ์–ด๊ฐ€ ๋“ค์–ด์˜ค๋ฉด ๊ดœ์ฐฎ์€์ง€"์— ๋Œ€ํ•ด ์•„๋ฌด๊ฒƒ๋„ ๋งํ•˜์ง€โ€ฆ

02.02

CSS word-break ์ •๋ฆฌ

ํ•œ๊ธ€์€ ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„์— ๋งž์ถฐ ์•Œ์•„์„œ ์ค„๋ฐ”๊ฟˆ๋˜๋Š”๋ฐ, ์˜๋ฌธ์ด๋‚˜ ์ˆซ์ž๋Š” ์…€์„ ๋šซ๊ณ  ๋‚˜๊ฐ‘๋‹ˆ๋‹ค. ์ด๊ฑด CSS๊ฐ€ ์•„๋‹ˆ๋ผ ์œ ๋‹ˆ์ฝ”๋“œ ๋ช…์„ธ์—์„œ ๋น„๋กฏ๋œ ๋™์ž‘์ž…๋‹ˆ๋‹ค.

css4 min
โ†’
01.31

line-height๋Š” ์ง์ˆ˜์—ฌ์•ผ ํ•œ๋‹ค

design system์—์„œ font size๋ณ„ line-height๋ฅผ ์„ค์ •ํ•  ๋•Œ ์ง์ˆ˜ ๊ฐ’์„ ์จ์•ผ ํ•˜๋Š” ์ด์œ ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

cssdesign-system3 min
โ†’
2025
01.10

Vanilla Extract

Vanilla Extract์„ ์‚ฌ์šฉํ•ด๋ณธ ๊ณ„๊ธฐ๋Š” Next.js์˜ ์•ฑ ๋ผ์šฐํ„ฐ ํ™˜๊ฒฝ์—์„œ ๊ธฐ์กด CSS in js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์˜ ํ•œ๊ณ„๋ฅผ ๋Š๊ผˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

vanilla-extractcss5 min
โ†’
๋ชจ๋“  ๊ธ€์„ ์ฝ์œผ์…จ์Šต๋‹ˆ๋‹ค โœฆ