# 第一周小組任務memo
以下題目皆有使用 Meyerweb CSS Reset。
### 第零題 心理測驗

:::spoiler <font color="blue">狸貓</font>
:::

### 第一題 分享您的背景給組員們~
1.暱稱： <font color="#0072E3">狸貓</font>
2.哪裡人、學校科系：<font color="#0072E3">桃園人、藝大工藝系</font>
3.做過的工作性質：<font color="#0072E3">主要是服務業，有做過一陣子的物流業</font>
4.參加切版直播班的原因：<font color="#0072E3">想換工作，想要錢（深切</font>
5.想獲得養分：<font color="#0072E3">把切版的熟練度提高</font>
6.分享小秘密：<font color="#0072E3">花錢買遊戲跟主機，但其實沒時間玩XD</font>

### 第二題 選擇題

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

答案：<font color="#0072E3">１</font>（有指定高度）
#### HTML

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

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

答案：<font color="red">36+(16×1.5+24)×2+90=*222*</font>（h1行高+p行高×2+margin+img高度）
#### 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;
}

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

答案：寬 <font color="#0072E3">50+3+20×2=*93*</font>（寬+右border+左右padding）；高 <font color="#0072E3">50+3+20×2=*93*</font>（高+下border+上下padding）
#### 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;
}

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

答案：<font color="#0072E3">[答案程式碼](https://codepen.io/tanuki320/pen/BarzyjE)</font>

### 第六題

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

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

答案：<font color="#0072E3">[答案程式碼](https://codepen.io/tanuki320/pen/mdxEyPz)</font>

### 第七題

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

:::spoiler <font color="#0072E3">答案</font>
:::