電商網頁切版專案紀錄_AC課程練習
最近在AC的學期2–3，完成了一個電商網頁切版專案。這個專案最主要是讓自己練習從零開始切出一個比較完整的畫面，並且也要考慮RWD來進行佈局。
進行這個專案的原因，除了是課程指定的作業外，也是為了練習目前網頁常用的頁面（電商購物），以及RWD、grid等新學到的重要技術。整個專案總共花了8.5小時，不乏卡關、回頭更加弄清楚觀念的地方，以下就來做個紀錄和分享。
主要使用了哪些技術？
- 區塊排版與置中：在大型區塊的排版上，混合使用flex與margin達成指定的排列樣式，或置中效果。
- 相簿區塊排版與RWD：利用grid進行相簿區塊的排版，並利用auto-fit達成RWD效果。並使用background或object-fit的設定，來達成適當的圖片縮放。
- 相簿換圖效果：利用hover、transition技術，讓圖片在滑鼠移動過去時有換照片的效果；並且利用position定位，讓換上的照片能在相同位置出現。
哪部分相對能掌握？哪裡花了最多時間？
- 在flex的使用上相對熟悉，因此一開始大多依照過去習慣，用了多層flex達成想要的排列，後來覺得多層的設計太過複雜，所以在一些僅需要置中的區塊，就改以margin進行設定，相對需要寫的CSS就更為精簡。
- grid和相簿圖片的部分大概是最花時間的。一開始進行初步的grid排版設定還ok，但後續遇到區塊往下溢出、圖片縮放大小不理想、手機版會變成一列只有一件衣服的問題，都花了不少時間查技術文件、用console觀察測試才成功改善。
- 圖片hover的部分也卡關了一段時間。原先困惑於hover如何能夠不選到相同class的其他相片，想使用hover搭配::before來實作換圖效果，但一直無法正確選取。後來觀察示範網頁、查資料，發現其實不需要這麼複雜，利用兩個img，position定位到相同位置，並以hover調整opacity和display，即可達成想要的效果。
碰到什麼困難？又如何克服？
1. grid區塊往下溢出
一開始在設定grid-gap時，用%來進行設定，但在往下方區塊(pagination)實作時，最下面那列的grid內容其實往外溢出，超出整個album區塊，導致pagination和最下面那列重疊在一起。
當時利用開發者工具的grid顯示範圍，確認是溢出問題後，有想說可能是gap擠壓造成的，因此就改用不同單位來設定gap，發現使用其他單位就修正了這個問題。但目前還沒弄清楚實際原因，之後還會再查查看，如果知道的人也歡迎指點！（後來做了測試，寫了這篇文章做解說）
2. 圖片縮放大小不理想
一開始在T-shirt假圖和實穿照的切換間，因為希望兩者大小看起來接近，一直想說使用相同的object-fit設定，但cover時假圖會放很大而被過度切割，contain時則是實穿照會被縮到較窄而兩邊有明顯留白，導致不管用哪種，hover換照片後都會感覺圖片大小有明顯不同。（這邊把問題簡化許多，其實當初為了找到問題是什麼，各種調照片、grid大小，弄了很久才發現問題關鍵是這個😂）
後來就想到，其實不一定要堅持兩種用相同的object-fit！而應該是分別使用適合的來調整看看，才發現因為相片尺寸不同，T-shirt假圖用contain，實穿照用cover時，兩者看起來反而是較為一致的！有時實際執行和自己的想像很不同，要小心不被一開始的假設限制住。
3. 手機版一列只有一件衣服
這點是在助教批改後，才發現版面寬度小於500px時，目標畫面一列仍有兩件衣服，但我的實作是只有一件的。原本的CSS是：
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
一開始苦思說如何在用auto-fit，可以隨著版面大小自動控制每列欄數的情況下，保持至少有兩欄的設定。後來觀察技術文件時，想起每欄其實可以有不同的設定！因此要改其實很容易：
grid-template-columns: minmax(220px, 1fr) repeat(auto-fit, minmax(220px, 1fr));
就是在開始repeat前，先有一個相同大小設定的欄位（左邊的minmax），這樣就能確定至少一定有兩欄，而且大小會一樣。
4. 圖片hover的選取與偽元素
一開始要做hover換圖效果時，腦海裡有許多困惑，想說用class設定hover的話，可能會一次選到所有有相同class的元素（後來發現其實不會），如果要設定成有各自的class或id又很麻煩，所以想說也許可以用偽元素的存在與否來設定（其實這也沒有解決前面的問題，那時候一定是邏輯打結了😆）
總之因為神奇(錯誤)的邏輯，就想說用hover來設定是否有偽元素好了。但當時設定的是hover到A物件後，要在B物件出現::before的偽元素，像是這樣：
.classA:hover ~ .classB::before
但寫出來後發現沒效果，只有在物件相同，直接接著hover寫的情形下：
.classA:hover::before
偽元素才有順利出現。但當時發現這樣解決不了問題，又卡在覺得純粹hover會選到所有class相同的元素，就有點卡關，覺得自己應該是這個佈局上策略有問題，於是去開了指定頁面的html來看，發現它很單純地每個grid card用了兩個img，就想說好先以這個設定，來測試看看CSS怎麼寫。
實作後就發現，其實這樣做hover也不會選到其他class相同的元素，原因是當hover用空格寫的時候，其實會選到的範圍只有該物件的子元素：
.card:hover .model-image （會選到的只有該張 card 中的 .model-image，而不是全部的 .model-image）
如此主要的問題就解決了，只要再搭配 opacity、display: none、position的設定，就可以讓兩張圖片在相同的位置有hover淡入淡出的效果。
過程中對哪個前端技術有特別深刻的學習？
技術的部分最主要應該就是前面提到的grid、hover和object-fit，不過目前大多仍是知道如何達到想要的效果，背後的深入原理觀念，可能還不夠清楚，是接下來要繼續釐清的。
除了特定技術的學習外，還有兩個學習技巧是這次特別印象深刻的：
- 利用開發者工具debug：過程中畫面常常不如預期，又不知道問題在哪，這時候滿需要利用開發者工具，直接觀察該物件的位置、長寬、其他CSS，嘗試開啟、關閉、修改不同的CSS設定來看變化，找出可能的問題在哪。
- 計時和回顧每小時進度：因為這次的作業有要求計時，以及每小時紀錄那個小時完成了什麼，因此就能比較有意識地控制自己的實作時間，避免迷失在茫茫的查資料大海裡；也會比較去思考哪些功能、設定是必要的，優先把畫面重點要求做出來，而不是不小心就開始微調畫面細節而弄太久。
以上大致是這次專案實作的重點紀錄分享，沒想到寫得比預期的多，回顧過程也更釐清了中間許多不太確定的地方，希望接下來繼續進步！
