# Web企業運算_Week3

# 練習清單
* 上課內容 : 上課內容皆以Codepn來Demo，以下附連結
* 未能完全理解的網頁排版部分
* 預習Flex排版
* 學習Git基礎指令，上傳網頁至Github
* P.S 希望老師能到網頁版上觀看此份日誌，我希望能透過這堂課練習撰寫技術文章，故心得都以Hackmd模式撰寫
* 本文章連結 : https://hackmd.io/7J_5s2zKQ8Sa7V4HZypZtQ?both

# 程式
### **定位練習**
HTML

<div id="parent">
    <div id="child"></div>
</div>

CSS

#parent {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: black;
}

#child {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  /*  從上層元素開始，向左50px，向下25px  */
  left: 50px; 
  top: 25px;
}

Demo : https://codepen.io/jacky030hsu/pen/vYOzvrE

### CSS Transiton練習 - Leaf
HTML

<div class="leaf"></div>

CSS

.leaf {
  /* 利用absolute + transform */
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: mediumaquamarine;
  /*  左上 + 右下 右上 + 左下  */
  border-radius : 1% 50%;
  /*  透明度  */
  opacity: 0.9;
  transition: all 3s ease-in-out;
}

.leaf:hover {
  transform : rotate(180deg) scale(1.4);
}

Demo : https://codepen.io/jacky030hsu/pen/qBdMLgz?editors=0110

### 球滾動動畫練習
HTML

<!-- 基本位移 -->
<div class="ball ball1">1</div>
<!-- Keyframes 動畫設定 -->
<div class="ball ball2">2</div>
<!-- Transition + Transform -->
<div class="ball ball3">3</div>

CSS

.ball {
  width: 50px;
  height: 50px;
  margin: 50px;
  border : solid 1px black;
  text-align: center;
  border-radius : 50%;
  transition : 1s;
}

.ball1 {
  background-color: red;
}

.ball1:hover {
  transform : translateX(200px) rotate(360deg);
}

.ball2 {
  background-color: blue;
  animation: ball2 4s infinite;
}

@keyframes ball2 {
  0% {
    transform : translateX(0px);
      opacity: 1;
  }
  50% {
    transform : translateX(500px);
    opacity: .5;
  }
  100% {
    transform : translateX(0px);
    opacity: 1;
  }
}

.ball3 {
  background-color: #777;
  transition: all 1.5s ease-in
}

.ball3:hover {
  transform : translateX(250px) scale(1.4);
}

Demo : https://codepen.io/jacky030hsu/pen/YzXOBpG

### **CSS 3D**
HTML

<div class="container">
    <div class="box">0</div>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

CSS

.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 150px;
  background-color:rgba(61, 59, 184, 0.8);
  text-align: center;
  font-size : 3em;
  /*  父元素設定第三人稱視角距離  */
  perspective: 600px;
}

.box {
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  /*  子元素設定以3D模式呈現  */
  transform-style: preserve-3d;
  background-color:rgba(198, 198, 76, 0.7);
  /*  Z軸先移動100px、以Y軸為軸心旋轉90度(此時軸向改變)，最後再將Z軸移動100px  */
  transform : translateZ(100px) rotate3d(0,1,0,90deg) translateZ(100px);
  transition : 1s;
}

.box:hover {
  transform : translateZ(200px);
}

.box1 {
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  background-color:rgba(198, 198, 76, 0.7);
  transform : translateZ(100px) rotate3d(0,1,0,90deg) translateZ(-100px);
  transition : 1s;
}

.box1:hover {
  transform : translateZ(200px);
}

.box2 {
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  background-color: rgba(198, 0, 76, 0.7);
  transform : translateZ(100px) rotate3d(1,0,0,90deg) translateZ(-100px);
}

.box3 {
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  background-color: rgba(0, 198, 76, 0.7);
  transform : translateZ(100px) rotate3d(1,0,0,90deg) translateZ(100px);
}

.box4 {
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  background-color:rgba(255, 3, 0, .5);
  transform : translatZ(200px);
}

Demo : https://codepen.io/jacky030hsu/pen/MWwqLrR?editors=0110

# 成果筆記

* **SVG**
* 可縮放向量圖形 (Scalable Vector Graphics) 的縮寫。它是一種圖形格式，特色是不被限制於某種解析度。
* 參考網站 : https://intersection.tw/%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%B0%8D-svg-%E6%87%89%E8%A9%B2%E6%9C%89%E7%9A%84%E8%A7%80%E5%BF%B5-38ba64b48b32

