Be a groovy man by positive thinking
UI/UX_003 본문
예문
Ex_01
<%@ 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>
<form action="test.html" name="test">
<p>
1. <label for="name">이 름</label> <input type="text" name="name"
value="" id="name" size="" maxlength="5" />
</p>
<p>
2. 버튼 <input type="button" value="클릭해보세요"
onclick="alert(´Hello World!´)" />
</p>
<p>
3. 체크박스(중복허용) <input type="checkbox" name="chk1" value="값1"
onclick="alert(test.chk1.value)" /> <input type="checkbox"
name="chk2" value="값2" onclick="alert(test.chk2.value)" />
</p>
<p>
4. 파일 첨부<input type="file" name="" />
</p>
<p>
5. 숨김<input type="hidden" />
</p>
<p>
6. 이미지 버튼<input type="image" src="btn_login_on.jpg"
onclick="alert(´Hello World!´)" />
</p>
<p>
7. 비밀번호 입력 <input type="password" name="pwd" />
</p>
<p>
8. 라디오버튼(1개만 선택) <input type="radio" name="rdo" value="라디오1"
onclick="alert(test.rdo1.value)" /> <input type="radio" name="rdo"
value="라디오2" onclick="alert(test.rdo1.value)" />
</p>
<p>
9. 초기화 버튼<input type="reset" value="리셋할게요" />
</p>
<input type="submit" value="전송하기" />
</form>
</body>
</html>
Ex_02 textarea
<%@ 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>
<form>
<textarea rows="10" cols="20">홍길동</textarea>
</form>
</body>
</html>
Ex_03 select 태그
<%@ 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>
<form>
<select name="test">
<option value="김밥">김밥</option>
<option value="떡볶이">떡볶이</option>
<option value="순대">순대</option>
<option value="오뎅">오뎅</option>
</select>
</form>
</body>
</html>
Ex_04 선택 박스 그룹 묶기
<%@ 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>
<select>
<optgroup label="HTML5">
<option>Multimedia Tag</option>
<option>Connectivity</option>
<option>Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
</body>
</html>
Ex_05 가입페이지 만들기
<%@ 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>
<fieldset>
<legend>필수 입력 항목</legend>
<table>
<tr>
<td><label for="test">이름</label></td>
<td><input name="test" id="name" type="text" /></td>
</tr>
<tr>
<td><label for="pwd">비밀번호</label></td>
<td><input id="pwd" type="password" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>선택 입력 항목</legend>
<table>
<tr>
<td><label for="mail">이메일</label></td>
<td><input id="mail" type="email" /></td>
</tr>
<tr>
<td><label for="hobby">취미</label></td>
<td><input type="checkbox" name="chk1" value="값1" />독서 <input
type="checkbox" name="chk2" value="값2" />영화 <input
type="checkbox" name="chk2" value="값3" />음악</td>
</tr>
<tr>
<td><label for="hobby">좋아하는 음식</label></td>
<td><select name="sel">
<option value="김밥">김밥</option>
<option value="떡볶이">떡볶이</option>
<option value="순대">순대</option>
<option value="오뎅">오뎅</option>
</select></td>
</tr>
</table>
<textarea name="textarea" rows="3" cols="70">
1. 수집하는 개인정보 항목
회사는 회원가입, 상담, 서비스 신청 등등을 위해 아래와 같은 개인정보를 수집하고 있습니다.
가. 수집항목
이름, 비밀번호, 전화번호, 이메일, 서비스 이용기록, 접속 로그, 쿠키, 접속 IP 정보 등
나. 개인정보 수집방법
홈페이지(회원가입, 상담게시판, 환급신청서작성, 온라인결제 등)
2. 개인정보의 수집 및 이용목적
회사는 수집한 개인정보를 다음의 목적을 위해 활용합니다.
</textarea>
<br /> <input type="submit" value="회원가입하기" />
</fieldset>
</form>
</body>
</html>
Ex_06 span 태그
<%@ 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>
<span style="background-color: yellow;">이 프로그램은 우리나라 직업인들에게
공통적으로 요구되는 10가지 직업기초능력 가 운데 하나인 정보능력에 대한 학습자용 워크북이다.</span>
<span style="background-color: red;">여기서 정보능력이란 업무를 수행함에 있어 기본적인
컴퓨터를 활용</span>
</body>
</html>
Ex_07 h1 블럭 태그
<%@ 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>블럭 태그 - div</h1>
<div style="background-color: yellow;">이 프로그램은 우리나라 직업인들에게 공통적으로
요구되는 10가지 직업기초능력 가 운데 하나인 정보능력에 대한 학습자용 워크북이다. 여기서 정보능력이란 업무를 수행함에 있어
기본적인 컴퓨터를 활용하여 필요한 정보 를 수집, 분석, 활용하는 능력을 의미한다. 이러한 정보능력은 업무 수행에 필요한 정보
를 수집, 분석, 조직, 관리, 활용하는데 있어 컴퓨터를 사용하는 컴퓨터활용능력과 업무 수행에 필요한 정보를 수집하고,
분석하여 의미있는 정보를 찾아내며, 찾아낸 정보를 업 무 수행에 적절하도록 조직?관리하고 활용하는 능력인 정보처리능력으로
구성되어 있습니다.</div>
<div style="background-color: red;">사후평가에는 모든 학습모듈에 대한 학습을 마친 후
학습자들이 성취수준을 평가하고, 부족한 부분을 피드백 받을 수 있도록 하기 위한 체크리스트가 제시되어 있다. 참고자료 에는
학습자들의 학습에 도움을 줄 수 있는 참고도서 및 인터넷사이트가 제시되어 있으 며, 학습자가 자기 주도적으로 학습할 수 있도록
각 모듈의 학습평가에 대한 정답 및 해 설이 제시되어 있다. 학습평가 정답에는 각 모듈의 학습평가에 대한 정답 및 해설이 제시
되어 있어, 학습자가 자기 주도적으로 학습할 수 있도록 도움을 주고 있다.</div>
</body>
</html>
Ex_08 블럭태그와 인라인 태그
<%@ 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>
<h1>제목 태그</h1>
<p>문단 태그</p>
<p>문단 태그</p>
<hr />
<!--
<hr> 밑줄
-->
<h1>인라인 태그들</h1>
<a href="#">Anchor 태그</a>
<span>글자 태그</span>
<span>글자 태그</span>
<img src="btn_login_on.jpg" />
</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</title>
</head>
<body>
<h1>블럭 태그들</h1>
<h1>제목 태그</h1>
<p style="height: 100px;">문단 태그</p>
<p>문단 태그</p>
<hr />
<h1>인라인 태그들</h1>
<a href="#">Anchor 태그</a>
<span style="height: 100px;">글자 태그</span>
<span>글자 태그</span>
<img src="btn_login_on.jpg" />
</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>CSS3</title>
<style>
/* id 속성값으로 header를 가지는 태그의 스타일을 지정합니다. */
#header {
width: 800px;
margin: 0 auto;
background: #FFFF00;
}
/* id 속성값으로 wrap을 가지는 태그의 스타일을 지정합니다. */
#wrap {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
/* id 속성값으로 aside를 가지는 태그의 스타일을 지정합니다. */
#aside {
width: 200px;
float: left;
background: #3399FF;
}
/* id 속성값으로 content를 가지는 태그의 스타일을 지정합니다. */
#content {
width: 600px;
float: left;
background: #FF66FF;
}
</style>
</head>
<body>
<div id="header">
<h1>상단</h1>
</div>
<div id="wrapa">
<div id="aside">
<h1>서브메뉴</h1>
</div>
<div id="content">
<h1>컨텐츠내용</h1>
</div>
</div>
</body>
</html>
Ex_11
<%@ 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>CSS3</title>
<style>
span, h1 {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS3 제목</h1>
<p>글 내용1</p>
<p>글 내용2</p>
<span>인라인1</span>
<span>인라인2</span>
</body>
</html>
Ex_12
<%@ 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>CSS3</title>
<style>
/* 모든 태그의 color 속성에 red 키워드를 적용합니다. */
* {
color: red;
}
</style>
</head>
<body>
<h1>전체 선택자</h1>
<p>글 내용1</p>
<p>글 내용2</p>
<span>인라인1</span>
<span>인라인2</span>
</body>
</html>
Ex_13
<%@ 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>CSS3</title>
<style>
/* h1 태그의 color 속성에 red 키워드를 적용합니다. */
h1, div {
color: red;
}
/* p 태그의 color 속성에 blue 키워드를 적용합니다. */
/*#test { color: blue; }
.abc { background-color:yellow; }*/
</style>
</head>
<body>
<h1>글 제목1</h1>
<p id="test">글 내용1</p>
<p>글 내용2</p>
<span>인라인태그1</span>
<div>블럭태그</div>
<p class="abc">글 내용3</p>
<p>글 내용4</p>
<p class="abc">글 내용5</p>
<p>글 내용6</p>
</body>
</html>
Ex_14
<%@ 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>CSS3</title>
<style>
/* h1 태그의 color 속성에 red 키워드를 적용합니다. */
h1, div {
color: red;
}
#test {
color: blue;
}
.abc {
background-color: yellow;
}
</style>
</head>
<body>
<h1>글 제목1</h1>
<p id="test">글 내용1</p>
<p>글 내용2</p>
<span>인라인태그1</span>
<div>블럭태그</div>
<p class="abc">글 내용3</p>
<p>글 내용4</p>
<p class="abc">글 내용5</p>
<p>글 내용6</p>
</body>
</html>
Ex_15
<%@ 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>CSS3</title>
<style>
/* h1 태그의 color 속성에 red 키워드를 적용합니다. */
h1, div {
color: red;
}
#test {
color: blue;
}
.abc {
color: green;
background-color: yellow;
}
</style>
</head>
<body>
<h1>글 제목1</h1>
<p id="test">글 내용1</p>
<p>글 내용2</p>
<span>인라인태그1</span>
<div class="abc">블럭태그</div>
<p class="abc">글 내용3</p>
<p>글 내용4</p>
<p class="abc">글 내용5</p>
<p>글 내용6</p>
</body>
</html>
Ex_16
<%@ 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>CSS3</title>
<style>
/* class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드를 적용합니다. */
.select {
background-color: yellow;
}
li.select {
color: red;
}
</style>
</head>
<body>
<h1 class="select">클래스 선택자</h1>
<ul>
<li class="select">목록 태그1</li>
<li>목록 태그2</li>
<li>목록 태그3</li>
<li>목록 태그4</li>
</ul>
</body>
</html>