第一週小組任務
<!-- [TOC] -->
### 參與人員
| Fleur | Ning | Pinky | Tracy曼娟 |
| ----- | ---- | ---------| ------|

### 第一題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。
| slack名稱 | 人格類型 |
| --------- | -------- |
| Fleur | 調停者 |
| Ning | 調停者 |
| Pinky | 提倡者 |
| Tracy曼娟 | 提倡者 |
### 第二題 選擇題
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px
#### HTML

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

#### 答案討論
> 2. 92~93px
[name= Fleur][color=green]

> 2. 92~93px
[name= Ning][color=blue]

> 2. 92~93px
> [name= Pinky][color=red]

> 2. 92~93px
> [name= Tracy曼娟][color=yellow]

### 第三題
請問 .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** (已修正答案，此為正解)
> ~~36+(16*1.5)*2+24+90=198 （錯誤，忘記兩個p下方各有ˋmb24）~~
> 36+(16*1.5+24)*2+90=222 px
[name= Fleur][color=green]

> 答案：36+(16*1.5+24)*2+90= 222px (正確答案)
>[name= Ning][color=blue]

> 36+(16*1.5+24)*2+90=222 px (正確答案)
> [name=Pinky][color=red]

> 36px+(16*1.5+24)*2+90=222px (正確答案)
> [name=Tracy曼娟][color=yellow]

### 第四題
請問 .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;
}

#### 答案討論
> **width : 93px** (50+3+20x2=93)
> **height : 93px** (50+3+20x2=93)
[name= Fleur][color=green]

>w=50+3+20*2=93px
>h=50+3+20*2=93px
[name= Ning][color=blue]

> width: 50+3+20x2=93
> height: 50+3+20x2=93
> [name=Pinky][color=red]

>w=50+3+20*2=93px
>h=50+3+20*2=93px
[name= Tracy曼娟][color=yellow]

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

#### 答案討論
> [Fleur - 第五題](https://codepen.io/swwlee/pen/OJmybVG)
> header .main .footer都有一個固定寬度跟置中的設定，所以用.wrap 包住 .header .main .footer就能保留置中跟寬度不變
[name= Fleur][color=green]

>[Ning -第五題 ]()
>將font-size: 20px 統一放在.wrap [name= Ning][color=blue]
>答案：

.wrap{
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
}

>[Pinky -第五題 ](https://codepen.io/pinky-chen/pen/XWRKXao)
[name= Pinky][color=red]

>[Tracy曼娟 - 第五題]()
>答案：刪除header, main, footer的width,margin設定，因為都包在wrap裡面。文字大小也都一致，所以移至wrap。CSS僅留以下內容：
> [name= Tracy曼娟][color=yellow]

### 第六題

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

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

#### 答案討論
> [Fleur - 第六題](https://codepen.io/swwlee/pen/OJmybVG)
[name= Fleur][color=green]

>[Ning -第六題 ](https://codepen.io/fangninglin/pen/PomNaVV)
[name= Ning][color=blue]

>[Pinky -第六題 ](https://codepen.io/pinky-chen/pen/dyWXXpj)
[name= Pinky][color=red]

>[Tracy曼娟 - 第六題](https://codepen.io/tracychien-the-encoder/pen/qBmNdLX?editors=1100)
> [name=Tracy曼娟][color=yellow]

### 第七題

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

#### 答案討論
> [第一週 pixel perfect kata 小組作業](https://codepen.io/swwlee/pen/BaRNEPv)
[name= Fleur][color=green]

- [pixel perfect kata 錄影練習版](https://youtu.be/wV2N2g7307k)
**老師的建議:**
100 分！可以看出很勤勞在刻意練習:+1:，一個小建議是 item 元件可以拉出來獨立，不用放在 .main，好處一是他之後放在其他區塊不會受限在 .main；好處二階層簡潔。我曾經有錄製過一個影片，也提供給你參考~主要是講解階層過多的問題，再請試試看 :+1:

[CSS 階層效能優化建議](https://ithelp.ithome.com.tw/articles/10237687)

<iframe width="560" height="315" src="https://www.youtube.com/embed/wV2N2g7307k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

>[第一週 pixel perfect kata 小組作業](https://codepen.io/fangninglin/pen/qBmOLjN)
[name= Ning][color=blue]

>[第一週 pixel perfect kata 小組作業](https://codepen.io/pinky-chen/pen/wvdWWRM)
[name= Pinky][color=red]

>[第一週 pixel perfect kata 小組作業](https://codepen.io/tracychien-the-encoder/pen/poPJBZo)
>需要左右排版的都使用flexbox
我寫的結構中用到flexbox的是content和news-item
> [name=Tracy曼娟][color=yellow]

## 討論截圖
:::spoiler **slack 討論截圖 > 收合**
---
---
:::
:::spoiler **zoom 討論截圖 > 收合**
---
---
---
---
---
---
---
---
---
---
---
:::