티스토리 뷰

Front-end/Basic

HTML+CSS+자바스크립트 웹 표준의 정석 5장 마무리 문제

poopooreum 2024. 7. 2. 21:31
반응형

✏️ 5장 마무리 문제 - 1번

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>5-1 마무리 문제</title>
    <style>
      ul {
        list-style: none;
      }
      li {
        line-height: 50px;
      }
      label {
        width: 60px;
        float: left;
      }
    </style>
  </head>
  <body>
    <h1>예약 정보</h1>
    <form>
      <ul>
        <li>
          <label for="user-name">이 름</label>
          <input type="text" id="user-name" />
        </li>
        <li>
          <label for="user-tel">전 화</label>
          <input type="tel" id="user-tel" />
        </li>
        <li>
          <label for="user-email">이메일</label>
          <input type="email" id="user-email" />
        </li>
        <li>
          <input type="submit" value="예약하기" />
        </li>
      </ul>
    </form>
  </body>
</html>

✏️ 5장 마무리 문제 - 2번

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>5-2 마무리 문제</title>
    <style>
      #content {
        border: 1px solid black;
        margin: 0 auto;
        width: 520px;
        padding: 20px 40px;
      }
      ul {
        list-style: none;
      }
      li {
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <h1>프런트엔드 개발자 지원서</h1>
      <p>
        HTML, CSS, 자바스크립틔 기술을 이해하고 실무 경검이 있는 분을 찾습니다.
      </p>
      <hr />
      <form>
        <h4>개인정보</h4>
        <ul>
          <li>
            <label for="name">이름</label>
            <input
              type="text"
              id="name"
              placeholder="공백 없이 입력하세요"
              autofocus
            />
          </li>
          <li>
            <label for="tel">연락처</label>
            <input type="tel" id="tel" />
          </li>
        </ul>
        <h4>지원 분야</h4>
        <ul>
          <li>
            <label
              ><input type="radio" value="an" name="field" />웹 퍼블리싱</label
            >
          </li>
          <li>
            <label
              ><input type="radio" value="develop" name="field" />웹
              애플리케이션 개발</label
            >
          </li>

          <li>
            <label
              ><input type="radio" value="envi" name="field" />개발 환경
              개선</label
            >
          </li>
        </ul>
        <h4>지원동기</h4>
        <textarea
          id="motive"
          cols="60"
          rows="5"
          placeholder="봉사 지원 동기를 간략히 써 주세요."
        ></textarea>
        <div id="container">
          <input type="submit" value="접수하기" />
          <input type="reset" value="다시 끄기" />
        </div>
      </form>
    </div>
  </body>
</html>
반응형
저작자표시 비영리 변경금지

'Front-end > Basic' 카테고리의 다른 글

HTML+CSS+자바스크립트 웹 표준의 정석 8장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 7장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 6장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 4장 마무리 문제  (0) 2024.07.02
[Web] 기본 지식 익히기  (0) 2024.04.13
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함