diff --git a/_posts/2023-02-18-nextjs-tutorial-day1.md b/_posts/2023-02-18-nextjs-tutorial-day1.md
index 50d46ef78..134161961 100644
--- a/_posts/2023-02-18-nextjs-tutorial-day1.md
+++ b/_posts/2023-02-18-nextjs-tutorial-day1.md
@@ -90,13 +90,11 @@ module.exports = {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },      
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [],
 }
diff --git a/_posts/2023-07-10-sveltekit-tailwindcss-day1.md b/_posts/2023-07-10-sveltekit-tailwindcss-day1.md
index b35509700..3ecf09028 100644
--- a/_posts/2023-07-10-sveltekit-tailwindcss-day1.md
+++ b/_posts/2023-07-10-sveltekit-tailwindcss-day1.md
@@ -43,13 +43,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [],
 };
diff --git a/_posts/2023-09-06-sveltekit-supabase-tutorial-day1.md b/_posts/2023-09-06-sveltekit-supabase-tutorial-day1.md
index 33f846925..35458a0ea 100644
--- a/_posts/2023-09-06-sveltekit-supabase-tutorial-day1.md
+++ b/_posts/2023-09-06-sveltekit-supabase-tutorial-day1.md
@@ -66,13 +66,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [],
 };
diff --git a/_posts/2023-09-10-sveltekit-supabase-tutorial-day2.md b/_posts/2023-09-10-sveltekit-supabase-tutorial-day2.md
index 60bedadb1..14479f3ef 100644
--- a/_posts/2023-09-10-sveltekit-supabase-tutorial-day2.md
+++ b/_posts/2023-09-10-sveltekit-supabase-tutorial-day2.md
@@ -67,13 +67,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],        
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [],
 };
diff --git a/_posts/2023-09-12-sveltekit-supabase-tutorial-day3.md b/_posts/2023-09-12-sveltekit-supabase-tutorial-day3.md
index 067cbdeba..7865cc34c 100644
--- a/_posts/2023-09-12-sveltekit-supabase-tutorial-day3.md
+++ b/_posts/2023-09-12-sveltekit-supabase-tutorial-day3.md
@@ -82,13 +82,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],        
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [],
 };
diff --git a/_posts/2023-10-08-svelte-components-tutorial-day2.md b/_posts/2023-10-08-svelte-components-tutorial-day2.md
index 4f97c565c..fa09e2639 100644
--- a/_posts/2023-10-08-svelte-components-tutorial-day2.md
+++ b/_posts/2023-10-08-svelte-components-tutorial-day2.md
@@ -55,13 +55,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],        
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [],
 };
diff --git a/_posts/2023-11-01-svelte-components-tutorial-day3.md b/_posts/2023-11-01-svelte-components-tutorial-day3.md
index c7ec31cfa..6cf609c07 100644
--- a/_posts/2023-11-01-svelte-components-tutorial-day3.md
+++ b/_posts/2023-11-01-svelte-components-tutorial-day3.md
@@ -76,12 +76,12 @@ export default {
   plugins: [require('flowbite/plugin'), require('flowbite-typography')],
   darkMode: 'class',
   theme: {
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],        
+    },
     extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],        
