| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 29 | 30 | 31 |
- 이클립스
- jsp
- 바르셀로나
- 치차리토
- CSS
- 맨시티
- jQuery
- export
- 파탄잘리
- UX/UI
- 아스널
- JavaScript
- 프로젝트
- 첼시
- 네이마르
- 라카제르
- 베식타스
- HTML 제어
- 맨유
- 간편정리
- Eclipse
- 유벤투스
- 레스터
- 루카쿠
- 마동석
- 마티치
- UI/UX
- 오피셜
- HTML/CSS
- HTML
- Today
- Total
Be a groovy man by positive thinking
UI/UX_002 본문
간략정리
1. table 태그 내부에 넣을 수 있는 태그 중 많이 쓰이는 태그
- tr 표 내부의 행 태그
- th 행 내부의 제목 셀 태그
- td 행 내부의 일반 셀 태크
2. tr, td 태그의 속성
- colspan : 셀의 너비 지정
- rowspan : 셀의 높이 지정
3. img 태그
- src : 이미지 경로 지정
- alt : 이미지가 없을때 나오는 글자 지정
- width : 이미지의 너비 지정
- height : 이미지의 높이 지정
4. audio 태그
- src : 음악 파일의 경로 지정
- preload : 음악을 재생하기 전에 모두 불러올지 지정
- autoplay : 음악을 자동 재생할지를 지정
- loop : 음악을 반복할지 지정
- controls : 음악 재생 도구를 출력할지 지정
5. video 태그
- src : 비디오 파일의 경로 지정
- poster : 비디오 준비 중일 떄의 이미지 파일 경로 지정
- preload : 비디오를 재생하기 전에 모두 불러올지 지정
- autoplay : 비디오를 자동 재생할지를 지정
- loop :비디오를 반복할지 지정
- controls : 비디오 재생 도구를 출력할지 지정
- width : 비디오의 너비를 지정
- height : 비디오의 높이를 지정
6. form 태그
- action : 입력 데이터의 전달 위치를 지정합니다.
- method : 입력 데이터의 전달 방식을 선택합니다.
7. input 태그
- button : 버튼을 생성합니다.
- checkbox : 체크박스를 생성합니다
- file : 파일 입력 양식을 생성합니다.
- hidden : 보이지 않습니다.
- image : 이미지 형태를 생성합니다.
- password : 비밀번호 입력 양식을 생성합니다.
- radio : 라디오 버튼을 생성합니다.
- reset : 초기버튼을 생성합니다.
- submit : 제출 버튼을 생성합니다.
- text : 글자 입력 양식 을 생성합니다.
예문
Ex_01 table 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5</title>
</head>
<body>
<table border="1">
<!--<caption>표의 제목</caption> -->
<colgroup>
<col span='2' style="background: red" />
<col style="background: blue" />
</colgroup>
<tr>
<th>1 열의 제목</th>
<th>2 열의 제목</th>
<th>3 열의 제목</th>
</tr>
<tr>
<td>2행 1열입니다.</td>
<td>2행 2열입니다.</td>
<td>2행 3열입니다.</td>
</tr>
<tr>
<td>3행 1열입니다.</td>
<td>3행 2열입니다.</td>
<td>3행 3열입니다.</td>
</tr>
</table>
</body>
</html>
Ex_02 colspan 셀의 너비 지정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5</title>
</head>
<body>
<h1>테이블 구성</h1>
<table border="1">
<tr>
<td>1행 셀1</td>
<td>1행 셀2</td>
<td>1행 셀3</td>
</tr>
<tr>
<td colspan="2">2행 셀1</td>
<td>2행 셀3</td>
</tr>
<tr>
<td>3행 셀1</td>
<td>3행 셀2</td>
<td>3행 셀3</td>
</tr>
</table>
</body>
</html>
Ex_03 rowspan 셀의 높이 지정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5</title>
</head>
<body>
<h1>테이블 구성</h1>
<table border="1">
<tr>
<td>1행 셀1</td>
<td>1행 셀2</td>
<td rowspan='2'>1행 셀2</td>
</tr>
<tr>
<td>2행 셀1</td>
<td>2행 셀2</td>
</tr>
<tr>
<td>3행 셀1</td>
<td>3행 셀2</td>
<td>3행 셀3</td>
</tr>
</table>
</body>
</html>
Ex_04 img 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<img src="이미지경로" alt="내가 좋아하는" width="300" />
<img src="test" alt="이미지가 없을 떄 나오는 글자 지정" />
</body>
</html>
Ex_05 audio 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<audio controls="controls">
<source src="Kalimba.mp3"
type="audio/mp3" />
</audio>
</body>
</html>
Ex_06 video 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
</html>
Ex_07 form태그 액션
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<form action="test.html">
<input type="text" name="" value="홍길동" size="10" readonly /> <input
type="submit" />
</form>
</body>
</html>
Ex_08 input 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<form name="test" action="test.html">
<input type="text" name="id" value="홍길동"/><br />
<input type="password" />
<input type="button" onclick="alert(test.id.value)"/>
<input type="checkbox" name="ch1" value="체크값"/> <input type="checkbox" name="ch2" value="체크값"/> <input type="checkbox" name="ch3" value="체크값"/><br />
<input type="radio" name='r1'/> <input type="radio" name='r1'/>
<input type="submit" />
</form>
</body>
</html>
Ex_09
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<form name="test" action="test.html">
<input type="text" name="id" value="홍길동" /><br /> <input
type="password" /> <input type="button"
onclick="alert(test.id.value)" /> <input type="checkbox" name="ch1"
value="체크값" /> <input type="checkbox" name="ch2" value="체크값" /> <input
type="checkbox" name="ch3" value="체크값" /><br /> <input type="radio"
name='r1' /> <input type="radio" name='r1' /><br /> <input
type="file" /><br /> <input type="reset" /><br /> <input
type="hidden" /><br /> <input type="submit" value="보내기" />
</form>
</body>
</html>
Ex_10
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Basic</title>
</head>
<body>
<form name="test" action="test.html">
<label for="name">이름</label> :
<input type="text" id="name" name="id" value="홍길동"/><br />
<input type="submit" value="보내기"/>
</form>
</body>
</html>