06_Simple Coding - CSS - Chapter05 - Sol

강태경·2023년 12월 4일

CSS_Quiz_Sol

목록 보기
4/8

📃 1) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/03_exam_table_box_1.css">
</head>
<body>
    <!-- 힌트 : border-collapse: collapse; (테이블의 안쪽선붙이기 속성) -->
    <!-- table, tr, th, td -->
    <h3>태풍 정보</h3>
    <table>
        <tr>
            <th rowspan="2">일시</th>
            <th colspan="2">중심위치</th>
            <th rowspan="2">중심기압(hPa)</th>
            <th colspan="2">최대풍속</th>
        </tr>
        <tr>
            <td>위도</td>
            <td>경도</td>
            <td>초속(m/s)</td>
            <td>시속(km/s)</td>
        </tr>
    </table>
</body>
</html>

- css

/* 문제 풀이 */
/* 선택자들에게 공통된 속성 적용하기 */
/* 사용법 : 
    선택자, 선택자2, ... {
        속성:값;
    }
*/
table, tr, th, td {
    /* 외곽선 : border: 선두께 선스타일 선색상 */
    border: 1px solid black;
    /* 테이블 선사이 간격 붙이기 속성 */
    border-collapse: collapse;
    /* 안쪽 여백(padding) */
    padding: 8px;
}

📃 2) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 04_exam_2.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/04_exam_2.css">
  </head>
  <body>
    <!-- 힌트 : color, font-weight -->
    <h3 id="title1">딸기</h3>
    <p>
      딸기는 25℃ 이하의 <span id="weather">선선한 기후</span>
      를 좋아하는 여러해살이 열매 채소로 5월에
      열매를 수확합니다. 다른 작물에 비해 잘 기르기 위해서 
      많은 노력이
      필요합니다.
    </p>
    <h3 id="title2">양평 딸기 축제</h3>
    <ul>
      <li>일 시 : 2018년 1월 15일~5월 15일</li>
      <li>장 소 : <span id="location">양평군 
                    내 딸기 마을</span></li>
      <li>연락처 : 031-774-0000</li>
      <li id="notice">일정은 바뀔 수 있으므로 
        방문 전 전화 요망</li>
    </ul>
  </body>
</html>

- css

#title1 {
  color: purple;
}

#title2 {
  color: green;
}

#weather {
  color: red;
  /* 굵은 글씨 */
  font-weight: bold;
}

#location {
  /* 굵은 글씨 */
  font-weight: bold;
}

#notice {
  color: blue;
  /* 굵은 글씨 */
  font-weight: bold;
}

📃 3) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/05_exam_box_3.css">
</head>
<body>
    <h3>도심 속 생태문화공원 서울대공원</h3>
</body>
</html>

- css

h3 {
    /* 외곽선 */
    /* border: 선두께 선스타일 선색상 */
    border: 5px solid #e1285a;
    /* 안쪽 여백 */
    padding: 10px;
    /* 가로 크기 : 고정크기(px) */
    width: 400px;
}

📃 4) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/06_exam_box_4.css">
</head>
<body>
    <!-- 힌트 : border-top, border-left, border-right 등 -->
    <h3 id="title1">도심 속 생태문화공원 서울대공원</h3>
    <h3 id="title2">도심 속 생태문화공원 서울대공원</h3>
    <h3 id="title3">도심 속 생태문화공원 서울대공원</h3>
</body>
</html>

- css

#title1 {
  /* 외곽선 (위쪽) */
  /* border-top: 선두께 선스타일 선색상 */
  border-top: 2px solid black;
  /* 안쪽 여백 */
  padding: 5px;
  /* 가로 크기 */
  width: 345px;
}

#title2 {
  /* 외곽선 (왼쪽) */
  /* border-top: 선두께 선스타일 선색상 */
  border-left: 2px solid #e1285a;
  /* 안쪽 여백 */
  padding: 5px;
}

#title3 {
  /* 외곽선 */
  /* border: 선두께 선스타일 선색상 */
  border: 2px solid skyblue;
  /* TODO: 둥근 사각형(모서리) 속성 */
  /* TODO: 사용법 - border-radius: 크기; (크기가 클수록 원이됨) */
  border-radius: 3px;
  /* 안쪽 여백 */
  padding: 5px;
  /* 가로 크기  */
  width: 345px;
}

