---
# System prepended metadata

title: 中2組 第一周小組討論

---

## 報到
- [x] Kai
- [x] Sharon
- [x] Nex
- [x] Wei（崴）
- [x] Hao
- [x] Margo
- [x] Long


## 問題
以下題目皆有使用 Meyerweb CSS Reset。
### 第零題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。

| Discord名稱 | 16型人格 | 
| ---------- | ------- | 
| Margo | INFP-T  |
| Kai | ISFJ |
| HAO | INFJ-T |
| Sharon | INFJ-T
| Nex | INFP |
| WEI | ISTP-A |
| Long | ESFJ-A |
| Sam | ESFJ-A|


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


| Discord名稱 | 自我介紹 |
| ----------- | ---- |
| Margo | 1.嗨~我是Margo<br>2.台中人，之前在台北念商管科系<br>3.當過一年半的行銷 (很討厭被社群綁架所以想轉職)<br>4.做出好的專題作品拿去面試！<br>5.想加強網頁動畫效果 & 認識好戰友<br>6.實在想不到捏<br> |
| Kai | 1. Kai 或 凱 <br/> 2. 台中；藥學系 <br/> 3. 藥師 <br/> 4. 想要增進自己切版速度，切版速度快就可以更快去做 JS 的思考 🥺 <br/> 5. 後面設計稿的挑戰是相當期待的，並且獲得作品 <br/> 6. 手滑買了一個升降桌 |
| HAO | 1. 我是Hao(豪)</br> 2. 彰化人，資傳系 </br> 3.平面美編</br>4.轉職ui設計師，想多了解工程師在切版上的困難點</br>5.想學習切版技巧，降低工作上的摩擦</br>6.想超久，但好像沒特別的秘密XD |
| Sharon | 1.大家好~叫我 Sharon 就好了。<br/>2.家鄉在屏東的台中人，逢甲財稅系畢業。</br>3.文書工作、創業旁邊打雜的(政府標案、樂齡教育、兒童程式教育師資管理、教育桌遊設計...)。</br>4.增加自己切版的熟練度和累積作品。</br>5.想多闖闖 CSS 的世界，訓練基本功。</br>6.我的小秘密媽媽應該都知道，爸爸也會偷聽。 |
| Nex | 1. Nex <br> 2.彰化人 歷史系<br> 3. 本來是後端工程師, 目前全職學習 <br> 4. 想做專題作品拿去面試<br> 5. 學切版技巧 <br>6. 能講得秘密目前想不到|
| WEI | 1.就是崴...<br/>2.彰化人，雲科大：Ｄ<br/>3.自動控制設備工程師<br/>4.不喜歡現場的作業環境所以想轉職<br/>5.面試的門票！<br/>6.在六角買了很多課...但是看不完..|
| Long |  1.叫我Long就可以了!!<br/>2.桃園人，朝陽資通系<br/>3.今年剛畢業，做過測試工程師(實習)<br/>4.接觸程式4年後來想著要往哪方面前進，最後選擇前端，來這裡磨練切版技術，畢竟在大學四年其實沒什麼接觸前端的語言<br/>5.想增強自己能力<br/>6.好像沒有什麼特別的秘密XD|

### 第二題 選擇題

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

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

| Discord名稱 | 第二題 | 
| ---------- | ------- | 
| Margo |  92~93px|
| Kai | 1 |
| HAO | 2.92~93px |
| Sharon | 2. 92~93px |
| Nex | 92 ~ 93px |
| WEI | 2. |
| Long |  2.|
|  |  |

<details>
    <summary>結論</summary>
    <p>
        雖然有使用 Meyerweb CSS Reset，但沒有在 img tag 看到 <code>vertical-align: middle;</code> 或 <code>display: block;</code>
    </p>
</details>


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

#### HTML

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

#### CSS
```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;
}
```
| Discord名稱 | 第三題 | 
| ---------- | ------- | 
| Margo | 222px (36+96+90) |
| Kai | h1: 36px, p: 24px (16 * 1.5) 但往下推 24px 並且有兩個 <br/> img 有 display: block 處理，所以是 90px，共 36 + (24 + 24) * 2 + 90 = 222px |
| HAO | 36+(24+24)+(24+24)+90 = 222px |
| Sharon | h1  : 36px<br/>p_lh: 24px = 16*1.5<br/>p_mb: 24px<br/>img : 90px<br/><br/>■ .box 總高:<br/>.box_h: 222px = 36+(24+24)*2+90 |
| Nex | h1: 36px, p: 48px * 2, img: 90px|
| WEI | 36+(16*1.5+24)*2+90=222px |
| Long | 36px+24px*2+24px*2+90px=222px |
|  |  |

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

#### HTML
```htmlembedded=
<div class="card"></div>
```
#### CSS
```css=
.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}
```
| Discord名稱 | 第四題 | 
| ---------- | ------- | 
| Margo | 93*93px  |
| Kai | 93 * 93 |
| HAO | w: 50+3+20+20 =93px / h:50+3+20+20 = 93px  |
| Sharon | .card 寬: 93px = 50+20x2+3 <br/> .card 高: 93px = 50+20x2+3 |
| Nex | width:93px height:93px |
| WEI | width:50+3+20*2=93px<br/>height:93px同上|
| Long |  width:50px+3px+40px=93px <br/>height:50px+3px+40px=93px|
|  |  |

### 第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼
---
***共同作答***
#### HTML
```htmlembedded=
<div class="wrap">
  <div class="header">
    <h2>header</h2>
  </div>
  <div class="main">
    <p>Lorem, ipsum dolor.</p>
  </div>
  <div class="footer">
    <p>footer</p>
  </div>
</div>
```
#### CSS
```css=
.wrap{
  width: 500px;
  margin: 0 auto;
}
.header{
  width: 500px;
  margin: 0 auto;
  
}
.header h2{
  font-size: 20px;
}
.main{
  width: 500px;
  margin: 0 auto;
}
.main p{
  font-size: 20px;
}
.footer{
  width: 500px;
  margin: 0 auto;
}
.footer p {
  font-size: 20px;
}
}
```

#### 答案
```css!
.wrap{
  width: 500px;
  margin: 0 auto;
}

h2, p{
  font-size: 20px;
}
```

### 第六題

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

* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構
---
***共同作答*** 
- [CodepenLink](https://codepen.io/guaguagua-duck/pen/PoxOpYM?editors=0100)


### 第七題

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

![](https://hackmd.io/_uploads/SJi6F43Kn.png)


### 開會截圖

![](https://hackmd.io/_uploads/H1etnE2Yh.png)

![](https://hackmd.io/_uploads/SkI_342tn.png)
