{"id":1347,"date":"2026-06-26T13:43:36","date_gmt":"2026-06-26T13:43:36","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=1347"},"modified":"2026-06-26T13:43:36","modified_gmt":"2026-06-26T13:43:36","slug":"layout","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/layout\/","title":{"rendered":"\ub808\uc774\uc544\uc6c3\uacfc \uad6c\uc870"},"content":{"rendered":"

2\uc7a5: \ub808\uc774\uc544\uc6c3\uacfc \uad6c\uc870<\/h1>\n

v4 \uc124\uce58 \ubc0f \uae30\ubcf8 \uc124\uc815<\/h2>\n
\n

v4 \ubcc0\uacbd\uc0ac\ud56d<\/strong> \u2014 tailwind.config.js<\/code> + @tailwind<\/code> \uc9c0\uc2dc\uc5b4 \ubc29\uc2dd\uc774 CSS \uae30\ubc18 \uc124\uc815<\/strong>\uc73c\ub85c \uc804\ud658\ub410\ub2e4.<\/p>\n<\/blockquote>\n

# Vite \uae30\ubc18 \ud504\ub85c\uc81d\ud2b8 (\uad8c\uc7a5)\nnpm install tailwindcss @tailwindcss\/vite\n<\/code><\/pre>\n
\/\/ vite.config.js\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss\/vite'\n\nexport default defineConfig({\n  plugins: [tailwindcss()],\n})\n<\/code><\/pre>\n
\/* src\/index.css \u2014 \ub2e8 \ud55c \uc904\ub85c \uc804\uccb4 \uc784\ud3ec\ud2b8 *\/\n@import "tailwindcss";\n<\/code><\/pre>\n
v3\uc5d0\uc11c \uc4f0\ub358 @tailwind base; @tailwind components; @tailwind utilities;<\/code> \uc138 \uc904\uc740 \ub354 \uc774\uc0c1 \ud544\uc694 \uc5c6\ub2e4.<\/p>\n
\n
2-1. Flexbox\ub85c \ub808\uc774\uc544\uc6c3 \uad6c\ucd95\ud558\uae30<\/h2>\n
Flexbox\ub294 1\ucc28\uc6d0 \ub808\uc774\uc544\uc6c3(\uac00\ub85c \ub610\ub294 \uc138\ub85c \ud55c \ubc29\ud5a5)\uc744 \ub2e4\ub8e8\ub294 CSS \ubaa8\ub378\uc774\ub2e4.
\nTailwind v4\uc5d0\uc11c Flexbox \uc720\ud2f8\ub9ac\ud2f0 \uc790\uccb4\ub294 v3\uc640 \uac70\uc758 \ub3d9\uc77c\ud558\uc9c0\ub9cc, \uc0c8\ub85c\uc6b4 \ub17c\ub9ac \uc18d\uc131(logical properties)<\/strong> \uc720\ud2f8\ub9ac\ud2f0\uac00 \ucd94\uac00\ub410\ub2e4.<\/p>\n
\ud50c\ub809\uc2a4 \ucee8\ud14c\uc774\ub108 \ud65c\uc131\ud654<\/h3>\n
\n<div class="flex">...<\/div>\n\n\n<div class="inline-flex">...<\/div>\n<\/code><\/pre>\n
\ud50c\ub809\uc2a4 \ubc29\ud5a5 (flex-direction)<\/h3>\n\n\n\n\n\n\n\n\n
\ud074\ub798\uc2a4<\/th>\nCSS \uac12<\/th>\n<\/tr>\n<\/thead>\n
flex-row<\/code><\/td>\nflex-direction: row<\/code> (\uae30\ubcf8)<\/td>\n<\/tr>\n
flex-row-reverse<\/code><\/td>\nflex-direction: row-reverse<\/code><\/td>\n<\/tr>\n
flex-col<\/code><\/td>\nflex-direction: column<\/code><\/td>\n<\/tr>\n
flex-col-reverse<\/code><\/td>\nflex-direction: column-reverse<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n<div class="flex flex-row gap-4">\n  <div>A<\/div>\n  <div>B<\/div>\n  <div>C<\/div>\n<\/div>\n\n\n<div class="flex flex-col gap-4">\n  <div>A<\/div>\n  <div>B<\/div>\n<\/div>\n<\/code><\/pre>\n
\ud50c\ub809\uc2a4 \uc904\ubc14\uafc8 (flex-wrap)<\/h3>\n
\n<div class="flex flex-wrap gap-2">\n  <div class="w-32">item 1<\/div>\n  <div class="w-32">item 2<\/div>\n  <div class="w-32">item 3<\/div>\n<\/div>\n\n\n<div class="flex flex-nowrap">...<\/div>\n<\/code><\/pre>\n
\uc8fc\ucd95 \uc815\ub82c (justify-content)<\/h3>\n\n\n\n\n\n\n\n\n\n\n
\ud074\ub798\uc2a4<\/th>\n\uc815\ub82c \ubc29\uc2dd<\/th>\n<\/tr>\n<\/thead>\n
justify-start<\/code><\/td>\n\uc2dc\uc791\uc810<\/td>\n<\/tr>\n
justify-end<\/code><\/td>\n\ub05d\uc810<\/td>\n<\/tr>\n
justify-center<\/code><\/td>\n\uc911\uc559<\/td>\n<\/tr>\n
justify-between<\/code><\/td>\n\uc591 \ub05d \ubd84\uc0b0, \uc544\uc774\ud15c \uc0ac\uc774 \uacf5\uac04<\/td>\n<\/tr>\n
justify-around<\/code><\/td>\n\uc544\uc774\ud15c \uc591\uce21 \ub3d9\uc77c \uacf5\uac04<\/td>\n<\/tr>\n
justify-evenly<\/code><\/td>\n\ubaa8\ub4e0 \uacf5\uac04 \uade0\ub4f1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n<nav class="flex justify-between items-center px-6 py-4">\n  <span class="font-bold">Logo<\/span>\n  <ul class="flex gap-6">\n    <li>Home<\/li>\n    <li>About<\/li>\n    <li>Contact<\/li>\n  <\/ul>\n<\/nav>\n<\/code><\/pre>\n
\uad50\ucc28\ucd95 \uc815\ub82c (align-items)<\/h3>\n\n\n\n\n\n\n\n\n\n
\ud074\ub798\uc2a4<\/th>\nCSS \uac12<\/th>\n<\/tr>\n<\/thead>\n
items-start<\/code><\/td>\nalign-items: flex-start<\/code><\/td>\n<\/tr>\n
items-end<\/code><\/td>\nalign-items: flex-end<\/code><\/td>\n<\/tr>\n
items-center<\/code><\/td>\nalign-items: center<\/code><\/td>\n<\/tr>\n
items-baseline<\/code><\/td>\nalign-items: baseline<\/code><\/td>\n<\/tr>\n
items-stretch<\/code><\/td>\nalign-items: stretch<\/code> (\uae30\ubcf8)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n<div class="flex items-center gap-2">\n  <svg class="size-5">...<\/svg>\n  <span>\ud14d\uc2a4\ud2b8<\/span>\n<\/div>\n<\/code><\/pre>\n
\n
v4 \uc2e0\uaddc<\/strong> \u2014 size-5<\/code> \ub294 w-5 h-5<\/code> \ub97c \ub3d9\uc2dc\uc5d0 \uc801\uc6a9\ud558\ub294 \ucd95\uc57d \uc720\ud2f8\ub9ac\ud2f0\ub2e4. v4\uc5d0\uc11c \ucd94\uac00\ub410\ub2e4.<\/p>\n<\/blockquote>\n
\uac1c\ubcc4 \uc544\uc774\ud15c \uc815\ub82c (align-self)<\/h3>\n
<div class="flex items-start h-32">\n  <div>\uae30\ubcf8(start)<\/div>\n  <div class="self-center">\ub098\ub9cc \uac00\uc6b4\ub370<\/div>\n  <div class="self-end">\ub098\ub9cc \ub05d<\/div>\n<\/div>\n<\/code><\/pre>\n
\ud50c\ub809\uc2a4 \ud655\uc7a5\u00b7\ucd95\uc18c<\/h3>\n
\n<div class="flex">\n  <div class="w-32">\uace0\uc815<\/div>\n  <div class="flex-1">\ub098\uba38\uc9c0 \uacf5\uac04 \uc804\ubd80<\/div>\n  <div class="w-32">\uace0\uc815<\/div>\n<\/div>\n\n\n<div class="flex">\n  <div class="grow">\ud655\uc7a5\ub428<\/div>\n  <div class="shrink-0">\ucd95\uc18c \uc548 \ub428<\/div>\n<\/div>\n<\/code><\/pre>\n
\uc2e4\uc804 \ud328\ud134<\/h3>\n
\uce74\ub4dc \uadf8\ub9ac\ub4dc (Flex wrap)<\/strong><\/p>\n
<div class="flex flex-wrap gap-4">\n  <div class="w-64 rounded-xl bg-white shadow p-4">\uce74\ub4dc 1<\/div>\n  <div class="w-64 rounded-xl bg-white shadow p-4">\uce74\ub4dc 2<\/div>\n  <div class="w-64 rounded-xl bg-white shadow p-4">\uce74\ub4dc 3<\/div>\n<\/div>\n<\/code><\/pre>\n
\ud654\uba74 \uc804\uccb4 \ub192\uc774 \ub808\uc774\uc544\uc6c3 (sticky footer)<\/strong><\/p>\n
<div class="flex flex-col min-h-screen">\n  <header class="bg-gray-900 text-white p-4">\ud5e4\ub354<\/header>\n  <main class="flex-1 p-6">\ucee8\ud150\uce20<\/main>\n  <footer class="bg-gray-100 p-4 text-center">\ud478\ud130<\/footer>\n<\/div>\n<\/code><\/pre>\n
\uc218\ud3c9\u00b7\uc218\uc9c1 \uc911\uc559 \uc815\ub82c<\/strong><\/p>\n
<div class="flex items-center justify-center min-h-screen">\n  <div class="bg-white rounded-2xl shadow-xl p-8">\n    \uac00\uc6b4\ub370 \uc815\ub82c\ub41c \uce74\ub4dc\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
\n
2-2. Grid \uc2dc\uc2a4\ud15c<\/h2>\n
CSS Grid\ub294 2\ucc28\uc6d0 \ub808\uc774\uc544\uc6c3(\uac00\ub85c + \uc138\ub85c \ub3d9\uc2dc)\uc744 \ub2e4\ub8ec\ub2e4.
\nTailwind v4\uc5d0\uc11c Grid \uc720\ud2f8\ub9ac\ud2f0\ub294 v3\uc640 \ub3d9\uc77c\ud558\uace0, \uc784\uc758 \uac12(arbitrary value)<\/strong> \uc9c0\uc6d0\uc774 \ub354 \uc790\uc5f0\uc2a4\ub7ec\uc6cc\uc84c\ub2e4.<\/p>\n
\uae30\ubcf8 \uadf8\ub9ac\ub4dc<\/h3>\n
\n<div class="grid grid-cols-3 gap-4">\n  <div>1<\/div>\n  <div>2<\/div>\n  <div>3<\/div>\n  <div>4<\/div>\n  <div>5<\/div>\n  <div>6<\/div>\n<\/div>\n<\/code><\/pre>\n
\uc5f4\u00b7\ud589 \ubcd1\ud569 (span)<\/h3>\n
<div class="grid grid-cols-4 gap-4">\n  \n  <div class="col-span-2 bg-blue-100">\ub113\uc740 \uc544\uc774\ud15c<\/div>\n  <div>\ubcf4\ud1b5<\/div>\n  <div>\ubcf4\ud1b5<\/div>\n\n  \n  <div class="col-start-2 col-end-4">2\uc5f4\uc5d0\uc11c 4\uc5f4\uae4c\uc9c0<\/div>\n<\/div>\n<\/code><\/pre>\n
\ud589 \uc81c\uc5b4<\/h3>\n
<div class="grid grid-rows-3 grid-flow-col gap-4 h-48">\n  <div>A<\/div>\n  <div>B<\/div>\n  <div>C<\/div>\n  <div>D<\/div>\n<\/div>\n<\/code><\/pre>\n
\ubc18\uc751\ud615 \uadf8\ub9ac\ub4dc<\/h3>\n
\n<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">\n  <div class="bg-white rounded-xl shadow p-4">\uce74\ub4dc A<\/div>\n  <div class="bg-white rounded-xl shadow p-4">\uce74\ub4dc B<\/div>\n  <div class="bg-white rounded-xl shadow p-4">\uce74\ub4dc C<\/div>\n  <div class="bg-white rounded-xl shadow p-4">\uce74\ub4dc D<\/div>\n  <div class="bg-white rounded-xl shadow p-4">\uce74\ub4dc E<\/div>\n  <div class="bg-white rounded-xl shadow p-4">\uce74\ub4dc F<\/div>\n<\/div>\n<\/code><\/pre>\n
auto-fit \/ auto-fill (\uc784\uc758 \uac12)<\/h3>\n
grid-cols-[repeat(auto-fit,minmax(200px,1fr))]<\/code> \ud328\ud134\uc73c\ub85c \uc5f4 \uc218\ub97c \uc790\ub3d9 \uacc4\uc0b0\ud560 \uc218 \uc788\ub2e4.<\/p>\n
\n<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">\n  <div class="bg-slate-100 p-4 rounded">\uc544\uc774\ud15c<\/div>\n  <div class="bg-slate-100 p-4 rounded">\uc544\uc774\ud15c<\/div>\n  <div class="bg-slate-100 p-4 rounded">\uc544\uc774\ud15c<\/div>\n<\/div>\n<\/code><\/pre>\n
\ubcf5\uc7a1\ud55c \ub808\uc774\uc544\uc6c3 (named areas)<\/h3>\n
\n<div class="grid gap-4\n  [grid-template-areas:'header_header''sidebar_main''footer_footer']\n  grid-cols-[200px_1fr]">\n  <header class="[grid-area:header] bg-gray-800 text-white p-4">\ud5e4\ub354<\/header>\n  <aside class="[grid-area:sidebar] bg-gray-100 p-4">\uc0ac\uc774\ub4dc\ubc14<\/aside>\n  <main class="[grid-area:main] p-4">\uba54\uc778 \ucf58\ud150\uce20<\/main>\n  <footer class="[grid-area:footer] bg-gray-200 p-4">\ud478\ud130<\/footer>\n<\/div>\n<\/code><\/pre>\n
\n
2-3. \uac04\uaca9\uacfc \uc815\ub82c<\/h2>\n
\uc5ec\ubc31(margin)\uacfc \ud328\ub529(padding)<\/h3>\n
\ud328\ud134: {\uc18d\uc131}{\ubc29\ud5a5}-{\ud06c\uae30}<\/code><\/p>\n\n\n\n\n\n\n
\uc18d\uc131<\/th>\n\ubc29\ud5a5<\/th>\n\uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n
m<\/code> (margin)<\/td>\n\uc5c6\uc74c(\uc804\uccb4), t<\/code> r<\/code> b<\/code> l<\/code> x<\/code> y<\/code><\/td>\nm-4<\/code>, mt-2<\/code>, mx-auto<\/code><\/td>\n<\/tr>\n
p<\/code> (padding)<\/td>\n\uc5c6\uc74c(\uc804\uccb4), t<\/code> r<\/code> b<\/code> l<\/code> x<\/code> y<\/code><\/td>\np-6<\/code>, py-3<\/code>, px-4<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\ud06c\uae30 \ucc99\ub3c4: \uae30\ubcf8 \ub2e8\uc704\ub294 0.25rem<\/code> (= 4px). 4<\/code> = 1rem<\/code> = 16px<\/code>.<\/p>\n
\n<div class="p-6 m-4 rounded-2xl shadow-md bg-white">\n  <h2 class="mb-2 text-xl font-bold">\uc81c\ubaa9<\/h2>\n  <p class="mb-4 text-gray-600">\uc124\uba85 \ud14d\uc2a4\ud2b8<\/p>\n  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">\n    \ubc84\ud2bc\n  <\/button>\n<\/div>\n<\/code><\/pre>\n
\n
v4 \uc2e0\uaddc<\/strong> \u2014 \ub17c\ub9ac \uc18d\uc131 \uc720\ud2f8\ub9ac\ud2f0\uac00 \ucd94\uac00\ub410\ub2e4. ms-*<\/code> (margin-inline-start), me-*<\/code> (margin-inline-end), ps-*<\/code>, pe-*<\/code> \u2014 RTL \ub808\uc774\uc544\uc6c3 \uc9c0\uc6d0\uc5d0 \ud65c\uc6a9\ud55c\ub2e4.<\/p>\n<\/blockquote>\n
\n<div dir="rtl">\n  <div class="ms-4"><\/div>\n<\/div>\n<\/code><\/pre>\n
\uc790\uc2dd \uc694\uc18c \uac04 \uac04\uaca9 (space-between)<\/h3>\n
space-x-*<\/code>, space-y-*<\/code> \ub294 \uc790\uc2dd \uc694\uc18c \uc0ac\uc774\uc5d0 margin\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n
\n<ul class="space-y-2">\n  <li class="bg-gray-50 p-3 rounded">\ud56d\ubaa9 1<\/li>\n  <li class="bg-gray-50 p-3 rounded">\ud56d\ubaa9 2<\/li>\n  <li class="bg-gray-50 p-3 rounded">\ud56d\ubaa9 3<\/li>\n<\/ul>\n<\/code><\/pre>\n
\n
gap vs space<\/strong>: Grid\u00b7Flex \ucee8\ud14c\uc774\ub108\uc5d0\uc11c\ub294 gap-*<\/code> \uc0ac\uc6a9\uc744 \uad8c\uc7a5\ud55c\ub2e4. space-*<\/code>\ub294 \ub2e8\uc21c \ube14\ub85d \uc694\uc18c\uc5d0 \uc720\uc6a9\ud558\ub2e4.<\/p>\n<\/blockquote>\n
\ud14d\uc2a4\ud2b8 \uc815\ub82c<\/h3>\n
<p class="text-left">\uc67c\ucabd \uc815\ub82c<\/p>\n<p class="text-center">\uac00\uc6b4\ub370 \uc815\ub82c<\/p>\n<p class="text-right">\uc624\ub978\ucabd \uc815\ub82c<\/p>\n<p class="text-justify">\uc591\ucabd \uc815\ub82c<\/p>\n<\/code><\/pre>\n
\uc704\uce58(position)\uc640 z-index<\/h3>\n
\n<div class="relative w-16 h-16">\n  <img src="..." class="rounded-full size-16" alt="avatar" \/>\n  <span class="absolute -top-1 -right-1 size-5 bg-green-400 rounded-full border-2 border-white"><\/span>\n<\/div>\n\n\n<header class="fixed top-0 left-0 right-0 z-50 bg-white shadow">\n  ...\n<\/header>\n\n\n<aside class="sticky top-4 h-fit">...<\/aside>\n<\/code><\/pre>\n
\uc624\ubc84\ud50c\ub85c\uc6b0<\/h3>\n
\n<ul class="h-64 overflow-y-auto border rounded">\n  <li class="p-2">\ud56d\ubaa9...<\/li>\n<\/ul>\n\n\n<p class="overflow-hidden text-ellipsis whitespace-nowrap max-w-xs">\n  \uc544\uc8fc \uae34 \ud14d\uc2a4\ud2b8\uac00 \uc5ec\uae30\uc5d0 \ub4e4\uc5b4\uac11\ub2c8\ub2e4...\n<\/p>\n<\/code><\/pre>\n
\n
2-4. v4 \ub808\uc774\uc544\uc6c3 \uad00\ub828 \uc2e0\uaddc \uc720\ud2f8\ub9ac\ud2f0<\/h2>\n
size-* (width + height \ub3d9\uc2dc \uc124\uc815)<\/h3>\n
\n\n<div class="size-10 bg-blue-500 rounded-full"><\/div>\n<img class="size-16 rounded-full object-cover" src="..." alt="..." \/>\n<\/code><\/pre>\n
inset-* (top\/right\/bottom\/left \ub3d9\uc2dc \uc124\uc815)<\/h3>\n
\n<div class="fixed inset-0 bg-black\/50"><\/div>\n\n\n<div class="absolute inset-x-0 bottom-0">\ud558\ub2e8 \uc804\uccb4 \ub108\ube44 \ubc14<\/div>\n<\/code><\/pre>\n
field-sizing (v4 \uc2e0\uaddc)<\/h3>\n
\ud14d\uc2a4\ud2b8 \uc785\ub825\ucc3d\uc774 \ub0b4\uc6a9\uc5d0 \ub530\ub77c \uc790\ub3d9 \ud06c\uae30 \uc870\uc808\ub41c\ub2e4.<\/p>\n
<textarea class="field-sizing-content border rounded p-2 resize-none">\n  \ub0b4\uc6a9\uc5d0 \ub9de\uac8c \ub192\uc774 \uc790\ub3d9 \uc870\uc808\n<\/textarea>\n<\/code><\/pre>\n
\n
2-5. v4 \ucee4\uc2a4\ud140 \uc2a4\ud398\uc774\uc2f1<\/h2>\n
v3\uc5d0\uc11c\ub294 tailwind.config.js<\/code>\uc5d0\uc11c \uc124\uc815\ud588\ub2e4. v4\uc5d0\uc11c\ub294 CSS \ud30c\uc77c \ub0b4 @theme<\/code>\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n
\/* src\/index.css *\/\n@import "tailwindcss";\n\n@theme {\n  --spacing-18: 4.5rem;   \/* p-18, m-18, w-18 \ub4f1 \uc790\ub3d9 \uc0dd\uc131 *\/\n  --spacing-88: 22rem;\n  --spacing-128: 32rem;\n}\n<\/code><\/pre>\n
\n<div class="p-18 w-128">...<\/div>\n<\/code><\/pre>\n
\n
\n
\ud575\uc2ec \uc815\ub9ac<\/strong><\/p>\n