-      },
       colors: {
         // flowbite-svelte
         primary: {
diff --git a/_posts/2023-11-08-svelte-components-tutorial-day4.md b/_posts/2023-11-08-svelte-components-tutorial-day4.md
index 19fdb5bd9..4657c2f9c 100644
--- a/_posts/2023-11-08-svelte-components-tutorial-day4.md
+++ b/_posts/2023-11-08-svelte-components-tutorial-day4.md
@@ -72,13 +72,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
   daisyui: {
diff --git a/_posts/2023-11-09-svelte-components-tutorial-day5.md b/_posts/2023-11-09-svelte-components-tutorial-day5.md
index 4c44a2bd9..0c0872c1b 100644
--- a/_posts/2023-11-09-svelte-components-tutorial-day5.md
+++ b/_posts/2023-11-09-svelte-components-tutorial-day5.md
@@ -89,13 +89,11 @@ export default {
     './node_modules/@skeletonlabs/skeleton/**/*.{html,js,svelte,ts}',
   ],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [
     forms,
diff --git a/_posts/2023-12-01-sveltekit-tailwindcss-day2.md b/_posts/2023-12-01-sveltekit-tailwindcss-day2.md
index 193bbb6aa..720544f7b 100644
--- a/_posts/2023-12-01-sveltekit-tailwindcss-day2.md
+++ b/_posts/2023-12-01-sveltekit-tailwindcss-day2.md
@@ -96,13 +96,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [
     require('@tailwindcss/typography'), 
diff --git a/_posts/2023-12-15-svelte-components-tutorial-day7.md b/_posts/2023-12-15-svelte-components-tutorial-day7.md
index 9989f1303..50c689693 100644
--- a/_posts/2023-12-15-svelte-components-tutorial-day7.md
+++ b/_posts/2023-12-15-svelte-components-tutorial-day7.md
@@ -151,13 +151,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [
     require('@tailwindcss/typography'), 
diff --git a/_posts/2024-01-03-svelte-components-tutorial-day8.md b/_posts/2024-01-03-svelte-components-tutorial-day8.md
index ea37d64ee..08ee247e3 100644
--- a/_posts/2024-01-03-svelte-components-tutorial-day8.md
+++ b/_posts/2024-01-03-svelte-components-tutorial-day8.md
@@ -114,13 +114,11 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },      
   },
   plugins: [
     // require('@tailwindcss/typography'), 
diff --git a/_posts/2024-01-07-tailwind-clone-project-day1.md b/_posts/2024-01-07-tailwind-clone-project-day1.md
index 352febc81..c5e4265e6 100644
--- a/_posts/2024-01-07-tailwind-clone-project-day1.md
+++ b/_posts/2024-01-07-tailwind-clone-project-day1.md
@@ -132,6 +132,11 @@ export default {
         '2xl': '1400px'
       }
     },    
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...fontFamily.serif],
+      mono: ['D2Coding', ...fontFamily.mono],
+    },  
     extend: {
       colors: {
         border: 'oklch(var(--border) / <alpha-value>)',
@@ -179,11 +184,6 @@ export default {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)'
       },
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...fontFamily.serif],
-        mono: ['D2Coding', ...fontFamily.mono],
-      },
     },
   },
   plugins: [
diff --git a/_posts/2024-01-22-svelte-server-pagination.md b/_posts/2024-01-22-svelte-server-pagination.md
index 5cd69264c..e738dcffb 100644
--- a/_posts/2024-01-22-svelte-server-pagination.md
+++ b/_posts/2024-01-22-svelte-server-pagination.md
@@ -120,13 +120,11 @@ export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   safelist: ['dark'],  // purge 제외 대상
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...fontFamily.serif],
-        mono: ['D2Coding', ...fontFamily.mono],
-      },
-    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...fontFamily.serif],
+      mono: ['D2Coding', ...fontFamily.mono],
+    },  
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
   daisyui: {
diff --git a/_posts/2024-02-23-svelte5-runes-tutorial.md b/_posts/2024-02-23-svelte5-runes-tutorial.md
index 34342a5ee..2f7cb723c 100644
--- a/_posts/2024-02-23-svelte5-runes-tutorial.md
+++ b/_posts/2024-02-23-svelte5-runes-tutorial.md
@@ -1,6 +1,6 @@
 ---
 date: 2024-02-23 00:00:00 +0900
-title: Svelte 5 Runes 연습
+title: Svelte 5 Runes
 categories: ["frontend","svelte"]
 tags: ["svelte5","runes","tutorial"]
 image: "https://i.ytimg.com/vi/RVnxF3j3N8U/sddefault.jpg"
@@ -9,6 +9,9 @@ image: "https://i.ytimg.com/vi/RVnxF3j3N8U/sddefault.jpg"
 > Svelte 5 의 Rune 기능을 공부합니다. 변경은 확정적인것 같고 충분히 검토를 거친 기능들이기 때문에 미리 익숙해지는 것이 좋다고 생각합니다.
 {: .prompt-tip }
 
+- [Svelte 5 Runes](/posts/2024-02-23-svelte5-runes-tutorial/) : features &nbsp; &#10004;
+- [Svelte 5 Runes Example](/posts/2024-02-26-svelte5-runes-example/) : Todo App
+
 
 ## 0. 개요
 
diff --git a/_posts/2024-02-26-svelte5-runes-example.md b/_posts/2024-02-26-svelte5-runes-example.md
index e387ccff1..a81eab061 100644
--- a/_posts/2024-02-26-svelte5-runes-example.md
+++ b/_posts/2024-02-26-svelte5-runes-example.md
@@ -9,6 +9,9 @@ image: "https://i.ytimg.com/vi/uOI77E8Y95Q/sddefault.jpg"
 > Svelte 5 기능을 연습하기 위해 Todo 앱 만들기를 연습합니다. JoyOfCode 유튜버의 코드를 참고하여 DaisyUI 컴포넌트로 작성합니다.
 {: .prompt-tip }
 
+- [Svelte 5 Runes](/posts/2024-02-23-svelte5-runes-tutorial/) : features
+- [Svelte 5 Runes Example](/posts/2024-02-26-svelte5-runes-example/) : Todo App &nbsp; &#10004;
+
 
 ## 0. 개요
 
@@ -44,6 +47,10 @@ bunx --bun vite dev
 
 ### [TailwindCSS 설정](https://tailwindcss.com/docs/installation/using-postcss)
 
+- tailwind 설정의 theme.extend 는 기본값에 추가한다는 의미이다.
+- tailwind 컨테이너 container 를 theme 파라미터로 재정의 했다.
+- 기존 스크린 외에 모바일, 태블릿, 데스크탑 스크린을 추가했다.
+
 ```bash
 # tailwind, plugins 설치
 bun add -d tailwindcss postcss autoprefixer @tailwindcss/typography
@@ -86,7 +93,7 @@ export default defineConfig({
 });
 EOF
 
-# default font, daisyUI 설정 (background, foreground 색상 추가)
+# font & screen & color 추가 (extend), daisyUI 설정
 cat <<EOF > tailwind.config.js
 const defaultTheme = require('tailwindcss/defaultTheme');
 
@@ -94,12 +101,30 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
-        serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
-        mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    container: (theme) => ({
+      center: true,
+      padding: {
+        DEFAULT: theme('spacing.4'),
+        sm: theme('spacing.5'),
+        lg: theme('spacing.6'),
+        xl: theme('spacing.8'),
       },
+      screens: {
+        '2xl': '1400px',
+      },
+    }),
+    screens: {
+      mobile: '640px',
+      tablet: '960px',
+      desktop: '1280px',
+      ...defaultTheme.screens,
+    },
+    fontFamily: {
+      sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
+      serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
+      mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
+    },
+    extend: {
       colors: {
         background: 'var(--background, oklch(var(--b2)/<alpha-value>))',
         foreground: 'var(--foreground, oklch(var(--bc)/<alpha-value>))',
@@ -161,7 +186,12 @@ cat <<EOF > src/app.pcss
 @tailwind components;
 @tailwind utilities;
 
-/* begin Reset */
+@layer components {
+  .container {
+    @apply mobile:max-w-[600px] tablet:max-w-[900px] desktop:max-w-[1200px];
+  }
+}
+
 *,
 *::before,
 *::after {
@@ -169,7 +199,6 @@ cat <<EOF > src/app.pcss
   padding: 0;
   box-sizing: border-box;
 }
-/* end Reset */
 
 html {
   scroll-behavior: smooth; /* 부드러운 스크롤 */
@@ -474,6 +503,10 @@ EOF
 - writable 에서 `$state` 변수로 바로 넣는 방법은 없는거 같다. (get 사용)
 - todosStorage 를 onMount 시점에서 읽고, onDestroy 시점에서 저장했다. 
 
+> localStroage 초기화
+
+콘솔창에서 `localStorage.clear()` 실행, 또는 `localStorage.removeItem(key)`
+
 ```html
 <script lang="ts">
   import type { Todo, Filters } from '$lib/stores/todos';
@@ -499,7 +532,7 @@ EOF
 ```
 
 ```ts
-// $lib/stroes/todos.ts
+// $lib/stores/todos.ts
 import { persisted } from 'svelte-persisted-store';
 
 export type Todo = {
@@ -532,8 +565,8 @@ export const todos = persisted<Todo[]>('todos', [
 
 - svelte 4 에 비해 편하고 직관적이라 이해하기 쉽다.
   - javascript 바닐라 문법에 좀 더 다가간 느낌이다. 이질감은 적다.
-- daisyUI 에 변수도 추가해 보고, 컴포넌트도 사용해 보았다.
-  - 익숙해지면 사용해 볼 만한데, 프론트엔드 개발은 여전히 두렵다.
+- daisyUI 에 변수도 추가해 보고, 컴포넌트도 사용해 보았다. (일보 전진)
+  - 익숙해지면 사용해 볼 만한데, 프론트엔드 디자인은 여전히 두렵다.
 - 처음에 body 상단이 1rem 만큼 내려 앉아서 스크롤이 생겼다. 그래서 당황했다.
   - 마이너스 mt-4 도 소용없어서, hero 클래스를 넣어보니 되었고 이후 flex 로 바꿨다.