Hi~大家這周過的好嗎?

上週開始參加六角學院切版直播班，希望讓自已的切版能力越來越好但現在的程度還算是很新~
所以希望能把在這八週學到的寫成筆記更加深印象~
這週要來寫寫 Container 容器的概念，這是我第一次聽到原來 CSS 可以這樣命名，了解到了以後發現在這樣的命名方式比較方便也更好維護了，以下整理成筆記：

什麼是 container

container 在中文的字面上是容器的意思，可以把底下子層所有的標籤全部包起來，在給 CSS 命名的時候父層可以用 container 讓標籤語意化。

在 HTML 5 出來之前，排版最常用的標籤是 div span，但我們如果想要對div做更進一步的語意化，那就對其做添加 class，如 <div class="header"></div>標示當前的div裡需要寫的是有關頭部的結果。
那時候還沒有相關常用的 h5 標籤，h5的出現讓標籤語意化更進一大步。
正因為業界前端工程師，已習慣這種編碼習慣，所以即便加上 container 的 class並沒有寫上具體的 css 代碼也會讓排版更加統一方便。
使用 container 的 class也是業界已默認的排版命名方式，可以更加方便的維護，也比較看的懂別人寫的 code進而加速排版品質。

container 的 寫法

這次的範例就來用這次的版型作業吧XDD

 <div class="container">
​
    <div class="title-bottom-line">
      <h1>Joanne<br />Chen</h1>
    </div>
​
    <div class="photo">
      <img src="images/photo-1536180931879-fd2d652efddc.png" alt="">
    </div>
​
    <div>
      <div class="title-bottom-line">
        <h2>個人資料</h2>
        <span class="title-en">PROFILE</span>
      </div>
      <div class="mb-72">
        <ul>
          <li class="personal">
            <div class="edu">
              陳久安 Joanne Chen<br />
              1997- <br />
              應屆畢業生／接案設計師／UI 設計實習生
            </div>
            <div class="exp">
              UI 設計修行中／立志當斜槓青年<br />
              獨立接案，內容涵蓋：<br />
              品牌規劃、視覺設計、編輯設計、標準字、物件及印刷品設計等。
            </div>
          </li>
        </ul>
      </div>
      <div class="title-bottom-line">
        <h2>學歷</h2>
        <span class="title-en">EDUCATION</span>
      </div>
      <div class="mb-72 item-wrap">
        <ul class="school">
          <li class="school-item time-line">國立六角師範大學 視覺設計學系 學士學位 | 2016－2020</li>
          <li class="school-item">國立六腳高級中學 美術班 | 2013－2016</li>
        </ul>
      </div>
    </div>
​
  </div>

這裡可以看到，外層使用 container 容器把所有以下的程式碼都包起來，就像一個容器能裝各種不一樣的東西樣式，在使用上也更有彈性，如果有 bug 的時候我們也能輕易找到程式碼所在的地方，加速處理bug的速度。

container 容器是我第一次遇到的方法，也開始使用 container 來寫 css，發現真的方便很多呢，程式碼的品質也提升了:) 希望能更了解 container 的用法，讓排版可以越來越好

​