Zenn
🌊

2024 切版上機考

2024/10/09に公開
2024
hexschool
切版直播班
上機考
idea

はじめに

切版課程結束後有一場線上的切版上機考試，主要考試範圍為上課所學習到的相關知識。

考試規則

  • 考試時間為 120 分鐘，逾時視為未通過
  • 題目共分為：選擇題 20 題、實作題 1 題
  • 考試時需全程分享螢幕並且錄製
  • 考試時不可使用 AI、外接螢幕查找資料

模擬考

在正式考試前一週有一個模擬考，主要是在確保操作流程以及螢幕錄製正常，避免實際考試的時候慌張影響表現，
並且有 1 題簡易版本的實作題和 3 題的選擇題試水溫，
雖然這麼說…實際考試的時候還是慌個一波。

正式上機考

選擇題

選擇題

Q1：請問下列哪個 CSS 語法可以移除 <img> 圖片下方的不明空隙？

  1. margin-bottom: 0;
  2. padding-bottom: 0;
  3. vertical-align: middle;
  4. display: inline-block;

答案： 3

Q2 ：請問下列關於區塊元素與行內元素的敘述，何者有誤？

  1. 區塊元素會自適應父層寬度
  2. 區塊元素即使設定了寬度，仍然會獨佔一行
  3. 行內元素預設無法設定 CSS 寬度和高度
  4. 行內元素和區塊元素都可以使用 margin-top 或 margin-bottom 推出高度

答案：4

Q3: 請問下列關於 HTML 標籤的敘述，何者正確？

  1. <img> 的 alt 屬性是給工程師看的，有沒有寫都不會有影響
  2. <div> 和 <span> 都是沒有語意的標籤，通常會用來排版或裝飾
  3. <p> 是行內元素，會和其它行內元素並排在同一行
  4. <ul>、<ol> 的下一層可以塞 <li>、<ul>、<ol> 以外的標籤

答案： 2

Q4: 請問根據以下的程式碼，.item 的寬度會是多少 px 呢？

<div class="item"></div>
<style>
    .item {
        width:100px;
        height: 100px;
        padding: 0 25px;
        border: 2px solid black;
        box-sizing: border-box;
    }
</style>
  1. 100
  2. 104
  3. 150
  4. 154

答案：1

Q5：請問下列關於 flex 語法的敘述，何者有誤？

  1. 父層只有設定 display: flex; 的情況下，如果子元素沒有特別設定高度，會被拉伸與最高的子元素等高
  2. 於父層使用 justify-content: space-between;，可以讓子元素貼齊父層的邊緣，以及平均分配之間的間距
  3. 於父層使用 align-self: center;，可以讓每個子元素垂直置中
  4. 如果想讓行內元素從上到下排列，可以於父層使用 flex-direction: column; 來達成

答案：3

Q6：請問下列關於偽元素的敘述，何者錯誤？

  1. 可以在設定的元素前方或後方新增元素
  2. 使用時一定要加入 content: "" 才會顯示在畫面上
  3. 偽元素不是真正的網頁元素，但行為與表現又和真正的網頁元素一樣
  4. 偽元素無法使用 position 語法來定位

答案：4

Q7：請問根據以下的程式碼，<div class="box"></div> 的背景會是什麼顏色？

<div class="box"></div>

