:::success
【題目】：[https://hackmd.io/@hexschool/BJoAFCcU3](https://hackmd.io/@hexschool/BJoAFCcU3)

<!-- 【檢核】
- [ ] 0 （還少 1 人）
- [ ] 1 （還少 2 人）
- [x] 2
- [x] 3
- [x] 4
- [ ] 5
- [ ] 6
- [ ] 7
- [x] 內容
- [x] 參與名單
- [x] 截圖
-->
:::

## 參與人員
- [X] 阿榮#8277
- [X] PayRoom#8328
- [X] WA#9787
- [X] Tina02
- [x] AYA
- [x] I401#7101
- [x] abalun#6727
- [x] jia yu#8896
- [x] 無敵笨笨貓#3628
- [x] 貓咪#6294

## 第零題 心理測驗
### ⭐組員分享
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的測驗結果~

| 組員 | 人格特質 |
| ----------- | ----------- |
| 阿榮#8277 | [調停者](https://www.16personalities.com/ch/infp-%E4%BA%BA%E6%A0%BC) |
| I401#7101 | [总经理](https://www.16personalities.com/ch/estj-%E4%BA%BA%E6%A0%BC)
| abalun | [鑑賞家](https://www.16personalities.com/ch/istp-%E4%BA%BA%E6%A0%BC) |
| 貓咪#6294 | [主人公](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC) |
| PayRoom|[調停者](https://www.16personalities.com/ch/infp-%E4%BA%BA%E6%A0%BC)
| AYA | [調停者-INFP](https://www.16personalities.com/infp-personality) |
| WA | [主人公](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC) |
| Tina02#2691 | [調停者](https://www.16personalities.com/ch/infp-%E4%BA%BA%E6%A0%BC) |
| 無敵笨笨貓#3628|[主人公](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC) |

## 第一題 分享您的背景給組員們~

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

### 組員分享
#### 阿榮
:::info
嗨，我阿榮拉，土生土長台南人😺
大學念應用外語系，研究所也是(但沒畢業🥹)，後來跑去補習班當了一年半的英文老師，辭職全職學習好一陣子了...很想快點找到工作。

覺得自己的實力還不足，切版技能不夠紮實快速，想再繼續精進。跟著課程的進度練習/加強，還有老師同學的回饋，可以讓基本功更穩固，練功的動力也會很強，希望可以學到很多概念跟心法。

想不到有什麼秘密，分享個小故事好了
家人不知道我有阿榮這個暱稱
我覺得這個名字帶來好運/話題，讓我多認識了不少網友/朋友
有些還有揪團一起出去玩過⭐
:::

#### I401
:::info
Yo ~ I401爹斯，在北高生存
大學會計系，也有當過補習班英文老師 ~~~

目的 : 切好切滿切到厭世

秘密 : 401的由來 網路遊戲ID 喜愛多人戰爭策略遊戲(人心很有趣)

興趣 : 打羽球 (歡迎約打)
:::
#### 貓咪
:::info
哈囉，各位組員好~我是貓咪
背景是資訊管理，周遭的朋友都是工程師，只有我還不是XD
畢業時很迷茫覺得自身技術不足，還沒辦法勝任工程師的工作。
所以在這2年時間裡，做過了行政、餐飲、考研究所等來找方向。
大學期間做過了不少專案都是以後端為主，雖然說累積了不少經驗但實在是提不起興趣，去年考上了交大資工所的同時，學長也推薦我可以往前端的領域去看看，這就是我加入六角的契機了~

分享一個秘密:考研究所只是我大學畢業後不知道要幹嘛的一個打算，最後雖然已經考上了，但在開學的前一個禮拜我就辦理了休學，依然沒有告訴家裡的人。對我來說找到人生的目標比較重要，而不是繼續被書綁架，所以做了這個重大的決定XDD

目標:努力學習前端的知識，並成功轉職前端工程師。
:::

#### abalun
:::info
安安，我是abalun
大學是應用數學系，目前剛畢業，在大學期間大多都在寫後端的東西，前端是由於專題才接觸到，最近幾個月開始認真學習，這次來參加就是想要將切版練得更熟練一點，尤其是bootstrap的部分，希望能在這2-3個內可以找到工作。

秘密的部分想不到有什麼特別可以說的
:::

#### AYA

:::info
嗨嗨，我是 AYA，大學念的是資管系，快畢業時經歷了自我懷疑，覺得自己似乎還不夠好，所以也跑去做過不少產業，服務業跟工廠都待過，後來還是覺得自己滿喜歡寫程式的，就像老師常常在提醒「跟自己比」，最後想想其實只要自己喜歡，有在進步就可以惹，目前正在往準備找工作這個方向努力。

會來上課是深刻感受到自己 CSS 方面特別弱，常常搞不懂為什麼ＲＲＲ，所以希望可以在就業前好好修煉起來 > <
:::

#### PayRoom

:::info
大家好，我是PayRoom，高雄人，應數系畢業，目前幫家裡的農場打工。
之前準備作品寫CSS時，覺得自己寫的很雜亂、沒有規律，所以想藉這次切版班打好CSS的底子
希望能這堂課學好寫CSS時的基本概念、準則與加強一些熟練度，順便練習BootStrap、Tailwind。
小祕密是我幫附近流浪的小橘貓取名叫剛罵(橘子的台語)，雖然只有我這樣叫他XD。

:::

#### jia yu

:::info
哈囉，我是 jia yu~
大學念的是生技與動科系，研究所主要是研究反芻動物營養。畢業後在飼料公司當一年半的顧問助理，工作後才知道畜牧業大多數的工作都很需要業務能力。本身對交際應酬很不在行，在這一年半期間一直覺得和公司與客戶格格不入，剛好在網路看到很多人分享轉職為前端工程師，所以決定轉職。
秘密是因為我是自己住外面，我爸還不知道我是失業中XD，怕回家住會很有壓力所以一直都假裝還在工作
去年10月就開始接觸 udemy 的前端課程，覺得蠻有趣的，今年4月辭職開始全職學習(有更多的時間且也給自己一個$$壓力)，希望能在年底前找到工作。
:::

#### 無敵笨笨貓
:::info
1. Hello 我是笨笨貓 上升處女星座
2. 高雄人 美和科技大學-資訊管理科系
3. 以前是軍人5年退伍 目前物流業
4. 學習切版和熟練度
5. 增加在職場壓力中的切版經驗
6. 研究狂 對星座的星盤有一些學習 喜歡分析不同性格的人格特質
:::

---

<!-- 模板

#### 姓名
:::info
介紹
:::

-->

## 第二題 選擇題
以下題目皆有使用 Meyerweb CSS Reset。

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

:::info
ANS: 2
> 每日任務-DAY2
> https://hackmd.io/@hexschool/S1aBk3_4h
:::

### HTML

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

### 🗣️討論
|問題|討論|
|------|------|
|為什麼是92~93px?| 圖片下方有瀏覽器預留的空間，需加上 display: block 來清除|

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

:::info
ANS: 36 + 24*2+90 + 24*2 = 222px
:::

### 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 的寬高與高度各是多少？(請不要用瀏覽器觀察)

:::info
ANS: 寬高都是 93px
:::

### 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 程式碼
:::info
ANS: [Codepen](https://codepen.io/codeitaday/pen/vYQezwG)
:::

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

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

:::info
ANS: [Codepen](https://codepen.io/NoNameNote/pen/MWzOaNp?editors=1100)
:::

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

### 🗣️討論

| # | 討論 |
|:----:|---------------------------------------------------|
| A |  |
| B | `flex` + `margin` |
| C | `flex` + `justify-between` |

## 語音 & 文字討論截圖

> 【討論時間】： [time=Mon, Jul 09, 2023 20:00 PM]


>
> ~~貓貓小組😸~~
> 
>