切版

本文介紹如何使用 map 方法遍歷數據陣列，並動態生成 HTML，並比較了 innerHTML 和 appendChild 的差異以及注意事項。

電商網站切版連結： https://codepen.io/XavierHSIAO/pen/qBgvQyw

CSS Grid 基礎學習筆記第二彈

在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。

這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。

為甚麼寫這邊文章? 這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。

在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。 文章節錄當時的檢核點，作為日後開發的 check list。

切版有許多眉角需要注意，來探討那些經常導致切版結果與設計稿產生落差的原因。 一、文字的高度本體是 line-height：🔍 文字所佔據的高度不是由font-size決定，而是line-hight。一開始練習切版時，都想著設定好字的尺寸和字重就 ok 了吧？殊不知這是造成切出來的網頁與設計

圖片可以說是 HTML 元素中以不受控出名的元素了，在預設情況下，完全不受父容器影響，以下就來看看有哪些方法讓圖片依照你的想法變化吧。

網頁中經常會出現正方形的設計，在切版時如果直接設定固定寬高就是破版的節奏，但單用百分比設定長寬，RWD 時還是會變得不夠正，這邊提供兩個方法：