Hi~大家這周過的好嗎?
上週開始參加六角學院切版直播班,希望讓自已的切版能力越來越好但現在的程度還算是很新~
所以希望能把在這八週學到的寫成筆記更加深印象~
這週要來寫寫 Container 容器的概念,這是我第一次聽到原來 CSS 可以這樣命名,了解到了以後發現在這樣的命名方式比較方便也更好維護了,以下整理成筆記:
container 在中文的字面上是容器的意思,可以把底下子層所有的標籤全部包起來,在給 CSS 命名的時候父層可以用 container 讓標籤語意化。
在 HTML 5 出來之前,排版最常用的標籤是 div
span
,但我們如果想要對div
做更進一步的語意化,那就對其做添加 class,如 <div class="header"></div>
標示當前的div裡需要寫的是有關頭部的結果。
那時候還沒有相關常用的 h5 標籤,h5的出現讓標籤語意化更進一大步。
正因為業界前端工程師,已習慣這種編碼習慣,所以即便加上 container 的 class並沒有寫上具體的 css 代碼也會讓排版更加統一方便。
使用 container 的 class也是業界已默認的排版命名方式,可以更加方便的維護,也比較看的懂別人寫的 code進而加速排版品質。
這次的範例就來用這次的版型作業吧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 的用法,讓排版可以越來越好