Front-end 국비지원 #004일

NuyHes·2022년 10월 20일
0

table, tr, th, td

table

  • 표를 나타내는 HTML 태그
  • 내부에 행을 나타내는 tr과 셀을 나타내는 th,td태그 등이 사용됨

tr

  • "table row"
  • 표 내부에서 행을 나타내는 태그

th

  • "table header"
  • 헤더 칸(cell)을 나타내는 태그
  • 기본 스타일: 중앙 정렬(text-align:center), 두껍게(font-weight:bold)

td

  • "table data"
  • 일반적인 칸(cell)을 나타내는 태그
  • 기본 스타일: 왼쪽 정렬(text-align:left)
<table>
		<tr>
			<th>순위</th>
			<th>제목</th>
			<th>장르</th>
		</tr>
		<tr>
			<th>1</th>
			<td>인생은 아름다워</td>
			<td>드라마</td>
		</tr>
		<tr>
			<th>2</th>
			<td>공조2</td>
			<td>액션,코미디</td>
		</tr>
		<tr>
			<th>3</th>
			<td>에브리씽</td>
			<td>액션</td>
		</tr>
		<tr>
			<th>4</th>
			<td>정직한후보</td>
			<td>코미디</td>
		</tr>
		<tr><th>5</th>
			<td>오펀</td>
			<td>공포</td>
		</tr>
</table>

  • border-collapse: collapse; / 기본은 두줄

colspan, rowspan 테이블 셀 합치기

colspan: 가로 칸들을 합쳐줌
rowspan: 세로 행의 셀들을 합쳐줌

<table>
		<tr>
			<th scope="col">순위</th>
			<th scope="col">제목</th>
			<th scope="col">장르</th>
			<th scope="col">지난주 순위</th>
		</tr>
		<tr>
			<th scope="row">1</th>
			<td>캐리비안의 해적</td>
			<td>판타지</td>
			<td rowspan="3">없음</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>트랜스포머</td>
			<td>SF</td>
			
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>카2</td>
			<td>애니메이션</td>
		</tr>
		<tr>
			<th scope="row">4</th>
			<td>엑스맨</td>
			<td>SF</td>
			<td>2</td>
		</tr>
		<tr>
			<th scope="row">5</th>
			<td>노팅힐</td>
			<td>드라마</td>
			<td>1</td>
		</tr>
		<tr>
			<th colspan="4">다운로드 순위</th>
		</tr>
	</table>

colgroup 태그

  • HTML colgroup 요소는 표의 열을 묶는 그룹의 정의
  • rowgroup은 없음!
<table>
		<caption>렌터카 요금표</caption>
		<colgroup>
			<col span="1" style="background-color:#cc6";>
			<col span="4" style="background-color:rgb(102, 204, 177)";>
		</colgroup>
		<tr>
			<th scope="col">차종 </th>
			<th scope="col">24시간</th>
			<th scope="col">48시간</th>
			<th scope="col">72시간</th>
			<th scope="col">추가요금</th>
		</tr>
		<tr>
			<td>SM3</td>
			<td> 45,000</td>
			<td> 90,000</td>
			<td> 135,000</td>
			<td> 6,000</td>
			</tr>
		<tr>
			<td>모닝</td>
			<td>42,000</td>
			<td>84,000</td>
			<td>126,000</td>
			<td>6,000</td>
		</tr>
		<tr>
			<td>쏘울</td>
			<td> 61,000</td>
			<td> 122,000</td>
			<td> 183,000</td>
			<td> 9,000</td>
		</tr>
		<tr>
			<td>윈스톰</td>
			<td> 94,000</td>
			<td> 188,000 </td>
			<td> 282,000</td>
			<td> 13,000</td>
		</tr>
	</table>

thead, tbody, tfoot

표의 머리글(thead), 본문(tbody), 바닥글(tfoot)을 지정.
표의 내용을 머리글/본문/바닥글로 나눌 수는 있겠으나 이것이 실질적으로 화면에 표시될 테이블의 레이아웃에 는 영향을 주지 않음.

