IT/_HTML_CSS_JS

UI/UX_002

KhanSelf 2017. 7. 5. 21:28

간략정리


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>