이스트캠프 HTML CSS 퀴즈 2

📘 오늘 학습한 내용

1️⃣ table 태그

📝 퀴즈

🧩 퀴즈 1

Q. 아래 사진과 같은 표를 작성하세요.

20250411_quiz_q1.png

📝 나의 답변:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>멘토 퀴즈</title>
    <style>
        table, td, th{
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        thead tr {
            border-bottom: 2px solid black;
        }

        th {
            background-color: lightgray;
        }

        th:first-child {
            border-right: 2px solid black;
        }

        td:first-child{
            border-right: 2px solid black;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>구분</th>
                <th>2016년</th>
                <th>2022년</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>철학</td>
                <td>50.0%</td>
                <td>54.9%</td>
            </tr>
            <tr>
                <td>소설</td>
                <td>40.7%</td>
                <td>53.4%</td>
            </tr>
            <tr>
                <td>자기계발</td>
                <td>51.0%</td>
                <td>51.6%</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

20250411_css_quiz_a1.png

🧩 퀴즈 2

Q. css 선택자가 적용되는 우선순위를 말해보세요.

📝 나의 답변:

!important 인라인스타일 id선택자 class선택자 태그

✅ 정답:

!important 인라인스타일 id선택자 class선택자 속성선택자 태그 가상클래스