03. 표 스타일 속성을 사용한 문제

728x90

03. 표 스타일 속성을 사용한 문제

다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.

1. <table> 태그에 포함된 border="1" 속성을 삭제한다.

2. 표와 셀에 테두리 1px solid black를 그린 후 한 줄로 표시한다.

3. 표의 캡션은 표 아래쪽에 표시한다.

4. 각 셀에 padding : 10px을 적용하여 작성한다.

5. 배경색을 #eee로 지정하는 클래스 선택자 .heading을 정의한 후 첫 번째 행과 열에 적용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 문제 3</title>
  
  // 코드를 작성하세요
  
</head>
<body>
  <table border="1">
    <caption>2019 국민 독서실태</caption>
    <thead>
      <tr>
        <th>구분</th>
        <th>성인</th>
        <th>독서자</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>종이책</th>
        <td>6.1권</td>
        <td>11.8권</td>
      </tr>
      <tr>
        <th>전자책</th>
        <td>1.2권</td>
        <td>7.1권</td>
      </tr>
      <tr>
        <th>오디오북</th>
        <td>0.2권</td>
        <td>5.5권</td>
      </tr>      
    </tbody>
  </table>
</body>
</html>

결과 화면

A. 해설

1. <table> 태그에 포함된 border="1" 속성을 삭제한다.

2. 표와 셀에 테두리 1px solid black를 그린 후 한 줄로 표시한다.

--> <table> 스타일와 <td, th> 스타일에 1px solid black을 추가하고, <table> 스타일에 border-collapse 속성을 추가하여 한 줄로 표시한다.

3. 표의 캡션은 표 아래쪽에 표시한다.

--> caption-side 속성을 사용하여 아래쪽으로 지정한다.

4. 각 셀에 padding : 10px을 적용하여 작성한다.

--> <td, th> 스타일에 padding 속성을 추가한다.

5. 배경색을 #eee로 지정하는 클래스 선택자 .heading을 정의한 후 첫 번째 행과 열에 적용한다.

--> heading 클래스 스타일에 background-color 속성으로 배경색을 지정해준 뒤, 첫 번째 행과 열에 클래스 heading을 추가한다. 이때, 색상을 지정하지 않은 열에도 <col> 태그를 추가해야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 문제 3</title>
  <style>
    table {
      border: 1px solid black;
      caption-side: bottom;
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid black;
      padding: 10px;
    }
    .heading {
      background-color: #eee;
    }
  </style>
</head>
<body>
  <table>
    <caption>2019 국민 독서실태</caption>
    <col class="heading">
    <col>
    <col> 
    <thead>
      <tr class="heading">
        <th>구분</th>
        <th>성인</th>
        <th>독서자</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>종이책</th>
        <td>6.1권</td>
        <td>11.8권</td>
      </tr>
      <tr>
        <th>전자책</th>
        <td>1.2권</td>
        <td>7.1권</td>
      </tr>
      <tr>
        <th>오디오북</th>
        <td>0.2권</td>
        <td>5.5권</td>
      </tr>      
    </tbody>
  </table>
</body>
</html>

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글

06. 레이아웃 속성과 여백 속성을 사용한 문제 (0)	2022.05.13
05. 박스 모델 속성과 테두리 속성을 사용한 문제 (0)	2022.05.13
04. 글자 속성과 텍스트 스타일 속성을 사용한 문제 (0)	2022.04.11
02. 텍스트 스타일 속성을 사용한 문제 (0)	2022.04.11
01. 텍스트 스타일 속성과 목록 스타일 속성을 사용한 문제 (0)	2022.04.11