📃 5) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 07_exam_box_5.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/07_exam_box_5.css">
  </head>
  <body>
    <h3>웹이란?</h3>
    <p>
      - 웹(Web)은 거미줄을 뜻하는 말로 WWW(World Wide Web)의 약어입니다.<br />
      - 인터넷과 웹 브라우저를 통해 사용자에게 정보를 제공하고 서로 소통하게
      해줍니다.<br />
      - 웹과 관련된 직업에는 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹
      프로그래머가 있습니다.<br />
    </p>
  </body>
</html>

- css

h3 {
    /* 외곽선 */
    /* border: 선두께 선스타일 색깔 */
    border: 5px solid blue;
    /* 안쪽 여백 */
    padding: 20px;
    /* 바깥 여백 */
    margin: 30px;
}

📃 6) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/08_exam_box_6.css">
</head>
<body>
    <h3>동물원 속 온실식물원</h3>
    <p>
        온실식물원은 울창한 숲으로 둘러싸인 청계산 자락에 위치하고
        있으며, 총 928종의 다양한 식물이 전시되고 있습니다.
    </p>
</body>
</html>

- css

h3 {
  /* 왼쪽 외곽선 */
  /* border-left: 선두께 선스타일 선색깔 */
  border-left: 8px solid blue;
  /* 안쪽 여백(왼쪽) */
  padding-left: 10px;
}

p {
  /* 외곽선 */
  /* border: 선두께 선스타일 선색깔 */
  border: 1px solid black;
  /* 가로크기 */
  width: 500px;
  /* 안쪽 여백 */
  padding: 20px;
  /* 바깥 여백(위쪽) */
  margin-top: 20px;
}

📃 7) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 09_exam_box_7.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/09_exam_box_7.css">
  </head>
  <body>
    <!-- 힌트 : border-bottom: 1px dotted gray; -->
    <!-- list-style-type: none; -->
    <h3>주말 야간 개장 안내</h3>
    <ul>
      <li>- 기간 : 7.28~8.20 09:00~21:00 (입장마감 20시)</li>
      <li>- 대상 : 동물원, 식물원</li>
      <li>- 프로그램 : 야간동물원 관람, 동물생태 설명회, 식물전시</li>
    </ul>
  </body>
</html>

- css

h3 {
    /* 바깥여백 */
    margin-top: 20px;
    margin-left: 20px;
}

ul {
    /* border: 선두께 선스타일 색상 */
    border: 1px solid black;
    /* 축약형 : padding 상 우 하 좌 */
    padding: 20px 30px 30px 30px;
    /* 가로크기  */
    width: 450px;
    /* 축약형 : margin 상 우 하 좌 */
    margin: 20px 0 0 20px;
}

li {
    /* 목록 앞에 점 없애기 */
    list-style-type: none;
    /* 외곽선(점선) */
    /* border-bottom: 선두께 선스타일(점선) 색상 */
    border-bottom: 1px dotted gray;
    /* 안쪽 여백(축약형) : padding 상 우 하 좌 */
    padding: 10px 0 10px 0;
}

📃 8) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/10_exam_box_8.css">
</head>
<body>
    <h3>이용요금</h3>
    <p>행복카드 소지자는 본인 확인 후 입장료 30% 할인</p>
    <ul>
        <li>만 5세 이하, 만 65세 이상 무료</li>
        <li>단체는 30인 이상 30% 할인</li>
        <li>단체 관람 시 인솔 교사는 무료</li>
    </ul>
</body>
</html>

- css

/* 문제 풀이 : 예제 (모든 태그에 박스 적용하기) */
body {
    /* 사용법 : border: 선두께 선스타일 선색상 */
    border: 1px solid red;
}

h3 {
    border: 1px solid blue;
}

p {
    border: 1px solid green;
}

ul {
    border: 1px solid red;
}

li {
    border: 1px solid blue;
}

📃 9) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/11_exam_box_9.css">
</head>
<body>
    <!-- 힌트 : border-left, padding-left, margin -->
    <h3>이용요금</h3>
    <p>행복카드 소지자는 본인 확인 후 입장료 30% 할인</p>
    <ul>
        <li>만 5세 이하, 만 65세 이상 무료</li>
        <li>단체는 30인 이상 30% 할인</li>
        <li>단체 관람 시 인솔 교사는 무료</li>
    </ul>
</body>
</html>

- css

