07_Simple Coding - CSS - Chapter06 - Quiz

강태경·2023년 12월 4일

CSS_Quiz_Sol

목록 보기
5/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/05_exam_display.css">
</head>
<body>
    <h3>이미지 갤러리</h3>
    <ul>
        <li><img src="./img/cat.jpg" alt="고양이"></li>
        <li><img src="./img/bee.jpg" alt="벌"></li>
        <li><img src="./img/rabit.jpg" alt="토끼"></li>
    </ul>
</body>
</html>

- css

📃 2) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 06_exam_menu.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/06_exam_menu.css">
</head>
<body>
    <h3>1. 세로 메뉴</h3>
    <ul id='v_menu'>
        <li>CEO 인사말</li>
        <li>조직도</li>
        <li>전화번호 안내</li>
        <li>찾아오시는 길</li>
    </ul>
    
    <h3>2. 가로 메뉴</h3>
    <ul id='h_menu'>
        <li class='menus'>회사소개</li>
        <li>|</li>
        <li class='menus'>제품안내</li>
        <li>|</li>
        <li class='menus'>고객센터</li>
        <li>|</li>
        <li class='menus'>매장안내</li>
    </ul>
    </body>
</html>

- css

📃 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/08_exam_float.css">
</head>
<body>
    <!-- 힌트 : #image - float:left -->
    <!--       #desc - float:left -->
    <!--       #menu - float:right -->
    <div id="image">
        <img src="./img/foxtail.jpg" alt="강아지풀">
    </div>
    <div id="desc">
        <h3>강아지풀</h3>
        <p>길가나 들에서 자라는 풀로써 꽃은 9월에 피고
            녹색 또는 자주색입니다.
        </p>
    </div>
    <ul id="menu">
        <li>강이지풀</li>
        <li>패랭이풀</li>
        <li>할미꽃</li>
        <li>코스모스</li>
    </ul>
</body>
</html>

- css

📃 4) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 09_exam_float2.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_float2.css">
  </head>
  <body>
    <div id="logo">
      <img src="./img/logo2.png" />
      <!-- <img src="https://i.postimg.cc/yNnSv87p/logo2.png" /> -->
    </div>
    <ul id="menu">
      <li class="item">수목원소개</li>
      <li>|</li>
      <li class="item">방문안내</li>
      <li>|</li>
      <li class="item">고객센터</li>
      <li>|</li>
      <li class="item">공지사항</li>
    </ul>
    <div id="main_image">
      <img src="./img/main.jpg" />
      <!-- <img src="https://i.postimg.cc/76d1nZV8/main.jpg" /> -->
    </div>
  </body>
</html>

- css