* **DOM 文件物件模型**
* 全名為 Document Object Model 中文翻譯為 文件物件模型，看起來很抽象但其實就是**把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構**，下面有一張示意圖可以參考。


* **CSS Selector**
* ID 使用方式 #Demo {width:75%};
* Class 使用方式 .demo {width:75%};
* ID與Class差異在於**ID選擇器在一個HTML文件中只能被使用一次，而Class選擇器在一個HTML文件中可以被使用多次**。第二個不同的地方ID選擇器可以被Javascript中的GetElementByID函數所運用，而Class選擇器無法被Javascript運用到。
* 貓頭鷹選取器(* + *)，文件中所有的元素，只要緊接著其他元素，就會套用一個CSS樣式
* **CSS Position**
總共有五種定位方式
1. Static : 網頁預設值，元素間不會產生重疊
Static時，**設定top,bottom,left,right等等無效**
2. Relative : 相對於預設位置進行偏移
Ex.設定Relative後，設定Left : 50px 則元素向左推移50px
3. Absolute : **相對於父元素進行偏移，定位基點為父元素**
限制條件 : **父元素不能為Static定位，否則定位基點會為整個網頁的根元素HTML**
4. Fixed : **相對於瀏覽器(Browser)進行偏移**，位置不隨頁面滾動而變化
5. Sticky : 類似於Relative + Fixed的集合(不支援IE11)
**元素滾動到頁面頂端時，定位轉成Fixed.滾回去會再變回Relative**

* **Flex 佈局概念**
* 設定 : { display:flex; }
* **注意 : 設定為Flex後，Float、Clear、Vertical-align等方式失效**
* 設定Flex的元素，稱做Flex Container.他的所有子元素自動成為Flex Item
* Container存在水平主軸(Main Axis)與垂直交叉軸(Cross Axis)，開始及結束位置分別稱做main start、cross end等等..
* **Item預設依主軸方式排列，每個Item佔據的主軸空間為main size，交叉軸空間為cross size**
* **flex-direction : 決定主軸方向**
* row : 預設。主軸為水平方向，起點在左端
* row-reverse : 水平方向排列，起點在右端
* column : 主軸為垂直方向，起點在上端
* column-reverse : 主軸為垂直方向，起點在下端
* **flex-wrap : 換行方式**
* nowrap(不換行)
* wrap(換行，第一行在上方)
* wrap-reverse(換行，第一行在下方)
* **justify-content : 定義Item在主軸上的對齊方式**
* flex-start : 左對齊
* flex-end : 右對齊
* center : 置中
* space-between : 兩端對齊，Item間間格相等
* space-around : 每個Item兩側的間隔相等
* **align-items : 定義Item在交叉軸上的對齊方式**
* flex-start : 交叉軸起點對齊
* flex-end : 交叉軸終點對齊
* center : 交叉軸中點對齊
* baseline : Item間的第一行文字對齊
* stretch : 預設，若未設置高度，將占滿整個容器

* **CSS Transition**
* 用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。
* transition-property : 哪些 CSS properties 會被轉變效果影響
* **transition-duration : 轉變效果發生的時間**
* transition-timing-function : 設定轉變時依據的貝茲曲線，像是 :
* ease, 等同於 cubic-bezier(0.25, 0.1, 0.25, 1.0)
* linear, 等同於 cubic-bezier(0.0, 0.0, 1.0, 1.0)
* **transition-delay : 多久以後開始發生轉變**

* **CSS 3D**
* 要做 CSS 3D 的效果時，可以先假想兩層的元素。外層是視角，是用**第三人稱**的方向在看著內層；內層就是物件的本身，可以有不同的 3D 屬性(旋轉、位移等等)。
* 外層會提供 perspective 的透視屬性，這是從第三人稱看物件的距離。內層的屬性則必須包含 transform-style: preserve-3d，讓物件本身以 3D 的模式呈現
# 心得
這週開始學習的是CSS排版與HTML的版面設計。另外也學習了一些關於3D Canvas的知識。Canvas3D部分是個人較不熟的環節，所以在這週我會加強這部分的練習，未來或許能將3D設計概念結合到自己的網頁上。排版部分則是針對自己使用沒有那麼熟練的定位以及FLEX概念去做複習，希望能讓自己的排版概念更加精確，並提升實作速度。

近期為了個人網頁與履歷，開始把以前所學慢慢透過練習找回熟悉感。僅僅只會排版是不夠的，我會在這堂課上努力學習程式邏輯方面的相關知識，往前端工程師更進一步。