/* 문제 풀이 */
/* 코딩용어 : ;(세미콜론), :(콜론), /(슬래쉬), \(역슬래쉬) */
h3 {
    /* 외곽선 */
    /* border-left: 선두께 선스타일 색깔; */
    border-left: 5px solid blue;
    /* 바깥여백 */
    margin: 20px;
    /* 안쪽여백 */
    padding-left: 10px;
}

p {
    /* 바깥여백 - 왼쪽 */
    margin-left: 30px;
    /* 바깥여백 - 아래쪽 */
    margin-bottom: 10px;
}

ul {
    /* 외곽선 - 위쪽 */
    border-top: 1px solid gray;
    /* 외곽선 - 아래쪽 */
    border-bottom: 1px solid gray;
    /* 바깥여백 - 외쪽 */
    margin-left: 45px;
    /* 안쪽여백 - 위쪽 */
    padding-top: 5px;
    /* 안쪽여백 - 아래쪽 */
    padding-bottom: 8px;
}

li {
    /* 안쪽 여백 - 위쪽 */
    padding-top: 10px;
    /* 바깥 여백 - 왼쪽 */
    margin-left: 20px;
}

📃 10) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/12_exam_box_color.css">
</head>
<body>
    <!-- 힌트 : background-color, color, padding, text-align
        width, height
     -->
    <h3>캠핑장 9월 예약</h3>
    <ul>
        <li>9월분 예약 2019년 8월 16일(수) 14:00부터~</li>
        <li>문의전화: 031-222-1234</li>
    </ul>
    <div id="button">
        <!-- &gt; : 특수태그 (greater than) > -->
        자세히 보기 &gt;
    </div>
</body>
</html>

- css

body {
    /* 배경색 */
    background-color: yellow;
}

#button {
    /* 배경색 */
    background-color: blue;
    /* 가로크기 */
    width: 120px;
    /* 세로크기 */
    height: 25px;
    /* 글자색 */
    color: white;
    /* 안쪽여백 */
    padding: 8px;
    /* 글자 중앙 정렬 */
    text-align: center;
}

📃 11) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 13_exam_box_color_2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/13_exam_box_color_2.css">
</head>
<body>
    <!-- 힌트 : #banner - width: 320px, height: 180px -->
    <!--        #button - width: 100px, font-size: 12px
                        , border-radius: 5px
     -->
    <div id="banner">
        <h3>산림욕장 안내</h3>
        <p>470여 종의 식물과 다람쥐, 산토끼, 족제비,
            너구리 및 35종의 새들이 살고 있는
            최적의 자연학습장입니다.
        </p>
        <div id="button">
            자세히보기 &gt;
        </div>
    </div>
</body>
</html>

- css

/* 문제 풀이 */
/* css 디자인 여백 초기화 */
/* 웹브라우저 (크롬, 익스플러러, 파이어폭스 등) */
* {
    padding: 0;
    margin: 0;
}

#banner {
    /* 배경색 */
    background-color: #f6e9ed;
    /* 가로크기 */
    width: 320px;
    /* 세로크기 */
    height: 180px;
    /* 외곽선 */
    /* border: 선두께 선스타일 선색상 */
    border: 1px solid #cccccc;
    /* 안쪽 여백 */
    padding: 20px;
    /* 바깥여백 : 위쪽 */
    margin-top: 20px;
    /* 바깥여백 : 왼쪽 */
    margin-left: 20px;
}

p {
    /* 바깥여백 : 위쪽 */
    margin-top: 20px;
}

#button {
    /* 배경색 */
    background-color: #e1285a;
    /* 가로크기 */
    width: 100px;
    /* 둥근 사각형(모서리) */
    border-radius: 5px;
    /* 글자색 */
    color: white;
    /* 글자 크기 */
    font-size: 12px;
    /* 안쪽 여백 */
    padding: 5px;
    /* 글자 중앙 정렬 */
    text-align: center;
    /* 바깥여백 - 위쪽 */
    margin-top: 30px;
}

📃 12) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/15_exam_back_img.css">
</head>
<body>
    <!-- 힌트 : url(경로) ../ -->
    <!-- div - margin-left: 210px -->
    <!-- p - margin-left: 130px -->
    <!-- background-image:url(), background-repeat:no-repeat -->
    <p>
        가족과 즐거운 크리스마스를 보내세요~~~
    </p>
    <div>
        카드 보내기
    </div>
</body>
</html>

- css

body {
    /* 배경 이미지 */
    background-image: url("../img/bg2.jpg");
    /* 이미지 반복 중단 속성 */
    background-repeat: no-repeat;
}

