> 小組討論時間：2023.7.9(日) 19:00

**組員參與名單(8 / 11)：**
- [ ] Wei8150#4092
- [x] CuraLin#2648
- [x] Eden.C#9359
- [ ] Cyrus#7960
- [x] 0naomi0
- [x] Ting.66
- [ ] lisashark#3271
- [x] BS#0413
- [x] judy123#2363
- [x] Bree #8835
- [x] iku1217

**參與組員截圖**

## ☀️第零題 心理測驗
| 名稱 | 測驗結果 | 圖示 |
| -------------- | --------------| ------- |
| Ting.66 | 提倡者 INFJ-A |  |
| Violet | 主人公 ENFJ-T |  |
| Eden.C | 邏輯學家 INTP-T |  |
| 0naomi0 | 調停者 INFP-T |  |
| BS |邏輯學家 INTP-T| |
| judy123 | 提倡者 INFJ-T | |
| lisashark |邏輯學家 INTP-T| |
| Bree |鑑賞家 ISTP-T| |

## ☀️第一題 分享您的背景給組員們~
> 背景分享
1.你的暱稱
2.你是哪裡人，之前學校科系是念哪裡？
3.有做哪些性質的工作？
4.為什麼會想來參加這次切版直播班？
5.想特別在這堂課獲得什麼養分？
6.分享一個連你爸媽都不知道的小秘密，給你的組員們~

### 👉Ting.66
1. 庭Ting
2. 台北人住林口、銘傳大學商業設計系
3. 平面設計師、視覺設計師、數位媒體行銷設計師、接案設計師
4. 想轉職，體驗營結束後覺得可以再多磨練一些，決定報名來練功
5. 想做個人專題，在努力中
6. 好像沒有特別驚人的秘密:D

### 👉iku1217
1. Violet
2. 台北內湖人，圖資系
4. 主管秘書、軟體工程師
5. 因為切版相對較弱，來打掉重練～
6. 努力做到 1px 也不差
7. 最近沒有，硬要說的話小學的時候跟哥哥一起偷偷把媽媽丟掉的漫畫拯救回來

### 👉Eden.C
1. Eden
2. 宜蘭人現居永和，工設系
3. 現在在診所工作
4. 想要轉職，所以來多磨練技術
5. 多了解業界的小技巧（？）
6. 高中時請表姊偷偷幫我辦亞太電信的手機

### 👉0naomi0
1. 嗨！大家好！我是會飛的兔子，叫我兔子就可以了。
2. 我住新北，日文系學店畢業。
3. 之前有去路易莎打過工，現在在長輩那邊打半工，基本下午才去工作，上午拿來學習。
4. 想來參加這次切版直播是想逼自己更用心的學習，所以直接把九千花下去。
5. 希望可以在這八週培養自己跟別人一起合作的能力，同時提升自己切版的熟練度。
6. 爸媽不知道的秘密是之前高中統測前偷偷網戀半年的樣子（雖然沒有線下見過面）現在想想我當時真是年少輕狂啊（#🤪

### 👉judy123
1. Judy
2. 台北人 輔仁大學織品系
3. 之前做過行銷 , 紡織業採購
4. 想來參加這次切版班主要是為了轉職
5. 希望可以熟悉BS5 切版技巧
6. 好像沒有特別的秘密噎～

### 👉BS
1. BS
2. 台北人 生活圈在台北中山內湖和新北新莊泰山一帶 土木與建築相關系所
3. 現職為工程顧問公司工程師
4. 因工作需自學網頁相關技能，但切版的部分較少著墨，想透過此次課程提升自身切版能力
5. 學習BS5和熟悉其他切版相關技能
6. 環島一圈差點因為超速計點被吊扣駕照

### 👉Bree
1. Bree
2. 台南人 現居林口，視覺傳達設計系
3. 平面/視覺設計、網頁設計師
4. 工作需要想提升熟稔程度外，希望未來有機會可以轉為前端工程師
5. 打好基礎，想變厲害
6. 好像沒什麼秘密

### 👉Shark
1. shark
2. 台南人 / 企管系
3. 行銷、SA
4. 想要轉跟前端有關的工作
5. 打好切版基礎
6. 買美股(?)

---
## ☀️第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

#### HTML

<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

#### 👉解答討論區
Ａ：2
`vertical-align: bottom;`
`display:block;`

---
## ☀️第三題
請問 .box 的高度是多少？(請不要用瀏覽器觀察)

#### HTML

<div class="box">
  <h1>標題</h1>
  <p>段落</p>
  <p>段落</p>
  <img alt="" src="logo.png" height="90" /> 
</div>

#### CSS

.box h1{
  font-size: 24px;
  line-height: 36px;
}
.box p{
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.box img{
  display: block;
}

#### 👉解答討論區
Ａ：222px
.box 高度 = h1的lh＋ p的lh跟mb +img的h
36px + (16px*1.5 + 24px)*2 + 90px

(圖片沒寫px，不確定是否影響)

---
## ☀️第四題
請問 .card 的寬高與高度各是多少？(請不要用瀏覽器觀察)

#### HTML

<div class="card"></div>

#### CSS

.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}

#### 👉解答討論區
Ａ：w93px,h93px

width:
W50px + br3px + pd20*2 = 93px
height:height:
h50px + bb3px + pd202 = 93px**height:*

---
## ☀️第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

#### 👉解答討論區
Ａ：


---
## ☀️第六題

請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea)，並將程式碼連結放到 Codepen 上。優化重點為：

* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構

#### 👉解答討論區
Ａ：
w500px、m0-a獨立出來，其他相同的語法如mb寫成一個class套用進html

---
## ☀️第七題

彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&)，你會如何透過 flexbox 來排版？

#### 👉解答討論區
Ａ：
| 名稱 | 草圖 |
| -------- | -------- |
| Ting.66 |
| Bree |
| CuraLin |
| 0naomi0 |
| Eden.C |