<style>
    * {
        background-color: gray;
    }

    div {
        background-color: red !important;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
  1. 灰色
  2. 紅色
  3. 綠色
  4. 瀏覽器的預設顏色

答案: 2

Q8：請問下列關於文字設定的敘述，何者有誤？

  1. 一行文字的高度是由 font-size 來決定的，與行高無關
  2. 在設定字體的時候，在後方加上通用字型可以確保所有的裝置都能正確瀏覽
  3. font-size 除了使用 px 也可以使用 rem 做設定
  4. font-weight 可以使用 normal、bold 或是數字 400、500 等等做設定

答案：1

Q9: 請問下列關於 Bootstrap 格線系統的敘述，何者正確？

  1. .col-* 的外層沒有使用 .row 不會影響格線系統的呈現
  2. 格線系統最外層建議加入 .container，確保左右保持一定的間距
  3. 小區塊的內容也適用格線系統，例如：選單的選項 或是 banner 上有可能會更動的文案
  4. 可以使用 Utilities 調整 .col-* 的寬度 或 左右 padding，不會破壞格線的一致性

答案：2

Q10：請問下列關於 Bootstrap 元件的敘述，何者有誤？

  1. 部分元件必需引入 JS 才能運作
  2. data-bs-toggle 是用來設定套用的元件，例如：modal、collapse 等等
  3. aria-* 開頭的標籤可以有效的幫助視障人士了解網頁內容、改善使用者體驗
  4. 元件的樣式都是固定的，沒辦法使用通用類別去做微調

答案：4

Q11: 請問根據以下的程式碼，在螢幕寬度 992px 以下的裝置，按鈕的背景會是什麼顏色？

<button type="button" class="btn">按鈕</button>

<style>
    .btn {
        background-color: pink;
    }

    @media(max-width: 992px){
        button {
            background-color: black;
        }
    }
</style>
  1. 粉色
  2. 黑色
  3. 瀏覽器的預設顏色
  4. 發生錯誤

答案：1

Q 12：請問根據以下的程式碼，如果想在螢幕寬度 ****768px 以下的裝置，讓 .item 由上到下排列，下列哪一個選項會無法達成？

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

<style>
    .box {
        width: 100px;
        height: 100px;
        display: flex;
        flex-wrap: wrap;
    }

    .item {
        width: 50%;
        height: 50px;
    }

    @media (...a...){
        .box {
            ...b...
        }

        .item {
            ...c...
        }
    }
</style>
  1. A 位置：斷點可以設置為 @media (min-width: 768px) {...}
  2. B 位置：設置斷點後，可以在 .box 設定 flex-direction: column;
  3. C 位置：設置斷點後，可以在 .item 設定 width: 100%;
  4. 以上的選項都是可以達成需求的其中的一個設定

答案：1

Q13: 請問根據以下的程式碼，如果只是將鼠標放在 .link 上沒有點擊，文字會是什麼顏色？

<a href="#" class="link">文字</a>

<style>
    .link {
        color: pink;
    }

    .link:hover {
        color: skyblue;
    }

    .link:active {
        color: orange;
    }

    .link:focus {
        color: green;
    }
</style>
  1. 粉色 (pink)
  2. 天空藍(skyblue)
  3. 橘色(orange)
  4. 綠色(green)

答案：2

Q 14：如果想將 <img> 於 .box 內水平置中，可以使用下列哪個語法來達成？

<div class="box">
    <img src="https://fakeimg.pl/100x100">
</div>
  1. 於 .box 設定 text-align: center;
  2. 於 <img> 設定 margin: 0 auto;
  3. 於 <img> 設定 display: flex; 和 justify-content: center;
  4. 以上的選項都無法達成

答案：1

Q 15：請問根據以下的程式碼，在 md 以下寬度的裝置會是幾欄的排版？

<div class="container">
    <div class="row flex-wrap">
        <div class="col-md-4 col-lg-3">1</div>
        <div class="col-md-4 col-lg-3">2</div>
        <div class="col-md-4 col-lg-3">3</div>
        <div class="col-md-4 col-lg-3">4</div>
        ...
    </div>
</div>
  1. 單欄
  2. 三欄
  3. 四欄
  4. 十二欄

答案：1

Q16：如果希望圖片可以響應式變化，在 <img> 上設定下列哪個語法會最合適？

  1. background-size: 100%;
  2. width: fit-content;
  3. max-width: 100%;
  4. min-width: 100%;

答案：3

Q17：請問下列關於表單元素屬性的敘述，何者錯誤？

  1. value 可以設定欄位的值，並顯示在畫面上
  2. placeholder 設定後，會在輸入框內顯示提示文字
  3. readonly 設定後，欄位的值只能夠被閱讀，無法做修改
  4. disabled 只能將 <input type="text"> 這類型的元素禁用，設定在按鈕上無效

答案：4

Q18：如果希望圖片能夠填滿 .box 且不變形，可以在 img 加入下列哪個語法？

<div class="box">
    <img src="https://fakeimg.pl/700x150/">
</div>

<style>
    .box {
        width: 200px;
        height: 100px;
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>
  1. 不用加入任何語法
  2. fill: inherit;
  3. object-fit: cover;
  4. aspect-ratio: auto;

答案：3

Q19：如果希望每一張卡片能依據最多內容的卡片來維持等高，可以在 .card 加入什麼設定？

  1. height: 100%;
  2. height: 100vh;
  3. align-self: stretch;
  4. align-items: stretch;

答案：1

Q20：請問下列關於容器(container)的敘述，何者錯誤？

  1. 網頁的主要內容通常會放在 container 裡，可以讓視覺專注在畫面中間便於瀏覽
  2. 設定左右的 padding 可以避免響應式時內容過於貼齊裝置的邊緣
  3. 通常會搭配 margin: 0 auto; 讓 container 水平置中於畫面上
  4. container 的寬度可以使用百分比來設定，Bootstrap 的 .container 寬度就是使用百分比來設定的

答案：4

最後に

拿到 S 等啦~好開心😃

雖然拿到了 S 等，但閱卷助教還是有一些提醒：

  • 表單要記得用 form 包起來
  • label for 和 input id 要調整
  • 連絡電話的 type 要使用 tel

我當時就在想說電話的 type 是什麼去了，最後想不到就寫了 number ，想說都是數字ww
而且真的太緊張了，本來不熟的表單真的是寫的亂七八糟，
這次考試真的就是怕什麼來的什麼。
老師們果然很會出題 🫠 (你們最壞)

還是要感謝六角提供了這個方式，讓我們在完課之餘也能統整自己的知識點，了解自己是不是還有哪邊基礎不足或是誤區，
看著獎狀也是一種給自己的肯定，這幾個月的努力不是白費的。
emo 的時候翻出來看一看又可以重新回復能量啦~

Discussion