切版
含有「切版」共 10 篇內容
全部內容
發佈日期由新至舊
在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。
這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。
為甚麼寫這邊文章?
這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。
在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。
文章節錄當時的檢核點，作為日後開發的 check list。
切版有許多眉角需要注意，來探討那些經常導致切版結果與設計稿產生落差的原因。
一、文字的高度本體是 line-height：🔍 文字所佔據的高度不是由font-size決定，而是line-hight。一開始練習切版時，都想著設定好字的尺寸和字重就 ok 了吧？殊不知這是造成切出來的網頁與設計
圖片可以說是 HTML 元素中以不受控出名的元素了，在預設情況下，完全不受父容器影響，以下就來看看有哪些方法讓圖片依照你的想法變化吧。
網頁中經常會出現正方形的設計，在切版時如果直接設定固定寬高就是破版的節奏，但單用百分比設定長寬，RWD 時還是會變得不夠正，這邊提供兩個方法：
在 pxCode 裡，我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後，再動手執行，會更有效率！
距離六角學院開辦的網頁切版直播班的正式課程結束後又過了一周，回顧一下從七月初到八月底這八周的課程強度和自身的學習狀況，我會說課程整體安排非常棒，而且課後強大的助教系統跟slack上的交流平台真的很優質，這些都是一般影音課程所無法提供的...
