FrontEnd/HTML & CSS
[HTML] HTML 속성 그 외
Sunday31
2022. 11. 4. 23:03
HTML table(표) 만들기
<table align="center" border="1" width="60%" height="100%"
cellspacing="0" cellpadding="0">
<caption>목록</caption>
<tr bgcolor="#00ccff">
<!--<th>이름</th>
<th>나이</th>-->
<th colspan="2">개인</th>
<th>성별</th>
</tr>
<tr>
<td>김박최</td>
<td>25</td>
<td rowspan="2"align="center" valign="middle" width="50%">여</td>
</tr>
</table>
| HTML table | |
| <table></table> | 표 묶기 |
| <tr></tr> | 행, 가로 |
| <th></th> | 제목 행(글씨 가운데 정렬, 볼드 처리) |
| <td></td> | 열, 세로 |
| border="n" | 선의 굵기 |
| width="n" | 표의 넓이(pt, %사용 가능) |
| height="n" | 표의 높이 |
| align="left, center, right" | 글씨 위치 |
| bg color =”color” | 칸 배경색 |
| cellspacing="n" | 셀과 셀 사이의 거리 |
| cellpadding="n" | 셀과 문자열 사이의 거리 |
| <caption></caption> | 표의 제목을 설정(표 상단 가운데 표기) |
| align="left | center | right" | 가로로 정렬(위와 같음) |
| valign="top | middle | bottom" | 세로로 정렬 |
| colspan="병합할 갯수" | 합칠 개수 |
| rowspan="병합할 갯수" | 세로로 합칠 개수 |
입력 폼 만들기
| 정보 입력 폼 | |
| <form></form> | 꼭 form태그 안에 묶어주어야 함 |
| method="post" or "get" | post: 사이트 접속이나 사이트 이동 시 사용 (단점:url창이 노출되므로 정보보안에 취약함) get: 데이터 입력(회원가입창, 로그인창, 게시판 글쓰기..) (장점:url창이 노출되지 않음) |
| action="받은 정보가 전송되는 페이지 이름.확장자" | 데이터 저장을 위함 |
| type="text" | |
| type="password" | |
| name="내부 구분 키워드" | |
| input type="radio" | 단일선택1, 여러개의 값 중 하나를 체크 |
| <select> <option>선택지이름</option> </select> |
단일선택2, 정해진 값 중 하나를 선택 |
| <textarea></textarea> | 긴 텍스트를 입력받아야 할 때 사용 |
| rows="n" | 행의 수, n줄까지 보이고 이후는 스크롤바 생성됨 |
| cols="n" | 열의 수, 텍스트칸의 너비 |
| type="button" value="버튼의 이름" | 일반버튼(기능은 따로 추가해야함) |
| type="submit" | 전송버튼 |
| type="reset" | 초기화버튼 |
HTML5에 추가된 기능들
유효성검사란? 페이지에서 올바른 값만 받을 수 있도록 규칙을 정해주는 것
| HTML5 사용하는 기능 (유효성검사) | |
| required | 필수입력란, 입력안하고 버튼 클릭시 적용됨 |
| placeholder="example@gmail.com" | 툴팁에서 예제 문자열 미리보기 기능을 제공함 |
| autofocus="autofocus" | 입력받은 값에서 특정항목에 커서를 넣어 집중시켜 줌 |
| input type="email" | 이메일 양식의 유효성을 검사해 줌 |
| type="number" | |
| min="최소값" | |
| max="최대값" | |
| step="증가/감소 개수" | |
| value="현재값" | |
| input type="range" | |
| input type="search" | |
| input type="color" | |
| input type="date" | |
| input type="time" |
5.Login
(여태 배운거 모아서 예제)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>5.Login</title>
</head>
<body>
<center>
<table>
<!-- 로그인 타이틀명 -->
<form name="login" mathod="post" action="LoginProc.jsp">
<tr>
<!-- <td></td> -->
<td colspan="2" align="center">
<h4>로그인</h4>
</td>
</tr>
<tr><!-- 아이디 -->
<td>아이디</td>
<td>
<input type="text" name="mem_id">
</td>
</tr>
<tr><!-- 비밀번호 -->
<td>비밀번호</td>
<td>
<input type="password" name="mem_pw">
</td>
</tr>
<tr><!-- 가운데 버튼 2개 배치 -->
<td colspan="2" align="right">
<input type="button" value="로그인" onclick="">
<input type="button" value="회원가입" onclick="">
</td>
<!-- <td></td> -->
</tr>
<form>
</table>
</center>
</body>
</html>
video,audio
| 미디어 파일 불러오기 | |
| <video></video> | 영상 파일 불러오기 |
| <source src=""></source> | 미디어 경로 적기 (video나 audio 뒤에 src로 바로 작성해도 상관없음) |
| type ="video/확장자(mp4,avi...)" | 비디오 유형 지정 |
| width="n" height="n" | 넓이, 높이 |
| controls | 영상 재생 컨트롤 바 생성 |
| poster="이미지경로.확장자" | 썸네일 |
| <audio></audio> | 음악 파일 불러오기 (음악파일은 width="n" height="n"을 못 씀) |