jnk1m
Foliage IT
jnk1m
전체 방문자
오늘
어제
  • 분류 전체보기 (209)
    • Today I Learned (34)
    • Java (47)
    • Database (15)
    • [NHN Academy] (27)
    • Spring (47)
    • HTML + CSS + JavaScript (11)
    • JSP (3)
    • Node.js (10)
    • React Native (2)
    • 기타 (8)
    • 스크랩 (5)

인기 글

최근 글

티스토리

hELLO · Designed By 정상우.
글쓰기 / 관리자
jnk1m

Foliage IT

[HTML] 연습 문제
HTML + CSS + JavaScript

[HTML] 연습 문제

2022. 3. 3. 22:20

01.

<!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>My Homepage</title>
</head>
<body>
<table border="1">
   <tr>
      <td rowspan="4"><img src="test.jpg" width="100px"></td>
      <td colspan="4">이력서</td>
   </tr>
   <tr>
      <td rowspan="2">성명</td>
      <td rowspan="2">&nbsp;</td>
      <td colspan="2">주민등록번호</td>
   </tr>
   <tr>
      <td colspan="2">&nbsp;</td>
   </tr>
   <tr>
      <td colspan="4"><pre> 생년월일         년         월         일생  (만  세)</pre></td>
   </tr>
   <tr>
      <td>주소</td>
      <td colspan="4">&nbsp;</td>
   </tr>
   <tr>
      <td rowspan="2">연락처</td>
      <td>집</td>
      <td>&nbsp;</td>
      <td rowspan="2">전자우편</td>
      <td rowspan="2">&nbsp;</td>
   </tr>
   <tr>
      <td>핸드폰</td>
      <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

 

02.

<!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>My Sign in</title>

   <style>

     table{
       font-family:Arial, Helvetica, sans-serif;
     }
      caption{
         color: #2DB400;
         font-size: 3rem;
         padding-bottom: 15px;
      }
      .last{
         padding-top: 20px;
         text-align: center;
      }

   </style>
</head>
<body>

   <form>
      <table>
         <caption><strong>NAVER</strong></caption>
         <tr>
            <td>아이디</td>
            <td><input type="text" name="id" autofocus placeholder="@naver.com" required></td>
         </tr>  
         <tr>
            <td>비밀번호</td>
            <td><input type="password" name="password" required></td>
         </tr>
         <tr>
            <td>비밀번호 재확인</td>
            <td><input type="password" name="password_check"required></td>
         </tr>
         <tr>
            <td>이름</td>
            <td><input type="text" name="name"required></td>
         </tr>
         <tr>
            <td>생년월일</td>
            <td><input type="date" name="date" required></td>
         </tr>
         
         <tr>
            <td>성별</td>
            <td>
            <select>
               <option>성별</option>
               <option value="female">여자</option>
               <option value="male">남자</option>
               <option value="none">선택안함</option>
            </select>
            </td>
         </tr>
         <tr>
            <td>본인 확인 이메일</td>
            <td><input type="email" name="email" placeholder="선택 입력"></td>
         </tr>
         <tr>
            <td>휴대전화</td>
            <td><input type="tel" name="tel" required
               pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
               title="###-####-####"
               ></td>
         </tr>
         <tr>
            <td rowspan="2">사이트를 알게된 경로</td>
            <td><input type="checkbox" name="path" value="search">웹사이트 검색
               <input type="checkbox" name="path" value="recommended">주변인 추천
            </td>
         </tr>
         <tr>
            <td>
            <input type="checkbox" name="path" value="banner">배너 광고
            <input type="checkbox" name="path" value="tv">티비 광고
           </td>
         </tr>
         <tr>
            <td>개인 홈페이지 URL</td>
            <td><input type="url" name="url"placeholder="선택 입력"></td>
         </tr>
         <tr>
            <td>프로필 사진</td>
            <td><input type="file" name="file"></td>
         </tr>
         <tr>
            <td>&nbsp;</td>
            <td class="last"><input type="submit" name="submit" value="저장">
            <input type="reset" name="초기화"></td>
         </tr>

      </table>

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

 

    'HTML + CSS + JavaScript' 카테고리의 다른 글
    • [JavaScript] Day 01 (Note + Code): 변수, 데이터 타입, 입력문, 배열, 함수
    • [CSS] Day 02 (Note + Code): 반응형 레이아웃
    • [CSS] Day01 (Note + Code): 백그라운드, block & inline, 폰트, 포지션, float, flexbox
    • [CSS] Day01 (Note+Code): 단위, 선택자, 박스 모델

    티스토리툴바