# 切版班-第一週小組任務-第二組

:::success
**小組討論時間：2022 年 07月 11 日 週一 晚上 8:00**
:::
## 第0題 心理測驗

[測驗網址](https://www.16personalities.com/ch)
### 組員心理測驗結果
| 組員 | 測驗結果 |
| -------------- | -------------------------------------------------------------------- |
| Karol-Kuo#5287 | [表演者](https://www.16personalities.com/ch/esfp-%E4%BA%BA%E6%A0%BC) |
| choubree#4350 | [執政官](https://www.16personalities.com/ch/esfj-%E4%BA%BA%E6%A0%BC) |
| Benson#6763 | [守衛者](https://www.16personalities.com/ch/isfj-%E4%BA%BA%E6%A0%BC) |
| JarDar #6980 | [建筑师](https://www.16personalities.com/ch/intj-%E4%BA%BA%E6%A0%BC) |
| Shuo#1596 | [鑑賞家](https://www.16personalities.com/ch/istp-%E4%BA%BA%E6%A0%BC) |
| 香菜#6416 | [守衛者](https://www.16personalities.com/ch/isfj-%E4%BA%BA%E6%A0%BC) |
| 黃士桓#7654 | [表演者](https://www.16personalities.com/ch/esfp-%E4%BA%BA%E6%A0%BC) |
| Gloria#1328 | [建築師](https://www.16personalities.com/ch/intj-%E4%BA%BA%E6%A0%BC) |
|熊二#3824|[物流師](https://www.16personalities.com/ch/istj-%E4%BA%BA%E6%A0%BC)|
|Verien#0392 | [探險家](https://www.16personalities.com/ch/isfp-%E4%BA%BA%E6%A0%BC)|

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

| Discord Name | 暱稱 | 城市/學校/科系 | 工作性質 | 為何參加切版班 | 想獲得什麼養分 | 小秘密 |
| ------------ | ---- | --------- | -------- | -------------- | -------------- | ------ |
|Karol-Kuo#5287|Karol|台南/舞蹈系| 舞蹈教育 | 想要1px也不差 | | |
| JarDar #6980 | JarDar | 桃園/應用數學系 | 程式設計 | 想瞭解切版這回事 | 能理解切版的作法與程序 | @#@ |
| choubree#4350 | Bree | 台南/視覺傳達設計 | 平面設計 | 想轉職 | 各種切版的技巧 | |
| Benson#6763 | Benson | 桃園/資訊管理學系 | MIS | 想轉前端 | 學習切版 | |
|Gloria#1328| 若若 | 台中/教育學系 | 遊戲劇情企劃 | 想轉程式設計師 | 不斷前進的動力 | 小時候想要衛斯理當哥哥，嫁給原振俠。|
|熊二#3824|熊二|台北/電機系|專案主管|身為主管什麼都要學|前端切版能力|心無大志卻被老闆拉著跑|
|香菜#6416 | 香菜 | 桃園/數位多媒體設計系 | 美編 | 轉職前端 | 獲得切版技能 | |
| Shuo#1596 | 碩 | 桃園/電子工程光電與通訊 | 咖啡廳 | 想轉職前端 | 學習切版技能 | |
| 黃士桓#7654 | 黃士桓 | 台北 \| 環境工程學系 | 前端 \| 設計 | 多練多學 參加可以督促自己!? | 看看Tailwind | |
|Verien#0392 | 阿維 |桃園/資管系 |資管 |轉職 | 能夠將構思的想法寫出 |輪班工具人 |
## 第二題 選擇題
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

#### HTML

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

#### 組員答案：
| # | 答案 |
| -------- | -------- |
| Shuo#1596 | 90px |
| choubree#4350 | 90px |
| JarDar #6980 | 92~93px|
| Benson#6763 | 92~93px|
| Karol-Kuo#5287 | 92~93px|
| Gloria#1328 | 92~93px|
|熊二#3824| 92~93px|
|香菜#6416| 90px|
|Verien#0392| 90px|

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

#### 組員答案：
| # | 答案 |
| -------- | -------- |
| Shuo#1596 | 36+(16x1.5+24)x2+90=222px
| choubree#4350 | 36+(16x1.5+24)x2+90=222px |
| JarDar #6980 | 36+(16x1.5+24)x2+90 = 222px |
| Benson#6763 | 36+(16x1.5+24)x2+90 = 222px |
| Gloria#1328 | 36+(16x1.5+24)x2+90 = 222px |
|熊二#3824|36+(16x1.5+24)x2+90 = 222px|
|香菜#6416|36+(16x1.5+24)x2+90=222px|
|Verien#0392| 36+(16x1.5+24)x2+90=222px|

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

#### 組員答案：
| # | 答案 |
| -------- | -------- |
| Shuo#1596 | 寬50+3+20+20=93px 高50+3+20+20=93px
| choubree#4350 | width=50+3+20x2=93px // height=50+3+20x2=93px |
| JarDar #6980 | width= 50+20x2+3=93px, height=50+20x2+3=93px |
| Benson#6763 |寬50+3+20+20=93px, 高50+3+20+20=93px|
Karol-Kuo#5287|w=50+3+20+20=93px h=50+3+20+20=93px
| Gloria#1328 |寬：50+3+20+20=93px, 高：50+3+20+20=93px|
|熊二#3824|寬93px, 高93px|
|香菜#6416|寬50+3+20+20=93px 高50+3+20+20=93px|
|Verien#0392|寬=50+3+20+20=93px；高=50+3+20+20=93px|

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

#### 組員答案：[組員優化程式碼](https://)
| 組員 | CodePen |
| -------- | -------- |
| Shuo#1596 | [codePen](https://codepen.io/chiangchungshuo/pen/PoRZrBx) |
| choubree#4350 | [codePen](https://codepen.io/BreeChou/pen/poLyOrE) |
| JarDar#6980 | [codpen](https://codepen.io/jardarpen/pen/eYMZQQp)|
|Benson#6763| [CodePen](https://codepen.io/kumashow/pen/GRxZPKY)|
|Karol-Kuo#5287| [CodePen](https://codepen.io/ting-yu-kuo/pen/abYZNoj)|
|香菜#6416|[CodePen](https://codepen.io/ss0022/pen/mdxEGVK)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/qBoadEy)|

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

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

#### 組員答案：[組員優化程式碼](https://)

| 組員 | CodePen |
| -------- | -------- |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/zYWqoVO) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/MWVyzZY)|
|Benson#6763|[codepen](https://codepen.io/kumashow/pen/abYNPdy)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/YzaGXyg)|

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

## 小組討論 紀錄
1.以第七題為主要討論內容,組員分享不同的切法並討論～
2.討論主線任務,分享遇到的問題,組員有的知道解決辦法,都熱心的分享～!
3.討論作業繳交方式及期限等等...
[](https://i.imgur.com/fI2p5to.png)