<table>
        <h1><img src="./images/title_recipe.gif" alt="" ></h1>
        <caption>레시피 재료</caption>
       <thead style="background-color: rgb(219, 219, 219);">
            <tr>
                <th>재료</th>
                <th>첨가량</th>
                <th>48시간</th>
                <th>대체재료</th>
            </tr>
       </thead>
     <tbody>
            <tr>
                <th rowspan="5">수상층</th>
                <td>로즈마리</td>
                <td>30g</td>
                <td rowspan="3">증류수</td>
            </tr>
            <tr>
                <td>네틀추출물</td>
                <td>30g</td>
            </tr>
            <tr>
                <td>증류수</td>
                <td>90g</td>
            </tr>
            <tr>
                <td>폴리쿼터</td>
                <td>1.5g</td>
                <td>쟁탄검</td>
            </tr>
            <tr>
                <td>글리세린</td>
                <td>10g</td>
                <td>히아루론산 10g</td>
            </tr>
            <tr>
                <th rowspan="3">계면<br>활성제</th>
                <td>LES/CDE</td>
                <td>180g/10g</td>
                <td>CDE+LES</td>
            </tr>
            <tr>
                <td>코코베타인</td>
                <td>5g</td>
                <td>X</td>
            </tr>
            <tr>
                <td>애플 계면 활정제</td>
                <td>10g</td>
                <td>올리브 계면 활성제</td>
            </tr>
     </tbody>
        <tfoot style="background-color: rgb(219, 219, 219);">
            <tr>
                <td colspan="4">좋은 향을 위해서면 엘라스틴향 사용 추천</td>
            </tr>
        </tfoot>
    </table>

table,colspan,rowspan을 이용한 이력서만들기

<!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>이력서</title>
    <style>
        table{border: 3px double orange; width: 700px; border-collapse:collapse; margin: 0 auto;}
        th,td{border: 2px solid orange;}
        td{padding-left: 15px;}
        #fo{height: 70px;}
        .title{font-size: 24px;}
        tfoot{height: 100px; text-align: center; }            
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td colspan="3" rowspan="4"></td>
                <th colspan="4" class="title" id="fo">이 력 서</th>
            </tr>
            <tr>
                <th rowspan="2">성명</th>
                <td rowspan="2" colspan="2" style="padding-left: 40px;">X X X</td>
                <th>주민등록번호</th>
            </tr>
            <tr>
                <td style="text-align: center;">840XXX-2XXXXXX</td>
            </tr>
            <tr>
                <th>생년월일</th>
                <td colspan="3" style="text-align: center;">19XX년 XX월 XX일생 (만 XX세)</td>
            </tr>
        </thead>
        <tr>
            <th colspan="3">주&nbsp&nbsp소</th>
            <td colspan="4" style="text-align: center;">경기도 안산시 선부3동 1115-22번지</td>
        </tr>
        <tr>
            <th colspan="3">호적관계</th>
            <td>호주와의관계</td>
            <td>XXX의 자</td>
            <td>호주성명</td>
            <td>XXX</td>
        </tr>
        <tr>
            <th colspan="3">년 월 일</th>
            <th colspan="3">학력 및 경력사항</th>
            <th>발령청</th>
        </tr>
        <tr>
            <td>2002</td>
            <td>02</td>
            <td>14</td>
            <td colspan="3">졸업</td>
            <td></td>
        </tr>
        <tr>
            <td>2002</td>
            <td>05</td>
            <td>00</td>
            <td colspan="3">퇴사</td>
            <td></td>
        </tr>
        <tr>
            <td>2004</td>
            <td>05</td>
            <td>00</td>
            <td colspan="3">퇴사</td>
            <td></td>
        </tr>
        <tr>
            <td>2007</td>
            <td>08</td>
            <td>00</td>
            <td colspan="3">퇴사</td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td colspan="3"></td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td colspan="3" style="text-align: center;">&#9830;자 격 사 항&#9830;</td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>2009</td>
            <td>10</td>
            <td>09</td>
            <td colspan="3">기능사취득</td>
            <td>한국산업인력공단</td>
        </tr>
        <tr>
            <td>2009</td>
            <td>10</td>
            <td>09</td>
            <td colspan="3">1차 합격</td>
            <td>한국산업인력공단</td>
        </tr>
        <tr>
            <td>2001</td>
            <td>05</td>
            <td>17</td>
            <td colspan="3">2급 취득</td>
            <td>한국세무사회</td>
        </tr>
        <tr>
            <td>2000</td>
            <td>02</td>
            <td>11</td>
            <td colspan="3">취득</td>
            <td>한국산업인력공단</td>
        </tr>
        <tr>
            <td>2000</td>
            <td>02</td>
            <td>11</td>
            <td colspan="3">취득</td>
            <td>한국산업인력공단</td>
        </tr>
        <tr>
            <td>2000</td>
            <td>12</td>
            <td>29</td>
            <td colspan="3">취득</td>
            <td>대한상공회의소</td>
        </tr>
        <tr>
            <td>1999</td>
            <td>08</td>
            <td>13</td>
            <td colspan="3">취득</td>
            <td>대한상공회의소</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td colspan="3"></td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td colspan="3"></td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td colspan="3"></td>
            <td>&nbsp</td>
        </tr>
        <tfoot>
            <tr>
                <td colspan="7">위 사항은 사실과 틀림없음을 증명합니다 <br>XXX (인)</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