📃 5) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 12_exam_form_register.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/11_exam_form_register.css">
</head>
<body>
  <!-- 힌트 : #container { width: 600px; margin:0 auto } -->
  <!-- 라벨     .field { 그전에 샘플에 속성:값 } -->
  <!-- 입력양식 .input-box { 그전에 샘플에 속성:값 } -->
  <!-- 버튼 (#buttons > li) : 세로배치 -> 가로배치 (display:inline-block) -->
    <div id="container">
      <h1>회원 가입(#container:margin 0 auto)</h1>
      <form action="#" id="register">
        <!-- 입력란 시작 -->
        <ul id="user-info">
          <li>
            <!-- label 클릭하면 input 양식에 포커스가 옴 -->
            <!-- input - required : 필수입력 -->
            <label for="user-id" class="field">아이디</label>
            <input
              type="text"
              id="user-id"
              class="input-box"
              placeholder="영문과 숫자로 입력"
              required
            />
          </li>
          <!-- ctrl + d : 줄복사/블록복사 -->
          <!-- ctrl + y : 줄삭제 -->
          <!-- ctrl + alt + l : 자동 정렬 -->
          <li>
            <!-- 비밀번호 -->
            <!-- 유효성 체크 : 자리수, 필수입력 -->
            <label for="user-pw1" class="field">비밀번호</label>
            <input
              type="password"
              id="user-pw1"
              class="input-box"
              placeholder="8자리 이상 비밀번호 적기"
              minlength="8"
              required
            />
          </li>

          <li>
            <!-- 비밀번호 -->
            <!-- 유효성 체크 : 자리수, 필수입력 -->
            <label for="user-pw2" class="field">비밀번호 확인</label>
            <input
              type="password"
              id="user-pw2"
              class="input-box"
              placeholder="8자리 이상 비밀번호 적기"
              minlength="8"
              required
            />
          </li>

          <li>
            <!-- email -->
            <!-- input type = email -> 유효성체크 -->
            <label for="user-id" class="field">이메일</label>
            <input type="email" id="user-id" class="input-box" required />
          </li>

          <li>
            <!-- 전화번호 입력 -->
            <!-- 숫자입력 : input type="number" -->
            <label for="phone" class="field">전화번호</label>
            <input type="number" id="phone" class="input-box" required />
          </li>
        </ul>
            <!-- 입력란 끝 -->

        <!-- 서브밋/리셋 버튼 시작 -->
        <ul id="buttons">
            <!-- 서브밋 버튼 -->
            <li>
                <button type="submit" class="btn btnBlack">
                    가입하기
                </button>
            </li>
            <!-- 리셋 버튼 -->
            <li>
                <button type="reset" class="btn btnGray">
                    취소
                </button>
            </li>
        </ul>
        <!-- 서브밋/리셋 버튼 끝 -->

      </form>
    </div>
  </body>
</html>

- css

📃 6) 퀴즈

결과 화면 :

코딩 :

- html

<!-- 18_exam_menu.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_menu.css">
</head>
<body>
    <!-- TODO: 힌트 : #logo { float: left; ,margin-top/bottom/left, border 등 } -->
    <!-- TODO: 힌트 : #top { float: right; ,margin-top/right, border 등 } -->
    <!-- TODO: 힌트 : #menu { clear:both; height:40px, font-size:20px, text-align:center } -->
    <!-- TODO:                color, background-color:#443e58, padding-top -->
    <!-- TODO: #menu li { display: inline-block;} (메뉴 가로배치)-->
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 시작-->
    <!-- float 쓰면 공간이 없는것으로 html 간주 -->
    <div id="head">
        <!-- 좌측 로고 이미지 -->
        <div id="logo">
            <img src="./img/logo.png" alt="회사로고">
            <!-- <img src="https://i.postimg.cc/NFn5VQf6/logo.png" alt="회사로고"> -->
        </div>
        <!-- 우측 소메뉴 -->
        <div id="top">
            로그인 | 회원가입 | 공지사항
        </div>
    </div>
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 끝-->

    <!-- 하단 대메뉴 시작 -->
    <ul id="menu">
        <li class="item">HTML</li>
        <li>|</li>
        <li class="item">CSS</li>
        <li>|</li>
        <li class="item">Javascript</li>
        <li>|</li>
        <li class="item">Python</li>
        <li>|</li>
        <li class="item">PHP</li>
        <li>|</li>
        <li class="item">Java</li>
    </ul>
    <!-- 하단 대메뉴 끝 -->

</body>
</html>

- css

📃 7) 퀴즈

결과 화면 :

코딩 :

- html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="./css/23_exam_poster.css">
</head>
<body>
  <!-- TODO: 힌트 : #container { 가로 중앙정렬 , 가로크기} -->
  <!-- TODO: 힌트 : table, th, td { 선긋기, 선사이간격붙이기 } -->
  <!-- TODO: 힌트 : th, td { 안쪽여백 } -->
  <div id="container">
    <video src="medias/salad.mp4" width="700" autoplay muted loop></video>
    <hr>
    <h2>상품 구성</h2>
    <table>
      <caption>선물용과 가정용 상품 구성</caption>
      <colgroup>
        <col style="background-color:#eee;">
        <col>
        <col span="2" style="width:150px">
        <!-- span 속성을 사용해 합치기 전
        <col style="width:150px">
        <col style="width:150px">
        -->
      </colgroup>
      <thead>
        <tr>
          <th>용도</th>
          <th>중량</th>
          <th>갯수</t>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">선물용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>35,000원</td>
        </tr>
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>52,000원</td>
        </tr>
        <tr>
          <td rowspan="2">가정용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>30,000원</td>
        </tr>   
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>47,000원</td>
        </tr>
      </tbody>        
    </table>
  </div>
</body>
</html>

- css

profile
강태경
IT FullStack 강사
이전 포스트

06_Simple Coding - CSS - Chapter05 - Sol

다음 포스트

07_Simple Coding - CSS - Chapter06 - Sol

0개의 댓글