KD's Tech Blog

Hi, 我是 KD Chang 張凱迪，我在這書寫我的軟體開發/程式設計技術筆記 | KD 技術部落格

CSS Animation 入門教學筆記 | 學習筆記

前言在現代網頁開發中，動畫是一種強而有力的表現手法，能提升使用者體驗，使介面更加生動、有趣。相比 JavaScript，CSS Animation 提供一種更簡潔、性能更佳的動畫解法，尤其適合製作 UI 中的小型動畫效果。 本篇教學筆記將介紹 CSS Animation 的基本語法、常見屬性與一個實際範例，幫助你快速上手。 為什麼使用 CSS Animation？CSS Animation......

Posted by kdchang on 2024-11-16

Grid 網頁排版技巧入門教學筆記 | 學習筆記

前言在現今網頁設計中，排版的結構與呈現方式對於用戶體驗至關重要。隨著網頁設計的演進，CSS Grid 成為了最強大且靈活的排版工具之一。透過 CSS Grid，你可以輕鬆創建複雜的佈局，並且適應不同設備的需求。本文將介紹 CSS Grid 的基本概念與使用技巧，幫助你迅速掌握如何在網頁設計中使用 Grid。 1. 什麼是 CSS Grid？CSS Grid Layout（簡稱 Grid）是 ......

Posted by kdchang on 2024-11-15

Flexbox 網頁排版技巧入門教學筆記 | 學習筆記

1. Flexbox 簡介Flexbox（Flexible Box Layout）是一種 CSS3 佈局模式，專門用來設計一維的彈性佈局，適用於水平或垂直排列元素，使網頁排版更加靈活且易於維護。 1.1 為何使用 Flexbox？ 彈性調整：元素可根據可用空間動態調整大小。 簡化佈局：減少對 float、inline-block 及 position 依賴。 更好的對齊方式：內建強大的對齊與......

Posted by kdchang on 2024-11-14

整合 Tailwind CSS 與 daisyUI 的入門教學筆記 | 學習筆記

一、前言：為什麼選擇 Tailwind CSS 搭配 daisyUI？在現代前端開發中，Tailwind CSS 提供了高度自訂、原子化的 CSS class，使得開發者能夠以更模組化與語意化的方式撰寫樣式。然而，Tailwind 並不內建 UI 元件，這就使得一些常見元件（如按鈕、表單、卡片）仍需手動組裝樣式。 這時，daisyUI 就成為極佳的搭檔。daisyUI 是一個基於 Tailw......

Posted by kdchang on 2024-10-16

Web 前端效能優化入門教學筆記 | 學習筆記

前言在網頁開發中，效能優化是一個不可忽視的重要課題。無論是企業網站、單頁應用（SPA），或是電商平台，效能表現都直接影響使用者體驗與轉換率。 本篇筆記將介紹 Web 前端效能優化的核心概念、常見策略與實務範例，幫助你為專案建立良好的基礎。 為什麼需要前端效能優化？前端效能不佳會導致： 首次載入時間過長 使用者等待過久，產生跳出行為 SEO 表現不佳（Google 會參考 LCP、CLS、......

Posted by kdchang on 2024-10-16

PostCSS 入門教學筆記 | 學習筆記

一、什麼是 PostCSS？PostCSS 是一個 CSS 的轉換工具（CSS Transformer），本身不是 CSS 預處理器（如 Sass）或框架（如 Tailwind CSS），但它可以透過「外掛（plugin）」的方式強化你的 CSS 工作流程。 簡單來說，PostCSS 是一個平台，讓你可以用 JavaScript 編寫規則，自動處理 CSS，像是： 自動加上瀏覽器前綴（au......

Posted by kdchang on 2024-09-16

AOS（Animate On Scroll Library）入門教學筆記 | 學習筆記

前言在現代網頁設計中，視覺效果和互動性已經成為提升使用者體驗的重要元素。當使用者向下滾動頁面時，如果某些區塊能夠平滑地出現、滑入、淡入或放大，能大大提升網站的專業感和吸引力。這類效果通常被稱為「滾動動畫」。 AOS (Animate On Scroll) 是一個輕量級的 JavaScript 函式庫，讓你可以輕鬆地為 HTML 元素加上動畫效果，並且在元素進入畫面時自動播放動畫。它不需要你手......

Posted by kdchang on 2024-08-31

CSS transition 入門教學筆記 | 學習筆記

前言CSS transition 屬性允許元素在狀態變化時產生平滑的動畫效果，使 UI 更加流暢和自然。這項技術通常應用於按鈕、圖片、卡片等 UI 元素的互動效果，如懸停、點擊或狀態變更。 1. transition 基礎概念CSS transition 屬性用於定義當元素的某些 CSS 屬性發生變化時，該變化應如何逐漸呈現，而非立即改變。基本語法如下： transition: proper......

Posted by kdchang on 2022-12-13

CSS 權重（Specificity）入門教學筆記 | 學習筆記

1. 什麼是 CSS 權重？CSS 權重（Specificity）是指當多個選擇器同時作用於同一個元素時，瀏覽器決定應用哪條 CSS 規則的優先級機制。不同選擇器具有不同的權重，權重高的樣式會覆蓋權重低的樣式。 2. CSS 權重的計算方式CSS 權重由四個部分組成，從高到低分別是： 行內樣式（Inline Styles） ID 選擇器（ID Selectors） 類別、偽類與屬......

Posted by kdchang on 2021-12-15

CSS 入門教學筆記 | 學習筆記

1. 什麼是 CSS？CSS（Cascading Style Sheets，層疊樣式表）是一種用來美化 HTML 頁面的樣式語言。透過 CSS，可以設定字體、顏色、間距、佈局等，讓網頁更具吸引力和可讀性。 CSS 透過選擇器（Selectors）來指定 HTML 元素，並套用樣式規則（Rules）。 2. CSS 的使用方式有三種方式可以在 HTML 文件中使用 CSS： 2.......

Posted by kdchang on 2021-12-14

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品/專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS