第13組 第一週｜版型
===

###### tags: `小組任務` `第一週` `2021夏季切版班` `team13`
[【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg)
:::info
- **開會地點：** Gather、白板
- **開會時間：** 7/4(日) 20:00
- **討論目錄：**[**第一週任務**](https://hackmd.io/@hexschool/HyrWId9dd) `50min`
- 心理測驗（截圖）
- 題目
- 看高度
- 改良程式碼
- kata
- 分享 kata 影片
- 快捷鍵分享
- 討論（截圖）
- **參與成員**：Ian, Jiang V, Min Chun Tsai, Shani, Summer.H, Sz, Xing, 家齊, 巫樾
- 未參與成員：mansonivan(開會時間點尚未加入組內)
- 直播內容
- [第一週直播講義](https://hackmd.io/@hexschool/r1LImC5hd)
- 筆記
- [Sz 直播筆記](https://hackmd.io/@HexSlicing2021-Team13/sz-w1)

:::

---

## 第一題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。
::: spoiler 心理測驗截圖（點擊展開）

:::
<br>

> 這次組員人格特質很多元，沒人重複！
>[name=Sz 分享][color=#BB84F5]

---

<!-- > 
>[name=Xing 分享][color=#E69F80]

>
>[name=Sz 分享][color=#BB84F5] -->

### 第二題

**以下題目皆有使用 Meyerweb CSS Reset。**

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

- [ ] 90px
- [x] 92-93px
- [ ] 120px

#### HTML

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

> 直播：height 的 px 可省略，沒有改成 block 屬性的 img 會有神祕的 2~3px 陰魂不散，看完直播後大家都答對啦～

> height 寫與不寫的差別，是差在 [loading 的時候](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)
> 如果有寫，html 會預留 img 的欄位
> 圖片還沒 loading 完之前，以下的內容才不會擠上來
> [name=Sz 分享][color=#BB84F5]
>> Use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.
>> [name= MDN]

### 回答區
>
>>我猜 1 [name=Xing 分享][color=#E69F80]
>
>>原本選1看完直播發現是2
>>[name=Summer.H 分享][color=#F5697A]
>
>>我也覺得是1，結果看完直播是2（燈愣
>>[name=Sz 分享][color=#BB84F5]
>
>>我猜2,ohno~跟大家都不一樣嗚嗚[name=Shani 分享][color=#FFCE6B]
>
>>我猜2哩
>>[name=Jiang V 分享][color=#A7E683]
>
>>我猜 2[name=Min Chun Tsai 分享][color=#efc267]
>
>>我覺得是2
>>[name=家齊 分享][color=#96A9C4]
>
>>我猜二 大約92.3f
>>[name=巫樾]
---

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

----

> 直播：img 改成 block 後，沒有了 2-3px 的問題囉！
> 然後我們集體忘了 margin 囉！這就是 live server 為何存在的最佳體現

### 回答區
>
>>我猜 174px [name=Xing 分享][color=#E69F80]
>>
>
>>36 + 16*1.5 * 2 + 90 = 174[name=Sz 分享][color=#BB84F5]
>
>> 174~~ 聽直播補充一小點貌似在瀏覽器上算198(把margin加進去)[name=Shani 分享][color=#FFCE6B]
>
>>36+24+24+90 = 174px 哩
>[name=Jiang V 分享][color=#A7E683]
>
>>我算是 174px [name=Min Chun Tsai 分享][color=#efc267]
>
>>- [x] **我算是222，36+48*2(兩個p)+90=222px**
>[name=家齊 分享][color=#96A9C4]
>
>>我算是 174px→然後發現忘了算margin
>[name=Summer.H 分享][color=#F5697A]
>
>>img90 / H1 36 / P 16*1.5=16+8=24 / 24*2=48 兩段p/
＝１７４[name=巫樾]

---

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

> 沒有設定 box-sizing: border-box 就是要算數學，然後哭

### 回答區

>>我猜 53px 53px[name=Xing 分享][color=#E69F80]
>
>>width: 50 + 20 = 70
>height: 50 + 20 = 70[name=Sz 分享][color=#BB84F5]
>
>>- [x] w: 50+20+20+3 =93
>>h: 50+20+20+3 =93[name=Shani 分享][color=#FFCE6B]
>
>>- [x] 寬 50+20+20+3 = 93
>高 50+20+20+3 = 93
>[name=Jiang V 分享][color=#A7E683]
>
>>- [x] W: 93
>H: 93
>[name=Min Chun Tsai 分享][color=#efc267]
>
>>- [x] 寬：50+3+40 =93
>高：50+3+40 =93
>[name=家齊 分享][color=#96A9C4]
>
>>- [x] W:93
>H:93
>[name=Summer.H 分享][color=#F5697A]
>
>>- [x] 93[name=巫樾]

---

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

>風格1：全部丟到 wrap 裡
>風格2：wrap 跟 text 分開

### 回答區
>>[Xing 答案](https://codepen.io/xing10/pen/qBmdbBq)
>>[name=Xing 分享][color=#E69F80]
>
>>[by Shani](https://codepen.io/ShaniMa/pen/GRmpmqz)[name=Shani 分享][color=#FFCE6B]
>
>>[Jiang V 優化](https://codepen.io/viccjiang/pen/OJmVWQx)
>[name=Jiang V 分享][color=#A7E683]
>
>>[Min Chun Tsai 作答](https://codepen.io/Tsai0926/pen/bGWVjVw?editors=1100)
>[name=Min Chun Tsai][color=#efc267]
>
>>[家齊答案](https://codepen.io/jacky298/pen/WNjQgVq)
>[name=家齊 分享][color=#96A9C4]
>
>>[Summer.H](https://codepen.io/wan-chine/pen/XWRmxMR)
>[name=Summer.H 分享][color=#F5697A]
>
>>[Sz](https://codepen.io/szyln/pen/bGWdErZ)[name=Sz 分享][color=#BB84F5]
>
>>[巫樾codepen andser](https://codepen.io/pwbzvqja/pen/VwbevLN)
[name=wuyueh巫樾]

---

## 第六題

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

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

> 答案感覺都很讚，html 有些沒用到的 class 可拿掉

### 回答區
>
>>[Xing 答案](https://codepen.io/xing10/pen/PomqZBV)
>>[name=Xing 分享][color=#E69F80]
>
>>[by Shani](https://codepen.io/ShaniMa/pen/yLbYbPV)[name=Shani 分享][color=#FFCE6B]
>
>>[Jiang V 優化](https://codepen.io/viccjiang/pen/BaRNprm)
>[name=Jiang V 分享][color=#A7E683]
>
>>[Min Chun Tsai 作答](https://codepen.io/Tsai0926/pen/BaRoPLL?editors=1100)
>[name=Min Chun Tsai 分享][color=#efc267]
>
>>[Sz 回答](https://codepen.io/szyln/pen/gOWajow)[name=Sz 分享][color=#BB84F5]
>
>>[家齊答案](https://codepen.io/jacky298/pen/WNjQaNq)
>[name=家齊 分享][color=#96A9C4]
>
>>[Summer.H](https://codepen.io/wan-chine/pen/XWRmxag)
>[name=Summer.H 分享][color=#F5697A]
>
>>[巫樾codepen andser](https://codepen.io/pwbzvqja/pen/vYmLKyo)[name=wuyueh巫樾]
---

## 第七題

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

>關於 margin bottom 的下法，大部分是直接設在 li ，也有設在 img 的

>
>[name=Jiang V 分享][color=#A7E683]

>[白板](https://app.tryeraser.com/workspace/rGwoo3R5KDpgqPukmI2o)
>問：有沒有需要在 ul 上加一個負的 margin，上層改**div.mb-6**>main+div
>討論結果：我想太多了
>問：main 不太清楚該放哪好，我是放在只有 news 的地方
>討論結果：這個寫 main+footer，但主要還是要看文意
>[name=Sz 分享][color=#BB84F5]

>[巫樾畫](https://i.imgur.com/ywzASUz.png)
>左紅 ul li
>

---
## 切版的呼吸 壱のkata
>[name=Xing 分享][color=#E69F80]<iframe width="560" height="315" src="https://www.youtube.com/embed/-9I9euobMB4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

>[name=Shani 分享][color=#FFCE6B]<iframe width="560" height="315" src="https://www.youtube.com/embed/RYV8zA3cvdw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

>[name=Sz 分享][color=#BB84F5]<iframe width="560" height="315" src="https://www.youtube.com/embed/A0YvT86EkT4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

>[name=家齊 分享][color=#96A9C4] <iframe width="560" height="315" src="https://www.youtube.com/embed/QwtYvxsyn68" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

>[name=Jiang V 分享][color=#A7E683] <iframe width="560" height="315" src="https://www.youtube.com/embed/_7EjRE1YMtU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[name=yellamoon 巫樾]
{%youtube IEEhMWBCY20%}

## 快捷鍵
### Terminal(vs內)
- 開 Terminal
Win：`F1`／Mac: `ctrl + ~`
- 新增檔案

touch <檔名.副檔名>

### VS 快捷鍵
- 開啟檔案：`ctrl + P`
選檔案後按`enter`, (想開在不同 group 就 `ctrl + enter`)
- 切換正在使用的 group ：`ctl + 1, 2`
- live server：`ctrl + L + O`
>[name=家齊 分享][color=#96A9C4]快捷鍵，不同系統而有些預設不同
>如live server： mac: `ctrl + L + O` ,windows: `Alt + Shift + B`,
>linux:`ctrl + L ctrl + O`
>附上網路找的快捷鍵資源：https://ithelp.ithome.com.tw/articles/10237385
- 左側 bar 開關： `ctrl + B`

## 討論截圖
救命八人全到齊阿！剩下兩位還找不到 slack ID 阿！
> 更新：隔天找到人啦！