YJ의 새벽
HTML (테이블과 폼 양식) 본문
- < table > 태그
< table > < /table > : 테이블 전체를 만들때 사용
< tr > < /tr > : 테이블의 행을 구분지어준다.
< td > < /td > : 테이블의 열을 작성한다. ( < tr > 태그 하위에 위치 )
< th > < /th > : 테이블 행의 맨위, 목록. (<strong>) 들어가있음, 가운데정렬 (테이블헤더)
<caption> </caption> : 테이블제목.
** < td > 태그에 들어갈 속성
< width > : 셀의 가로폭 설정
< height > : 셀의 세로폭 설정
< align > : 셀의 컨텐츠(텍스트,이미지) 를 가로정렬 ( left ,right , center )
< vlign > : 셀의 컨텐츠(텍스트,이미지) 를 세로정렬 ( top ,middle, bottom )
EX )))
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>테이블 예제</title>
</head>
<body>
<h3>오늘의 수업</h3>
<table border="1" > <!-- 기본 테이블스타일 -->
<tr>
<th>언어</th>
<th>1교시</th>
<th>2교시</th>
</tr>
<tr>
<td>자바</td>
<td>if문</td>
<td>for문</td>
</tr>
<tr>
<td>HTML</td>
<td>태그</td>
<td>테이블</td>
</tr>
</table>
</body>
</html>오늘의 수업
| 언어 | 1교시 | 2교시 |
|---|---|---|
| 자바 | if문 | for문 |
| HTML | 태그 | 테이블 |
EX ))) 2개이상 열을 하나의 열로 만들기. colspan , align
배경색넣기 bgcolor
테이블제목 <caption> </caption>
<body>
<h3>테이블 예제</h3>
<table border="1"> <!-- 기본 테이블스타일 -->
<caption> 연습 </caption> <!--테이블 제목넣기 -->
<tr>
<th>열제목1</th>
<th colspan="2">열제목2</th> <!--컬럼합치기 -->
</tr>
<tr>
<td bgcolor="red">내용1</td> <!-- 배경색넣기 -->
<td colspan="2" align="center">내용2</td> <!--컬럼합치기 가운데정렬-->
</tr>
<tr bgcolor ="blue">
<td>내용3</td>
<td>내용4</td>
<td>내용5</td>
</tr>
</table>
</body>테이블 예제
| 열제목1 | 열제목2 | |
|---|---|---|
| 내용1 | 내용2 | |
| 내용3 | 내용4 | 내용5 |
--------------------------------------------------------------------------------------------------------------------
- 폼(Form) 양식
--사용자로부터 값을 입력받을때 쓰는 형식.
- 폼(form) 태그
--사용자가 입력한 모든값을 HTML로 받아올때 사용하는 태그
--입력창에 사용자가 글자를 입력하거나,
체크박스, 라디오버튼, 제출 등등 누르면
--백엔드 서버에 양식이 전달되어 정보를 처리
--웹을 처음개발하시는분들은 이후 백엔드 공부할때
<from> 태그에 대해 다시 공부함을 추천드린다.
** <form> </form> 태그 주요 속성
name : 폼의 이름
action : 폼 데이터가 전송되는 백엔드 서버의 주소
주로 JSP 와 자바스크립트 와도 연결.
method : 폼 전송방식 ( GET / POST )
input : 화면에 보이지않는 추상적인 태그.
사용자가 양식입력하기위한 태그는 <input> 등이 사용
type 속성을 통해 종류를 나타내며
name 을 통해 데이터의 이름
value 를 통해 기본값을 지정
** type
--text : 일반문자 ( 아이디와같은 문자열 )
--password : 비밀번호
--button : 버튼 (클릭이벤트)
--submit : 양식 제출용 버튼 (사용자입력한 모든값을 서버로 전송)
--reset : 양식 초기화 버튼 (사용자가입력한 모든값을 지워줌)
--radio : 한개만 선택할수있는 컴포넌트 (남자or여자)
--checkbox : 다수를 선택할수있는 컴포넌트 (취미와같은 여러개 선택)
--file : 파일업로드 (서버로 파일을 저장)
--hidden : 사용자에게 보이지 않는 히든요소 , (웹브라우저에 입력창이 보이지않음)
EX ))) 텍스트 입력창 만들기
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>폼예제</title>
</head>
<body>
<form>
이름 : <input type="text"><br>
나이 : <input type="text">
</form>
</body>
</html>
EX ))) 비밀번호 입력창
<form>
아이디 : <input type="text"><br>
비밀번호 : <input type="password">
</form>
EX ))) radio 버튼 만들기
<form>
개인정보 : <input type="radio" name="info" checked> 공개
<input type="radio" name="info">비공개
</form>
EX )))) 체크박스 만들기
<form>
취미 : <input type="checkbox" name="hobby1">등산
<input type="checkbox" name="hobby2">독서
<input type="checkbox" name="hobby3">영화감상
<input type="checkbox" name="hobby4">음악감상
</form>
EX ))) 선택박스 만들기
<form>
이메일 : <input type="text">@
<select>
<option>선택</option>
<option>naver.com</option>
<option>hanmail.net</option>
<option>gmail.com</option>
<option>직접입력</option>
</select>
</form>
EX ))) 세가지형태 버튼 만들기
<form>
<button type="button">검색</button><br>
<button type="button">확인</button><br>
<button type="button">다시 쓰기</button>
</form>
EX ))) 파일 선택 창 만들기
<form>
파일첨부 : <input type="file">*2MB까지 가능
</form>
EX ))) <table> 을 이용하여 정렬하기 .
<body>
<h1>회원가입 페이지</h1>
<form>
아이디 : <input type="text" name="id1" value="아이디를 입력하세요."><br>
비밀번호 : <input type="password" name="pwd1" value=""><br>
</form>
<form>
<table> <!-- 테이블사용 정렬 -->
<tr>
<td>ID: </td>
<td><input type="text" name="id1" value=""> </td>
</tr>
<tr>
<td>password: </td>
<td><input type="password" name="pwd1" value=""></td>
</tr>
</table>
</form>
</body>회원가입 페이지
'WebFront_ > HTML,CSS' 카테고리의 다른 글
| CSS (박스모델) (0) | 2023.02.02 |
|---|---|
| CSS (선택자,스타일(link)) (0) | 2023.02.02 |
| HTML (이미지와 멀티미디어) (0) | 2023.02.01 |
| HTML (텍스트/태그) (0) | 2023.02.01 |
| HTML (Visual Studio Code) (0) | 2023.02.01 |