p {
    /* 글자 크기 */
    font-size: 20px;
    /* 바깥여백 - 위쪽 */
    margin-top: 160px;
    /* 바깥여백 - 왼쪽 */
    margin-left: 130px;
    /* 가로 크기 */
    width: 280px;
}

div {
    /* 가로 크기 */
    width: 120px;
    /* 바깥여백 - 왼쪽 */
    margin-left: 210px;
    /* 바깥여백 - 위쪽 */
    margin-top: 30px;
    /* 배경색 */
    background-color: blue;
    /* 글자색 */
    color: white;
    /* 글자 중앙 정렬 */
    text-align: center;
    /* 안쪽 여백 */
    padding: 8px;
}

📃 13) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/16_exam_back_img2.css">
</head>
<body>
    <!-- 힌트 : margin 이용(위쪽, 왼쪽) 
        no-repeat 안씀
    -->
    <div id="shop">
        <!-- 카드 이미지 -->
        <img src="./img/shop_now.jpg" />
    </div>
    <div id="button">
        <!-- 버튼 이미지 -->
        <img src="./img/detail.png" />
    </div>
</body>
</html>

- css

/* 디자인 공식 */
/* 컨텐츠크기(순수한 이미지, 글자 등) */
/* 전체 가로 크기 =  컨텐츠 가로 크기 + 2*padding + 2*margin */
/* 전체 세로 크기 =  컨텐츠 세로 크기 + 2*padding + 2*margin */
/* 예) 전체 body 가로 크기 : 700px */
/* 700 = 컨텐츠가로크기 + 2*padding + 2*margin  */

/* 여백 초기화 */
* {
    padding: 0;
    margin: 0;
}

body {
    /* 배경 이미지: url("이미지경로") */
    background-image: url("../img/sale_bg.png");
}

#shop {
    /* 간단한 위치 이동 : 마진 활용 */
    /* 바깥여백 - 위쪽 */
    margin-top: 50px;
    /* 바깥여백 - 왼쪽 */
    margin-left: 30px;
}

#button {
    /* 바깥여백 - 위쪽 */
    margin-top: 30px;
    /* 바깥여백 - 왼쪽 */
    margin-left: 190px;
}

📃 14) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 17_exam_schedule.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/17_exam_schedule.css">
  </head>
  <body>
    <!-- 힌트 : border-collapse: collapse;(선사이 간격 붙이기) 
      table - width:610px, font-size:12px, border, margin
            , border: 1px solid #aaaaaa;
      div - width:610px, 오른쪽정렬 text-align:right
      tr - height: 60px (행)
      td - width: 76px, padding: 5px (열), border: 1px solid #aaaaaa;
    -->
    <h3>나의 일정</h3>
    <div>◀ 2020년 7월 ▶</div>
    <table>
      <tr>
        <td>일</td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
        <td>토</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>1</td>
        <td></td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>14<br />기말고사</td>
        <td>15<br />기말고사</td>
        <td>16<br />기말고사</td>
        <td>17<br />기말고사</td>
        <td>18<br /></td>
        <td>19</td>
      </tr>
      <tr>
        <td>20</td>
        <td>21<br />하계방학</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
      </tr>
      <tr>
        <td>27</td>
        <td>28</td>
        <td>29<br />연수</td>
        <td>30<br />연수</td>
        <td>31</td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

- css

body {
    /* 글자색 */
    color: #444444;
}

/* 나의 일정 제목 */
h3 {
    /* 외곽선 - 왼쪽 */
    /* border-left: 선두께 선스타일 선색상 */
    border-left: 5px solid green;
    /* 안쪽 여백 - 왼쪽 */
    padding-left: 10px;
}

/* 날짜 */
div {
    width:610px;
    text-align: right;
}

/* 공통 속성 : 
    선택자,선택자2 ... {}
*/
table, td {
    border: 1px solid #aaaaaa;
}

table {
    /* 테이블 선사이 간격 붙이기 속성 */
    border-collapse: collapse;
    /* 가로 크기 */
    width: 610px;
    /* 글자 크기 */
    font-size: 12px;
    /* 바깥 여백 - 위쪽 */
    margin-top: 15px;
}

tr {
    height: 60px;
}
td {
    width: 76px;
    padding: 5px;
}