form 태그

웹 페이지에서의 입력 양식을 의미함 로그인 창이나, 회원가입 폼 등이 이에 해당.
텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됨. form을 사용하기 위해서는 다음 속성들이 사용됨

  • name: 폼의 이름
  • action: 폼 데이터가 전송되는 백엔드 url
  • method: 폼 전송 방식 (GET / POST)
<form action="form.php" method="post" name="loginForm">

input 요소

HTML input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성함. 사용자에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재함. 입력 유형과 특성의 다양한 조합 가능성으로 인해, input 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나

ex)

아이디 
<input type="text" name="userName" placeholder="이름을 입력하세요" required autofocus>

비밀번호 
<input type="password" name="userPW" required="required" placeholder="비밀번호를 입력하세요">

이메일
<input type="email" name="userEmail" placeholder="이메일을 입력하세요">

전화번호
<input type="tel" name="userPhone">

날짜
<input type="date" name="userDate">

날짜 시/분
<input type="datetime" name="userDateTime">
<input type="datetime-local" name="userLocal">

년월
<input type="month" name="userMonth">

주
<input type="week" name="userWeek">

컬러
<input type="color" name="userColor">

검색박스
<input type="search" name="userSearch">

url
<input type="url" name="userUrl">

range
<input type="range" name="userRange" value="0">

파일
<input type="file" name="userFile">

disable 속성과 readonly(input 요소의 값이 변경되지 않은 채 전송이 되어야 하는곳에 사용)속성

<ul>
				<li>
					<label for="sirialNum">시리얼 번호 입력</label>
					<input type="text" id="sirialNum"><input type="button" value="이전"><input type="button" value="다음" disabled>
					<!-- 시리얼 번호 글자만 눌러도 커서가 가게 만드는 방법 (웹접근성)-->
				</li>
				<li>
					<label for="book">선택한 책</label>
					<input type="text" id="book" readonly value="반응형 웹">
					<label for="number">수량:</label>
					<input type="number" id="number" value="1" >
				</li>
			</ul>

label 태그

  • 테이블과 마찬가지고 폼 요소들도 환경적인 요인에 따라 접근하기 어려운 경우가 있음
  • 마우스에 익숙하지 않은 사용자의 경우 라디오 버튼이나 체크박스에 정확하게 클릭하기 쉽지 않음
  • 또한 문서가 음성만 출력되는 환경에는 각 폼 요소들 앞에 정확한 레이블을 주지 않으면 어떤 내용을 입력하고 체크해야 하는 알수 없는 상황이 발생할 수 있음

fieldset, legend 태그

  • fieldset 요소는 웹 양식의 여러 컨트롤과 레이블(label)을 묶을 때 사용
  • form 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용.
  • 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줌. 
  • legend
  • legend를 사용하면 fieldset 요소의 캡션을 정의할 수 있음.
<fieldset>
	<label for="userName"><legend>작성자</legend> </label>
	<input id="userName" name="userName" type="text" />
</fieldset>

select 태그

  • 셀렉트박스를 만드는 태그
  • ex) 이메일 선택란
<select name="userEmail2">
<option>선택</option>
	<option value="naver.com">naver.com</option>
	<option value="daum.net">daum.net</option>
	<option value="gmail.com">gmail.com</option>
</select>

로그인페이지 만들기

<body>
   <form action="#" method="psot" name="form">
      <h1><img src="./images/title_memberlogin.gif" alt="memberlogin"></h1>
      <!-- 이미지는 글자취급 h1이라는 블록요소로 센터를 해야함 이미지는 인라인요소라
      filedset은 블록요소라 마진으로 가운데로 오게해야함 -->
      <fieldset>
         <p>
            <input type="text" name="userid"
            value="아이디" id="userid">
            <select name="userid1" id="userid1">
               <option>----select-----</option>
               <option value="naver.com">naver.com</option>
               <option value="daum.net">daum.net</option>
               <option value="gmail.com">gmail.com</option>
            </select>
         </p>
         <p>
            <input type="password" name="userpw" id="userpw">
            <input type="image" name="userimg" id="userimg" src="./images/login.gif" alt="login">
         </p>
         <p>
            <input type="checkbox" name="usercheck" id="idCheck">
            <label for="idCheck">아이디저장</label>
         </p>
      </fieldset>
   </form>
</body>
profile
NuyHes
이전 포스트

Front-end 국비지원 #003일

다음 포스트

Front-end 국비지원 #005일

0개의 댓글