📃 15) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 18_exam_train.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/18_exam_train.css">
  </head>
  <body>
    <!-- 힌트 : table - border-collapse: collapse;(선사이 붙이기 속성) 
                        width: 610px, border, 
               table, td, tr : border
               tr : 글자 중앙정렬(text-align:center)
               #col1, #col4 ~ : width:90px
    -->

    <h2>열차표 예매</h2>
    <table>
      <!-- 테이블 제목 -->
      <tr id="table_title">
        <th>열차번호</th>
        <th>출발</th>
        <th>도착</th>
        <th>출발시간</th>
        <th>특실</th>
        <th>일반실</th>
        <th>소요시간</th>
      </tr>
      <tr>
        <td id="col1" class="train">199</td>
        <td id="col2">수원</td>
        <td id="col3">대전</td>
        <td id="col4">10:00</td>
        <td id="col5"><img src="https://i.postimg.cc/mDcRkxKc/empty.png" /></td>
        <td id="col6"><img src="https://i.postimg.cc/QdX35KRZ/full.png" /></td>
        <td id="col7">01:44</td>
      </tr>
      <tr>
        <td class="train">230</td>
        <td>수원</td>
        <td>대전</td>
        <td>11:30</td>
        <td><img src="https://i.postimg.cc/mDcRkxKc/empty.png" /></td>
        <td><img src="https://i.postimg.cc/QdX35KRZ/full.png" /></td>
        <td>01:38</td>
      </tr>
    </table>
  </body>
</html>

- css

table {
    /* 테이블 선사이 간격 붙이기 속성 */
    border-collapse: collapse;
    /* 가로 크기 */
    /* 화면단위 : px(고정크기), %(반응형단위)
                , vw(가로, viewport width), vh(세로, viewport height) */
    /* viewport : 모니터의 화면(pc 모니터에 맞추어 보임, 테이블에 맞추어 보임) */
    /* 예) 코딩 시 100vw(가로) -> pc , 테블릿 등에서 적절하게 화면을 맞추어 줌 */
    width: 610px;
}
/* 같은 선택자일 경우(기본) : 디자인 적용 우선순위 -> 밑으로 갈수록 우선됨 */
table, td, th {
    /* 외곽선 */
    /* border: 선두께 선스타일 선색상 */
    border: 1px solid #cccccc;
}

/* 행 */
tr {
    /* 글자 정렬 : 중앙 */
    text-align: center;
}

/* 열 */
td, th {
    /* 안쪽 여백 */
    padding: 5px;
}

/* 테이블 제목 : 배경색, 세로크기 */
#table_title {
    /* 세로 크기 */
    height: 30px;
    /* 배경색 */
    background-color: #eeeeee;
}

/* 1열 : 분홍색(배경색), 밑줄, 굵은 글씨 */
.train {
    /* 배경색 */
    background-color: #fbdbf2;
    /* 글자색 */
    color: #f1477b;
    /* 밑줄 */
    text-decoration: underline;
    /* 굵은 글씨 */
    font-weight: bold;
}

/* 참고 : 생략 해도 됨 */
#col1, #col4 {
    /* 가로 크기 */
    width: 90px;
}
#col2, #col3 {
    /* 가로 크기 */
    width: 60px;
}
#col5, #col6 {
    /* 가로 크기 */
    width: 80px;
}

📃 16) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/23_exam_google_font.css">
</head>
<body>
    <!-- TODO: h1 - Moirai One 구글 웹폰트 적용 -->
    <!-- TODO: p - Diphylleia 구글 웹폰트 적용 -->
    <h1>홍길동의 블로그</h1>
    <p>안녕하세요 홍길동입니다.
        홍길동의 블로그 홈페이지에 오신 것을 환영합니다.
    </p>
</body>
</html>

- css

/* 문제 풀이 : Moirai One, Diphylleia */
@import url("https://fonts.googleapis.com/css2?family=Moirai+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Diphylleia&display=swap");

/* Moirai One 적용 */
h1 {
  /* 글자 중앙 정렬  */
  text-align: center;
  /* 구글 웹폰트 */
  font-family: "Moirai One", cursive;
}
/* Diphylleia */
p {
  /* 글자 중앙 정렬  */
  text-align: center;
  /* 구글 웹폰트 */
  font-family: "Diphylleia", serif;
}
profile
강태경
IT FullStack 강사
이전 포스트

06_Simple Coding - CSS - Chapter05 - Quiz

다음 포스트

07_Simple Coding - CSS - Chapter06 - Quiz

0개의 댓글