SlideShare a Scribd company logo
1 of 41
www.javaspecialist.co.kr
www.javaspecialist.co.kr
HTML
1
www.javaspecialist.co.kr
1. HTML(Hyper Text Markup Language)
• MARK UP 기호란?
– <태그> 데이터 </태그> : 꺽쇠로 감싸는것
– 데이터가 어떻게 화면에 웹브라우저를 통해서 보여질 것인가?
• 하지만 무슨 데이터인지 파악하기 힘듬.
– 기호(<, >) 하나의 데이터를 구분하는 것을 TAG(태크)라고 부름
• TAG는 표시라는 의미로 해석.
• 예
– <a href="http://www.naver.com">naver</a>
– 위와 같이 시작과 끝을 지정해야 함
• 태그는 열면 반드시 닫아줘야 함
– <a> hello </a> 이런식으로 a로 열고 /a로 닫음
• 태그의 시작부터 끝까지 내용을 포함해서 하나의 요소(Element; 엘리먼트)라고 부름.
• Doctype
– HTML문서의 버전을 정의. 아래 코드는 HTML문서의 버전 4.01임
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• HTML5 에서는 <!DOCTYPE html> 이라고만 하면 됨.
• html의 ROOT 요소는 <html>
– <html> ~ </html> 이 영역을 벗어나서 mark 하면 안됨.
– <head> ~ </head> 서두라고 생각하면 됨
• 문서의 제목과 메타 정보, 스타일 정의, 자바스크립트 코드 등을 작성.
– <body> ~ </body> 궁극적으로 웹에 표시되는 내용
• 브라우저 화면에 보여야 할 내용을 작성.
2
www.javaspecialist.co.kr
• 시작하기 전에...
– html 문서는 <html>로 시작해서 </html>로
종료
– 대부분의 태그는 시작 태그인 '< >'로 시작하
여 종료 태그인 '</ >'가 한쌍으로 쓰이지만,
종료 태그가 없는 경우도 있음.
– 태그는 대소문자를 구별하지 않으므로 대문
자나 소문자 어떤 걸 써도 상관 없음.(소문자
권장)
• HTML의 구조(HTML 4.01)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 제목표시줄에 표시될 문서의 제목 </title>
</head>
<body>
본문의 내용
</body>
</html>
• HTML 문서의 확장자는 htm 또는 html
• <html>
– HTML 문서를 시작한다는 의미이다.
• <head>
– 문서의 머리부분으로 웹 문서에 대한 정보가
들어가는 곳.
– head 태그 내에 meta, title, link, script, style
태그 등이 포함 될 수 있음.
– head 태그내의 내용은 브라우저에 표시 안
됨.
• <title>
– HTML 문서의 제목을 지정하는 태그.
– 이곳에 들어간 제목은 HTML 문서를 실행했
을 때 웹 브라우저의 상단 제목 표시줄에 나
타남.
– title 태그는 반드시 head 태그 안에 써줘야
함.
• <body>
– 문서의 본문에 해당하는 곳
– 문서 대부분의 내용이 이 body 태그 안에 들
어감.
• 메모장에 작성해서 .htm 이나 .html 파일로 저
장하면 브라우저에서 바로 실행할 수 있다.
2. HTML의 기본 구조
www.javaspecialist.co.kr
3. 문서 기본 구조 예
4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서의 제목</title>
<link rel="styleshee" href="default.css">
<style type="text/css">
/* css 스타일 지정 */
</style>
<script type="text/javascript">
//자바스크립트 코드
</script>
</head>
<body>
<!-- 주석 -->
본문의 내용...
</body>
</html>
www.javaspecialist.co.kr
4. HTML Attributes
• HTML 속성(Attribute)
– html요소는 속성값을 가질 수 있음.
– html요소에 대한 추가적인 정보를 제공해줌.
– 속성값은 요소의 추가적인 정보를 할당해 줌.
– 속성값은 항상 시작 태그에 정의.
– 속성값은 name/value로 name="value"처럼 오
게 됨.
• Attribute 예
– 다음 코드 예처럼 <a> 시작 태그에 속성값을
기록할 수 있음.
– 일부 태그들은 필수 속성이 존재할 수 있음
<html>
<body>
<a href="http://www.consolbook.com">콘솔북</a>
</body>
</html>
– 속성값은 항상 "와 "로 닫혀있어야 함.
– 쌍따옴표가 대부분 일반적인 모양이지만, '싱
글' 모양도 허용됨.
• 모든 요소에서 사용할 수 있는 속성
Attribute Value Description
class
class_rule or
style_rule
element 의 클래스
id id_name
요소에 대해 유일해야
함
style style_definition
동일라인의 스타일 정
의
title tooltip_text tool tip에서의 text
www.javaspecialist.co.kr
5. 블록-레벨 요소와 인라인-레벨 요소
• HTML 문서에는 블록레벨(black level) 요소와 인라
인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가
있음.
• 블록-레벨 요소
– <div>나 <p>, <h1>과 같은 요소들은 블록레벨 요
소.
– 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과
같은 요소를 쓰지 않아도 스스로 줄 바꿈이 된다
는 데 있음.
– 이 요소들은 기본적으로 문서 내에서 가로로 흐르
지 않고 세로로 흐른다. 그리고 주변에 일정량의
공간을 만든다. 또한 너비를 지정해 주지 않으면
풀사이즈가 되어 가로로 가득 차게 된다.
– CSS를 적용하지 않고 이 요소들을 보면 세로로
쭉 나열되는 것을 볼 수 있음. 블록레벨 요소는 가
로, 세로 일정량의 여백을 가지고 있는데 이것은
브라우저마다 조금씩 다름.
• 블록-레벨 요소 종류
– <div>, <p>, <pre>,<xmp>, <h1>~<h6>, <form>,
<table>, <menu>, <ul>, <ol>,<dl>,<hr>,
<address>, <blockquote>, <fieldset>, <noscript>
– <dir>, <center> : HTML5 에서 사라진 요소
• 인라인-레벨 요소
– <img>, <span>, <strong>과 같은 요소들은 인라
인 요소.
– 인라인레벨 요소들의 특징은 줄 바꿈 태그를 사용
하지 않거나 블록레벨 태그 안에 단독으로 포함되
지 않는 한 가로로 쭉 나열된다는 데 있음.
– 이 요소들의 주변에는 공간이 생기지 않는다.
– 블록레벨 요소 안에 인라인 요소가 포함되도록 마
크업 해야 문법을 바르게 준수할 수 있게 된다.
• 인라인-레벨 요소 종류
– <button>, <input>, <lable>, <select>, <textarea>,
<strong>, <img>,< map>, <span>, <object>,
<script>, <br>, <q>, <a>, <b>, <sub>, <sup>, <i>,
<abbr>, <cite>, <dfn>, <kbd>, <samp>, <var>,
<bdo>
– <applet>, <small>, <tt>, <acronym>, <strike>,
<basefont>, <big> : HTML5 에서 사라진 요소
body
<h1>.........................</h1>
<div>
<p>......<strong>...<strong>......</p>
<div>
블록-레벨
요소
인라인-레벨
요소
블록-레벨 요소와 인라인-레벨 요소
www.javaspecialist.co.kr
6. 블록-레벨 요소 (1/3)
• 그룹화 요소 (Grouping Element)
– <div>
• division
• 문단 구조 요소 (Paragraph, Break Element)
– <p>
• paragraph, 문단 나눔
• 논리적 블록 요소 (Logical Block Element )
– <pre>
• 입력된 텍스트들은 입력한 그대로 화면에 출력.
• 태그를 실행한다.
• 태그가 포함되어 있으면 태그를 실행한 결과를 출력.
– <xmp>
• 입력된 텍스트들은 입력한 그대로 화면에 출력.
• 태그를 그대로 나타낸다.
• <와 >를 &lt; 이나 &gt;으로 사용하지 않아도 <와 >를 그대로 출력.
7
www.javaspecialist.co.kr
6. 블록-레벨 요소 (2/3)
• 표제, 제목 (heading, Break Element)
– <h1>~<h6>,
– 6단계의 표제(heading)을 제공하고 있으며, 이는 h1 ~ h6 요소를 이용하여 표현.
– 표제 즉, h 요소는 문서의 구조를 정의하는데 사용하며 스크린 리더와 같은 일부 유저 에이
전트는 h 요소를 참조해서 페이지 컨텐츠를 구성한다.
– h 요소의 사용이 필수는 아니지만 이를 사용함으로서 논리적 단계를 지정할 수 있다.
– h1 ~ h6 요소들 크기는 브라우저에 의존하지만 CSS의 font-size속성으로 임의 크기를 지
정할 수 있다.
– h1 ~ h6 요소의 계층구조에 주의해야 한다.
• 예를 들어 h1요소 다음에 h3요소를 지정하는 것은 계층 구조를 지키지 않는 것이 된다.
• 즉, h1요소 다음에는 h2요소 그 다음 h3요소로 제목을 순서에 맞게 작성해야 한다.
– h1요소의 경우 해당 문서의 큰 제목(타이틀)을 나타내기 때문에 원칙적으로 하나의 문서에
한번만 지정한다.
8
www.javaspecialist.co.kr
6. 블록-레벨 요소 (3/3)
• 폼 컨트롤 그룹화 요소 (Form Control Grouping Element)
– <form>
• HTML Form 요소는 데이터를 서버로 전달하기 위해 사용.
• Form은 텍스트 필드, 체크박스, 라디오 버튼, 전송 버튼과 같은 입력 요소(input)를 포함할 수
있다.
• 선택 목록(select), 텍스트 입력영역(textarea), 필드 모음(fieldset), 범례(legend), 라벨(label)
요소 또한 포함할 수 있다
• <form name="이름" action="URL" method="post/get">
– name : 현재 사용중인 폼의 이름을 정의.
– action : 송신된 필드의 내용(폼 데이터)을 처리할 서버 프로그램의 URL을 지정.
– method : 입력한 폼 데이터를 송신할 때 서버로 전송하고자 하는 방식(get, post)을 지정.
» post : form data set이 폼의 본문에 포함되어 서버 프로그램으로 넘어가는 방식으로 문의나 게시판글쓰기, 회원가입과 같
은 페이지에서 주로 사용된다. 입력한 내용이 브라우저에 남지 않는다. 주로 서버에 데이터를 전송하는 용도로 사용한다.
» get : 브라우저 주소 표시줄에 작성된 내용을 보여준다. 원래의 데이터에 변화를 주지 않고 폼의 내용이 많지 않은 경우 주
로 사용된다.(검색서비스, 게시판의 글 읽기 등), 전송하는 데이터의 크기가 제한된다. 주로 서버로부터 데이터를 요청하
는 용도로 사용한다.
– <fieldset>
• 폼 컨트롤(input, select, textarea)및 입력박스들을 그룹화하는 용도로 사용
• 자동으로 테두리가 생성된다.
• 복수의 컨트롤 요소를 하나의 그룹으로 범위를 정의하며 그룹화 및 구조화 할 수 있다.
– <legend>
• 그룹화한 범위에 설명(캡션 및 ,제목)을 기술
• fieldset요소 바로 다음 순서로 한번만 정의한다.
• 웹접근성을 위해 눈에 보이지 않더라도 반드시 선언해 주는 것이 좋다.(css로 처리)9
www.javaspecialist.co.kr
7. 인라인-레벨 요소 (1/2)
• 인라인-레벨 요소
– 일반적인 속성의 INLINE은 새로운 줄을 생성하지 않고 줄 내부에 위치한다.
– 즉, 줄바꿈이 되는 블록 레벨과는 다르게 인라인 레벨은 줄바꿈이 되지 않는다.
– 인라인 레벨 요소는 블록 레벨에겐 하위 구조이며, data, object에게는 상위구조에 속한다.
– 인라인 요소의 대표적 그루핑 요소로는 <a>, <img>, <select>, <input>, <span>등이 있다 .
– 웹표준을 지키는 html이라면 인라인 요소는 반드시 블록 요소 안에 "감싸져야" 한다.
– 인라인 요소는 단독으로 쓰일 수 없으며 <div>,<p>와 같은 블록요소를 별도로 사용하여 그
블록레벨 요소 안에서 선언 되어야 한다.
• 그룹화 요소 (Grouping Element)
– <span> : 인라인 요소의 대표 요소로서 span 요소는 div 요소와 같은 그룹화 요소로 특정
한 의미 없이 인라인 레벨 요소들을 그룹화하고 스타일을 입히기 위해 존재한다.
– CSS를 이용해 span요소 안의 인라인 요소들을 디자인하고 레이아웃을 적용한다.
• 문단 구조 요소 (Paragraph, Break Element)
– <br> : br element는 시작 태그만 존재하고 종료 태그가 없는 빈 요소(empty elements)이다
– br 요소는 해당 줄을 끝맺고 다음 줄로 이동하기 위한 줄바꿈을 의미하며, 줄바꿈을 할 위
치에 <br>요소를 삽입하기만 하면 된다.
– 그러나 HTML 마크업시 <BR>요소는 최대한 사용하지 않는 것을 권장한다. <BR>을 이용
는 방법보다는 <P>태그를 사용하여 CSS를 적용하는 방법으로 문단의 너비를 조정하는
것이 바람직하다.
10
www.javaspecialist.co.kr
7. 인라인-레벨 요소 (2/2)
• Form 입력 형식 요소 (Form Control Type, Element)
– <input>, <label>, <select>, <textarea>
– <input>
• form 요소 중 가장 중요한 요소는 input 요소이다.
• input 요소는 사용자의 정보를 수집하기 위해 사용된다.
• input 요소의 속성은 다음과 같다.
– input 요소는 type 속성을 통해 다양한 방식으로 변할 수 있다.
» input 요소의 type 속성의 값은 텍스트 필드(text), 암호필드(password), 체크박스
(checkbox), 라디오(radio), 숨김(hidden) 양식, 전송(submit), 취소(reset) 버튼 등이
될 수 있다.
– name : 컨트롤에 이름을 부여한다.
– maxlength : 사용자가 입력할 수 있는 최대 문자 수를 정의한다.
– ckecked : 체크박스나 라디오버튼 일 때, checked 속성이 부여되면 선택된 상태로 나
타나게 된다.
– readonly : 컨트롤이 읽기 전용이 되어 사용자가 임의로 변경이 불가능하게 한다.
– disabled : 사용자 입력을 못하도록 한다.
» disabled 컨트롤은 tabindex를 갖지 않는다.
– tabindex : 탭 키를 이용해 컨트롤의 포커스를 옮길 때, 그 순서를 정의한다
– <label>
• label 요소는 암시적 라벨을 가지고 있지 않는 제어의 라벨을 지정하기 위해 사용된다.
• label 요소(엘리먼트)의 for 속성(애트리뷰트)은 연관된 제어(컨트롤 요소)의 id 속성 값
과 일치해야 함.
11
www.javaspecialist.co.kr
• html headings
– headings는 <h1>에서 <h6>tags로 구성.
– <h1>은 가장큰 heading으로 정의 되어 있음.
– <h6>은 가장작은 heading으로 정의 되어 있
음.
• heading의 주의점
– font의 크기와 두께를 위해서 쓰면 안된다.
– 웹브라우저의 검색엔진은 heading을 구조와
웹페이지 콘텐츠로 접근한다.
• 예
– <html>
– <body>
– <h1> this is a heading 1</h1>
– <h2> this is a heading 2</h2>
– <h3> this is a heading 3</h3>
– <h6> this is a heading 6</h6>
– </body>
– </html>
• 결과
8. HTML Headings
www.javaspecialist.co.kr
8. HTML Headings (HTML/heading.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>heading</title>
6. </head>
7. <body>
8. <h1>This is heading 1</h1>
9. <h2>This is heading 2</h2>
10. <h3>This is heading 3</h3>
11. <h4>This is heading 4</h4>
12. <h5>This is heading 5</h5>
13. <h6>This is heading 6</h6>
14. hn(n=1~6) 태그는 문서의 제목을 표현할 때 사용합니다.<br>
15. 문서 내에서 h1태그는 하나만 오는 것이 바람직하며,
16. 문서의 제목을 단계별로 나타내야 할 경우에는 태그의 단계를 지키는 것이
17. 바람직합니다. 즉, h2 태그가 나온 다음에는 h3 태그가 나오는 것이 바람직합니다.
18. <br>
19. 이 태그는 줄바꿈 기능과, 진하게 하는 기능이 있습니다.
20. </body>
21. </html>
13
www.javaspecialist.co.kr
• HTML Rules(Lines) and break
– <hr/> tag는 수평선을 그리기 위해 사용.
– <br/> output <p>tag의 break의 의미인데 한
줄을 띄어서 출력함(브라우저에서 개행 의
미).
• 예
– <html>
– <body>
– <p> The hr tag defines a horizontal
rule : </p>
– <hr/>
– <p> this is a paragraph</p>
– <hr/>
– </body>
– </html>
• 결과
• html의 주석(comment)
– 프로그래밍 에디터(창)에서 마크업언어를 인
식하지 못하는 글이라고 보면 된다.
– C 나 JAVA에서의 주석과 같은 의미이다.
– <!-- This is a comment -->
– 주석 안에 또다른 주석을 넣으면 안된다.
• 예
– <html>
– <body>
– <!-- 이 주석 내용은 안보입니다. -->
– <p>This is a regular paragraph</p>
– </body>
– </html>
9. HTML Paragraph & Line & Break
www.javaspecialist.co.kr
9. HTML Paragraph & Line & Break (HTML/paragraph.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>paragraph</title>
6. </head>
7. <body>
8. <p>p 태그는 문단을 나눠주는 태그입니다.</p>
9. <p>p 태그로 작성된 문단은 문단과 문단 사이에 빈 줄이 하나 생깁니다</p>
10. 태그에 <br>br 태그를 넣는것과는 다릅니다. br태그는 단순히 줄바꿈 기능만
11. 있습니다. br 태그를 두번쓰는 것과 p태그를 한번 쓰는 것이 외형적으로
12. 비슷해 보일지라도 그의미는 전혀 다릅니다. br태그는 문단을 구분하지 않습니다.
13. <br><br>
14. p 태그와 유사한 기능을 하는 태그가 있습니다. hr 태그입니다.
15. <hr> hr태그는 수평선을 만들어주는 효과가 있습니다.<br>
16. hr태그는 width 속성과 size 속성을 가질 수 있습니다.
17. width 속성은 수평선의 폭을 지정하며(%를 표시하면 브라우저 화면의 비율로),
18. size 속성은 선의 두께를 지정합니다.
19. noshade 속성(속성이름만)을 추가하면 선이 2차원으로 보입니다.
20. <hr width="80"><!-- 단위에 숫자만 기록하면 단위는 픽셀 -->
21. <hr width="80%"><!-- %를 기록하면 비율 -->
22. <hr width="300" size="10">
23. <hr width="300" size="10" noshade align="left">
24. </body>
25. </html>
15
www.javaspecialist.co.kr
• HTML formatting tags
– <b>태그와 <i>태그는 출력 포맷 태그이며, 각각
bold와 italic 텍스트를 나타낸다.
– 이러한 태그들을 포멧팅 태그라 부른다.
• 예 1)
<html>
<body>
<p><b> This is bold</b></p>
<p><strong> this is string </strong></p>
<p><big> this is big </big></p>
<p><em> this text is emphasized </em></p>
<p><i>this text is italic </i></p>
<p><small>this text is samll</small></p>
<p> this is <sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
</body>
</html>
• 예 2)
<html>
<body>
<code>Computer code</code><br>
<kbd>Keyboard input</kbd><br>
<tt>Teletype text</tt><br>
<samp>Sample text</samp><br>
<var>Computer variable</var><br>
<p><b>Note:</b> These tags are often used to display
computer/programming code.</p>
</body>
</html>
• 예 3)
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA</address>
</body>
</html>
10. HTML Formatting (HTML/formatting.html)
특정 단어를 강조하고 싶을 때는
<b> 태그보다 <strong> 태그를
사용하는 것이 좋다 외관상으로
는 두 태그 모두 텍스트를 굵게
보이게 하여 강조해 주지만, <b>
태그는 단지 굵게 만들어 줄 뿐
강조하는 아무 의미가 없는 태그
이다. 반면에 <strong> 태그는 외
형적으로 텍스트를 굵게 해 주고
실제로 의미 있는 텍스트라고 강
조해 주는 역할도 한다.
www.javaspecialist.co.kr
• 웹사이트의 메뉴나 목록 형태의 컨텐츠를 만들 때는
<ul>과 <li> 태그를 사용한다.
• 만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫
자를 순차적으로 붙이고 싶을 때는 <ol>, <li>를 이용하
면 관리하기 쉽고 훨씬 의미 있는 마크업이 된다.
• 주 메뉴 등 연속된 링크를 목록 태그로 구성한 다음 CS
S를 이용해 표현 형식을 다르게하여 사용할 수 있다.
• 비순차적 목록(Unordered List)
– <ul>태그는 "Unordered List" 의 약자로 비순차적 목
록을 나타낼 때 사용한다.
– <li>태그를 사용해서 목록의 항목을 표현한다.
• 태그 속성
– type
• type 속성은 글머리표를 지정하는데 사용되며,
<ul> 태그와 <li>태그에 공통으로 사용될 수 있다
.
• <ul>태그의 속성으로 사용될 경우에는 목록 전체
에 영향을 주며, <li>태그에 속성이 사용될 경우
에는 해당하는 목록에만 영향을 준다.
• 속성의 값은 circle, square, disc 중 하나를 선택
할 수 있으며, circle은 ○, square는 ■, 그리고
disc는 ●모양으로 목록에 글머리표가 표시된다.
1. <html>
2. <body>
3. <h4>Disc bullets list:</h4>
4. <ul type="disc">
5. <li>Apples</li>
6. <li>Bananas</li>
7. <li>Lemons</li>
8. <li>Oranges</li>
9. </ul>
10.
11.<h4>Circle bullets list:</h4>
12.<ul type="circle">
13. <li>Apples</li>
14. <li type="square">Bananas</li>
15. <li>Lemons</li>
16. <li>Oranges</li>
17.</ul>
18.
19.<h4>Square bullets list:</h4>
20.<ul type="square">
21. <li>Apples</li>
22. <li>Bananas</li>
23. <li>Lemons</li>
24. <li>Oranges</li>
25.</ul>
26.
27.</body>
28.</html>
11. HTML Lists (1/2)
www.javaspecialist.co.kr
• 순차적 목록(Ordered List)
– <ol> 태그는 "Ordered List" 의 약자로 순차적 목
록을 나타낼 때 사용.
– <li> 태그를 사용해서 목록을 표현.
• 태그 속성
– type
• type 속성은 글머리표를 지정하는데 사용되
며, <ol>과 <li>태그에 공통으로 올 수 있다.
• <ol>태그의 속성으로 사용될 경우에는 목록
전체에 영향을 주며, <li>태그에 속성이 사용
될 경우에는 해당하는 목록에만 영향을 준다.
• 속성의 값은 A, a, I, i, 1 중 하나가 올 수 있다.
• 각각 속성 값에 따라 글머리표는 A : 영문자(대문자),
a : 영문자(소문자), I : 그리스 숫자(대문자), i : 그리
스 숫자(소문자), 1 : 아라비아 숫자(기본 값)가 된다.
– start
• start 속성은 <ol>태그 안에서 사용된다. <ol
start="적용하고 싶은 숫자">처럼 사용하였을
경우 순차적 목록의 시작 번호를 지정할 수
있다.
– value
• value 속성은 <li>태그 안에서 사용된다. <li
value="적용하고 싶은 숫자">처럼 사용하여
특정 목록에 원하는 번호를 지정할 수 있다.
1. <h4>Numbered list:</h4>
2. <ol>
3. <li>Apples</li>
4. <li>Bananas</li>
5. <li>Lemons</li>
6. <li>Oranges</li>
7. </ol>
8. <h4>Letters list:</h4>
9. <ol type="A">
10. <li>Apples</li>
11. <li>Bananas</li>
12. <li>Lemons</li>
13. <li>Oranges</li>
14. </ol>
15. <h4>Lowercase letters list:</h4>
16. <ol type="a">
17. <li>Apples</li>
18. <li value="3">Bananas</li>
19. <li>Lemons</li>
20. <li>Oranges</li>
21. </ol>
22. <h4>Roman numbers list:</h4>
23. <ol type="I" start="2">
24. <li>Apples</li>
25. <li>Bananas</li>
26. <li>Lemons</li>
27. <li>Oranges</li>
28. </ol>
29. <h4>Lowercase Roman numbers list:</h4>
30. <ol type="i">
31. <li>Apples</li>
32. <li>Bananas</li>
33. <li>Lemons</li>
34. <li>Oranges</li>
35. </ol>
11. HTML Lists (2/2)
www.javaspecialist.co.kr
11. HTML Lists (HTML/list.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>list</title>
6. </head>
7. <body>
8. 리스트는 ol, ul, dl 3가지가 있습니다.<br>
9. ol은 ordered list의 약어, 순서가 있는 목록을 표현<br>
10.ul은 unordered list의 약어, 순서가 없는 목록을 표현<br>
11.dl은 definition list의 약어, 정의 목록을 표현합니다.<br>
12.<ol start="6">
13.<li>다음 중 빈으로 등록하기 위한 아노테이션이 아닌 것은?
14. <ol type="a">
15. <li>Component
16. <li>Service
17. <li>Resource
18. <li>Controller
19. </ol>
20.</li>
21.<li>component-scan 태그를 사용하기 위해 추가해야 하는 네임스페이스는?
22. <ol type="I">
23. <li>context
24. <li>aop
25. <li>component
26. <li>property
27. </ol>
28.</li>
29.</ol>
30.<hr>
19
www.javaspecialist.co.kr
11. HTML Lists (HTML/list.html)
1. <p>내가 좋아하는 과일</p>
2. <ul type="square"><!-- square, circle, disc -->
3. <li>사과
4. <li type="circle">바나나
5. <li>포도
6. <li>복숭아
7. </ul>
8. <hr>
9. dl은 사전에 정의된 단어와 그 의미를 표현할 때 사용한다.<br>
10.dd태그에 의한 값은 들여쓰기 된다.
11.<dl>
12. <dt>HTML
13. <dd>Hyper Text Markup Language
14. <dt>WWW
15. <dd>World Wide Web
16.</dl>
17.<hr>
18.목록과 관련된 태그는 단순하게 목록을 표현할 때에만 사용되는 것은 아닙니다.<br>
19.문서 내에서 여러개의 항목을 나열할 때 사용합니다. 예를 들면 문서 내에서 주메뉴 등의 링크, 또는 페이지 네비게이션 등
에 사용됩니다.
20.</body>
21.</html>
20
www.javaspecialist.co.kr
12. HTML Links
• 하이퍼링크를 만들기 위해 <a> 태그를 사용한다.(Anchor태그라 부른다.)
– <a href="URL">text</a>
– 시작태그 안의 href 속성은 링크 문자열을 클릭하였을 때 참조할 주소를 입력하여 준다.
– 링크요소의 내용(element contents)은 반드시 텍스트일 필요는 없다. 이미지나 다른 HTML
요소들에도 링크를 설정할 수 있다.
• 태그 속성
– href : 연결될 주소를 지정할 때 사용한다. 필수속성이다. href="http://www.naver.com" 이
라고 지정하면 네이버 홈페이지로 이동하게 한다는 의미이다.
– target : 연결된 문서가 열려질 장소를 정의한다. 속성의 값으로 _blank, _self, _top,
_parent가 있다.
• _blank를 사용하면 새로운 창으로 링크된 주소가 열리게 된다.
• _self 는 현재 프레임에 링크된 주소를 연다.
• _top는 브라우저의 화면에 있는 모든 프레임을 취소하고 링크된 주소를 연다.
• _parent는 현재 프레임을 포함하는 상위 프레임에 링크된 주소를 연다.
– name : name 속성은 HTML문서 안에서 이름을 갖는 앵커(Named Anchor)를 정의할 때 사
용한다.
• name 속성으로 지정된 앵커는 브라우저에는 나타나지 않는다.
• Named Anchor 사용 방법은 <a name="label">앵커 이름</a> 으로 문서 내의 위치를 지
정하고,
• <a href="#label">링크 내용</a> 으로 문서 내의 특정 위치로 찾아가기 위한 링크를 지정
한다.
21
www.javaspecialist.co.kr
12. HTML Links
• 예
– <HTML>
– <HEAD>
– <TITLE>하이퍼링크</TITLE>
– </HEAD>
– <BODY>
– <a href = "http://www.naver.com">네이버</a><br>
– <a href = "http://www.naver.com" target="_blank">네이버</a><br>
– </BODY>
– </HTML> 새 탭으로 보여짐
22
www.javaspecialist.co.kr
12. HTML Links (HTML/anchor.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>anchor</title>
6. </head>
7. <body>
8. anchor 태그는 링크를 만들어줍니다.
9. 클릭했을 때 보여질 대상 사이트 주소는 href 속성을 이용합니다.
10. <br>
11. 네이버 페이지로 이동되게 하는 코드는 <a href="http://www.naver.com">네이버</a>입니다.
12. <br>
13. 문서 내에서 원하는 위치로 이동이 되게 하고 싶다면 href 속성에 #을 이용합니다.<br>
14. <p id="top">문서의 맨 위</p>
15. <a href="#chapter1">문서내의 특정 위치로 이동 - 1장</a><br>
16. <a href="#chapter2">문서내의 특정 위치로 이동 - 2장</a>
17. <!-- 이 곳을 클릭하면 chapter1이라는 아이디 속성이 부여된 곳이 화면 맨 위로 올라옵니다. -->
18. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <!-- 생략 -->
19. <p id="chapter1">문서 내의 특정 위치-1장</p>
20. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <!-- 생략 -->
21. <a href="#top">맨 위로</a>
22. <p id="chapter2">문서 내의 특정 위치-2장</p>
23. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <!-- 생략 -->
24. <a href="#top">맨 위로</a>
25. </body>
26. </html>
23
www.javaspecialist.co.kr
13. HTML Table
• 테이블을 표시할 때에는 <table>태그를 사용한다.
• <table>태그는
– <thead>와 <tbody>태그를 포함하여 테이블의 헤더와 바디를 구분한다.
– <tr>태그를 포함하며, <tr>태그는 <td>태그 또는 <th>태그를 포함한다.
– 테이블의 경계선을 표시하는 border 속성의 디폴트 값은 0이다. 테이블 경계선을 보이게
하려면 속성의 값을 1이상을 줘야 한다.
• <tr>태그는
– 테이블의 행을 만들어 주는 역할을 한다.
– Table Row
• <td>태그는
– 테이블의 행 안에 테이블의 셀을 만들어주는 역할을 한다.
– Table Data
• <th>태그는
– 테이블의 제목 셀을 표시(진하게 표시됨)할 때 사용한다.
– Table Heading
• 셀 합치기
– <td>태그의 속성들 중에서 rowspan과 colspan 속성은 여러 개의 셀을 하나로 합쳐주는 역
할을 한다.
• rowspan 속성은 셀의 속성 값으로 지정한 수 만큼 인접한 아래 셀을 합쳐준다.
• colspan 속성은 셀의 속성 값으로 지정한 수 만큼 인접한 오른쪽 셀을 합쳐준다.
24
www.javaspecialist.co.kr
13. HTML Table (HTML/table.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Insert title here</title>
6. </head>
7. <body>
8. table은 표를 만들어 줍니다.<br>
9. caption은 표의 제목을 만들어 줍니다.<br>
10.thead, tfoot와 tbody는 표의 헤더, 푸터, 표의 바디를 구분합니다.<br>
11.tr(table row)은 행을 만들어줍니다.<br>
12.td(table data)는 행에 들어가는 셀 하나를 만들어줍니다.<br>
13.th(table header)는 td 대신 제목 셀을 표현할 때 사용합니다.<br>
14.<hr>
15.<table width="80%" border="1" cellspacing="0" cellpadding="5" tyle="border-collapse:collapse" align="center">
16.<caption>표의 제목입니다.</caption>
17.<tr align="center" bgcolor="red">
18. <td colspan="2">셀 하나</td>
19. <!-- td>셀 하나</td-->
20. <td bgcolor="yellow">셀 하나</td>
21.</tr>
22.<tr>
23. <td bgcolor="blue">셀 하나</td>
24. <td>셀 하나</td>
25. <td rowspan="2">셀 하나</td>
26.</tr>
27.<tr>
28. <td>셀 하나</td>
29. <td>셀 하나</td>
30. <!-- td>셀 하나</td-->
31.</tr>
32.</table>
33.</body>
34.</html>
25
www.javaspecialist.co.kr
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
2. <HTML>
3. <HEAD>
4. <TITLE>HTML 테이블</TITLE>
5. </HEAD>
6. <BODY>
7. <h4> one column </h4>
8. <table border="1"> <!-- border: 선 굵기 -->
9. <tr>
10. <td>100</td>
11. </tr>
12.</table>
13.<br/>
14.<h4> one row and three columns </h4>
15.<table border="1">
16. <tr>
17. <td>100</td>
18. <td>200</td>
19. <td>300</td>
20. </tr>
21.</table>
22.<br/>
23.<h4> Two rows and tree columns </h4>
24.<table border="1">
25. <tr>
26. <td>100</td>
27. <td>200</td>
28. <td>300</td>
29. </tr>
30. <tr>
31. <td>400</td>
32. <td>500</td>
33. <td>600</td>
34. </tr>
35.</table>
36.</BODY>
37.</HTML>
13. HTML Table (HTML/table1.html)
26
www.javaspecialist.co.kr
13. HTML Table (HTML/table2.html)
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <TITLE>테이블 연습</TITLE>
5. </HEAD>
6. <BODY>
7. <table border="0" align="center" width="600" cellspacing="3">
8. <tr>
9. <th colspan="3">가장 인기있는 스포츠 종목과 그 운동기구들</th>
10. </tr>
11. <tr>
12. <td bgcolor="gold" align="center" width="200">야구</td>
13. <td bgcolor="gold" align="center" width="200">축구</td>
14. <td bgcolor="gold" align="center" width="200">농구</td>
15. </tr>
16. <tr>
17. <td>미국의 메이저리그가 가장유명하고 좋고 좋다</td>
18. <td>월드컵 축구가 한국에서 2002년도에 열렸다</td>
19. <td><nobr>조던이라는 농구의 슈퍼스타가 예전에 있었다</nobr></td>
20. </tr>
21. <tr>
22. <td bgcolor="pink" align="center"><font color="green">야구공</font></td>
23. <td bgcolor="pink" align="center"><font color="blue">축구공</font></td>
24. <td bgcolor="pink" align="center"><font color="#FF00FF">농구공</font></td>
25. </tr>
26. </table>
27. </BODY>
28. </HTML>
27
www.javaspecialist.co.kr
14. HTML input
• 입력 양식을 만들 때 사용하는 Form 요소의 하위 요소로 input 요소를 사용할 수 있다.
– Input 요소는 type 속성의 값에 따라 입력 양식을 다르게 보여준다.
– HTML4.01에서 type 속성의 값은 text, password, checkbox, hidden, radio, image, button,
submit, reset 등이 있다.
– type 속성의 값이 checkbox와 radio 일 경우에는 name 속성의 값이 같아야 같은 그룹으로
적용된다. radio일 경우 name 속성의 값이 다르면 모두 선택상태가 될 수 있다.
<form action="#" method="post" >
<p>성:<input type="text" id="lastname" title="성" value="성명의 성" class="input_txt"></p>
<p>이름:<input type="text" id="firstname" title="이름" value="성명의 이름" class="input_txt"></p>
<p><label for="nick">닉네임</label><input type="text" id="nick" title="닉네임" value="별명으로 사용할 이름
">
<input type="image" src="id_confirm.png" alt="중복확인"></p>
<p>비밀번호:<input type="password" id="pwd" title="비밀번호" class="input_txt"></p>
<p><input type="radio" name="md_area" id="radio_s" checked><label for="radio_s">서울</label>
<input type="radio" name="md_area" id="radio_k" checked><label for="radio_k">경기</label>
</p>
<p><input type="checkbox" name="md_agr" id="agr" checked><label for="agr">다음 내용에 동의합니다
</label></P>
</form>
• type 속성의 값이 hidden 일 경우 브라우저 화면에 보이지 않지만
submit 버튼으로 폼 데이터를 전송시 다른 폼데이터와 함께 전송된다.
28
www.javaspecialist.co.kr
15. HTML label
• 텍스트 필드(text), 체크박스(checkbox), 라디오 버튼(radio), 메뉴(menu) 등 대부분은 갖지 않
지만, 일부 폼(form) 제어(control)는 자동적으로 단추와 연관 된 라벨을 갖는다.
• label 요소는 암시적 라벨을 가지고 있지 않는 제어의 라벨을 지정하기 위해 사용된다.
• label 요소는 제어(control)에 정보를 첨부하는데 사용 될 수 있다.
• 컨트롤 요소 하나에 정확하게 한 개의 라벨 요소가 연관되어 사용된다.
• label 요소(엘리먼트)의 for 속성(애트리뷰트)은 연관된 제어(컨트롤 요소)의 id 속성 값과 일
치해야 한다.
• 다음과 같이 레이블을 지정하면 "예"를 클릭하더라도 라디오버튼이 선택된다.
• <input type="radio" id="yes_button" name="yes">
• <label for="yes_button" title="그렇다면 예를 선택하라">예</label>
• for 속성을 사용하지 않으려면 <label>요소가 <input>요소를 포함하도록 하면 된다.
• <label title="그렇다면 예를 선택하라">
• <input type="radio" name="yes"> 예
• </label>
29
www.javaspecialist.co.kr
15. HTML label (HTML/label.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Insert title here</title>
6. <style type="text/css">
7. body {
8. font-size:12px; font-family:'돋음';
9. }
10. label {
11. cursor:hand; color:#999;
12. padding:0 10px 8px 0;
13. }
14. </style>
15. </head>
16. <body>
17. <form action="./" method="post">
18. <p>라디오 버튼 테스트 텍스트를 클릭해도 선택된다<br />
19. <strong>설명조사가 만족 스러우십니까?</strong>
20. <input type="radio" id="yes_button" name="yes">
21. <label for="yes_button" title="그렇다면 예를 선택하라">예</label>
22. <input type="radio" id="no_button" name="yes">
23. <label for="no_button" title="그렇지 않다면 아니요를 선택하라">아니요</label>
24.
25. <p>체크박스를 직접 선택하지 않고, 네트윅 프로그래밍 같은 텍스트를 선택해도 선택된다<br />
26. <strong>관심분야를 선택해주세요</strong><br />
27. <input type="checkbox" id="che0" name="che">
28. <label for="che0" title="관심분야 : 디자이너">디자이너</label>
29. <input type="checkbox" id="che1" name="che">
30. <label for="che1" title="관심분야 : 서비스업">서비스업</label>
31. <input type="checkbox" id="che2" name="che">
32. <label for="che2" title="관심분야 : 사이트관리">사이트관리</label>
33.
34. <p>텍스트를 클릭하면 입력상자가 선택된다<br />
35. <strong><label for="hint">비밀번호 힌트를 적어주세요</label></strong><br>
36. <input type="text" name="hint" id="hint">
37. </form>
38. </body>
39. </html>
30
www.javaspecialist.co.kr
16. HTML select, button. textarea
• <select>
– 여러 개 목록 중에서 선택된 하나만 보여주는 셀렉트 박스(드롭다운 리스트 박스라고 부르기도
한다.)를 만들어준다. <optgroup>태그를 이용하면 선택 항목을 그룹으로 묶어줄 수 있다.
<option>태그에 value 속성을 포함하지 않으면 선택 항목이 값으로 지정된다. <select>태그에
multiple 속성을 부여하면 복수 개 선택할 수 있도록 한다.
– <select name="grade">
<option value="A">A 등급</option>
<option value="B">B 등급</option>
<option value="C">C 등급</option>
</select>
• <button>
– 버튼을 제공한다.
– 폼 전송 역할을 하는 디자인 미적용 버튼은 input 요소의 type 속성을 submit 타입을 사용한다.
– 이미지를 이용한 디자인 버튼은 <input type="image">로 사용한다.
– <button type="button"> 열기 </button>
– <button type="submit"> 전송 </button>
• <textarea>
– 여러 줄 입력할 수 있는 입력 양식을 만든다
– 화면에 보여지는 입력양식의 폭과 높이는 cols와 rows속성으로 선언한다.
– css를 정상적으로 불러오지 못하는 상황에서도 사용에 문제가 없도록 cols, rows의 애트리뷰트
값은 각각 최소 30, 5이상이 되도록 선언한다.
– 다음 코드는 폭은 글자 30자, 높이는 5줄 크기의 입력양식을 만든다
– <textarea cols="30" rows="5"></textarea>
31
www.javaspecialist.co.kr
16. HTML select, button, textarea (HTML/select.html)
• <input type="text" name="hint" id="hint">
• <p>등급을 선택하라</p>
• <select style="width:100px">
• <option value="A">A 등급</option>
• <option value="B">B 등급</option>
• <option value="C">C 등급</option>
• </select><br />
• <p>폼 전송 역할을 하는 디자인 미적용 버튼은 submit 타입을 사용한다 (디자인 버튼은
&lt;input type="image"&gt;로 사용한다.)</p>
• <button type="button"> 열기 </button>
• <button type="submit"> 전송 </button><br />
• <p>메모를 입력하라.</p>
• <textarea cols="30" rows="5"></textarea><br />
32
www.javaspecialist.co.kr
16. HTML select, button, textarea (HTML/form.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="euc-kr">
5. <title>form</title>
6. </head>
7. <body>
8. <h1>폼 관련 태그 실습입니다.</h1>
9. <form action="result.jsp" method="post">
10. <fieldset>
11. <legend>입력 양식</legend>
12. 아이디 : <input type="text" name="userid"><br>
13. <!-- 파라미터의 이름이 name 속성의 값이 된다. -->
14. 비밀번호 : <input type="password" name="userpw"><br>
15. 파일 : <input type="file" name="filename"><br>
16. 운동 : <input type="checkbox" name="hobby" value="soccer">축구
17. <input type="checkbox" name="hobby" value="baseball">야구
18. <input type="checkbox" name="hobby" value="golf">골프
19. <input type="checkbox" name="hobby" value="swimming">수영<br>
20. <!-- 체크박스는 같은 그룹일 경우 name 속성의 값이 같아야 한다. -->
legend태그는 fieldset 태
그 안에서 사용된다. 폼
양식에 테두리와 범례를
제공한다.
33
www.javaspecialist.co.kr
16. HTML select, button, textarea
21 직업 : <input type="radio" name="job" value="programmer">프로그래머
22 <input type="radio" name="job" value="salesman">세일즈맨
23 <input type="radio" name="job" value="professor">교수<br>
24 <!-- 라디오는 같은 그룹일 경우 name 속성의 값이 같아야 한다. -->
25 <input type="hidden" name="id" value="uid0001">
26 <select name="major" multiple><!-- multiple 속성은 복수 개 선택할 수 있도록 함 -->
27 <option value="1">컴퓨터
28 <option>경제
29 <option>경영
30 <option>자동차
31 <option>전기
32 <option>건축
33 </select><br><!-- result.jsp에 request.setCharacterEncoding("euc-kr");를 포함시킴 -->
34 <!-- textarea는 여러줄 입력 양식을 만들어 줌 -->
35 <textarea rows="5" cols="70">
36 이곳에 입력한 데이터는
37 텍스트 영역에 그대로 표시됩니다.
38 </textarea><br>
39 <input type="submit" value=" 확인 ">
40 <input type="reset" value=" 취소 ">
41 </fieldset>
42 </form>
43 </body>
44 </html>
34
www.javaspecialist.co.kr
17. HTML image
• 이미지를 삽입하기 위해 <img> 요소를 사용한다.
• 사용법은 다음과 같다.
– <img src="이미지 파일 경로" width="너비" height="높이" alt="설명" align="정렬속성값">
– <img>요소는 src 속성을 필수 속성으로 가지며 그림파일의 경로를 지정한다.
– width와 height 속성은 보여질 이미지의 크기를 지정한다.
– alt 속성은 이미지 툴팁(이미지의 설명)을 지정한다.
– 정렬 속성값인 align은
• 이미지의 위치만을 지정하는 LEFT(왼쪽), RIGHT(오른쪽)와
• 이미지와 텍스트 사이의 정렬 위치를 지정하는 TOP(위), MIDDLE(중간), BOTOM(아래)
이 있다.
– 이 외에도
• 테두리의 두께를 지정하는 border와
• 테두리와 가로 여백을 지정하는 hspace, 세로 여백을 지정하는 vspace가 있다.
• 툴팁이 이미지를 가릴 때
– <img src="main_info.gif" title="" alt="01.가이드를 꼭 지켜주세요. 가이드 보기"
width="360" height="200" />
• alt 텍스트는 본래 이미지가 출력되지 않는 경우에만 브라우저에 시각적으로 표시되어야 하는데
Internet Explorer는 이미지에 마우스를 올리는 경우에도 alt 값을 툴팁 형식으로 표시하고 있어서 이
미지에 포함된 문자를 시각적으로 인지하는데 오히려 방해가 되기도 한다. 이러한 경우에는 title 속
성 값이 alt 속성 값보다 우선순위를 가지고 툴팁으로 표시되는 브라우저 특성을 이용하여 alt 값에 원
문과 동등한 수준의 대체텍스트를 제공하고 title 속성을 사용하되 값을 비워둡니다. 이런 경우
Internet Explorer는 alt 대신 title 속성의 값을 툴팁으로 표시하려고 하는데 title 속성의 값이 비어 있
으므로 결국 Tool Tip을 표시하지 않게 된다.
35
www.javaspecialist.co.kr
Lab - 문제
• 다음과 같은 입력 양식이 출력되도록 HTML 문서를 작성하라.
자세한 설명은 다음 슬라이드에…
36
www.javaspecialist.co.kr
Lab - 문제
• 다음과 같은 입력 양식이 출력되도록 HTML 문서를 작성하라.
제목
h2
2
입력필드
text
4
셀렉션 필드
목록에 보이는
값과 선택시의
값이 같음
6
버튼
submit과 reset
버튼임
9
구조
입력 양식은 표 안
에 작성되어야 함
제목과 입력양식
이 모두 블록 요소
안에 포함되어야
함
1
요청방식
post
3
입력 값 힌트
placeholder
7
셀렉션 필드
선택시의 값은
각각 10, 20,
30, 40임
8
성별
radio, 둘 중 하나
만 선택되어야 함
5
37
www.javaspecialist.co.kr
Lab - Solution (HTML/Lab/end/EmpForm.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta http-equiv="content-language" content="ko">
6. <title>Emp 정보 입력</title>
7. <link rel="stylesheet" href="default.css" type="text/css" >
8. </head>
9. <body>
10.<!-- wrap start -->
11.<div id="wrap">
12. <div id="middle_content">
13. <!-- 현재위치 네비게이션 시작 -->
14. <div id="cur_loc">
15. <div id="cur_loc_align">
16. <ul>
17. <li>HOME</li>
18. <li>&gt;</li>
19. <li>테이블 관리</li>
20. <li>&gt;</li>
21. <li><strong>Emp 테이블 관리</strong></li>
22. </ul>
23. </div>
24. </div>
25. <div id="content_field">
26. <!-- 여기부터 본문의 내용이 들어갑니다. -->
27. <div class="form_div">
28. <div><h2>Emp 정보</h2></div>
29. <form action="../form_result.jsp" method="post">
30.
38
www.javaspecialist.co.kr
Lab - Solution (HTML/Lab/end.html)
31. <form action="../form_result.jsp" method="post">
32. <table>
33. <tr>
34. <td>사원번호 : </td>
35. <td><input type="text" name="empno" value=""></td>
36. </tr>
37. <tr>
38. <td>이름 : </td>
39. <td><input type="text" name="ename" value=""></td>
40. </tr>
41. <tr>
42. <td>성별 : </td>
43. <td><label><input type="radio" name="sex" value="M">남자</label>
44. <label><input type="radio" name="sex" value="F">여자</label></td>
45. </tr>
46. <tr>
47. <td>직업 : </td>
48. <td><input type="text" name="job" value=""></td>
49. </tr>
50. <tr>
51. <td>상사 : </td>
52. <td><select name="mgr">
53. <option>7369</option>
54. <option>7499</option>
55. <option>7521</option>
56. <option>7566</option>
57. <option>7654</option>
58. <option>7698</option>
59. <option>7782</option>
60. <option>7788</option>
39
www.javaspecialist.co.kr
Lab - Solution (HTML/Lab/end.html)
61. <option>7839</option>
62. <option>7844</option>
63. <option>7876</option>
64. <option>7900</option>
65. <option>7902</option>
66. <option>7934</option>
67. </select></td>
68. </tr>
69. <tr>
70. <td>입사일 : </td>
71. <td><input type="text" name="hiredate" value="" placeholder="2012-01-01">예:2012-01-01</td>
72. </tr>
73. <tr>
74. <td>급여 : </td>
75. <td><input type="text" name="sal" value=""></td>
76. </tr>
77. <tr>
78. <td>커미션 : </td>
79. <td><input type="text" name="comm" value=""></td>
80. </tr>
81. <tr>
82. <td>부서번호 : </td>
83. <td><select name="deptno">
84. <option value="10">10 ACCOUNTING NEW YORK</option>
85. <option value="20">20 RESEARCH DALLAS</option>
86. <option value="30">30 SALES CHICAGO</option>
87. <option value="40">40 OPERATIONS BOSTON</option>
88. </select></td>
89. </tr>
90. <tr>
40
www.javaspecialist.co.kr
Lab - Solution (HTML/Lab/end.html)
91. <td></td>
92. <td><input type="submit" value=' 저장 '>
93. <input type="reset" value=" 취소 "></td>
94. </tr>
95. </table>
96. </form>
97. </div>
98. <!-- 여기까지 본문의 내용입니다. -->
99. </div>
100. </div>
101.</div>
102.<!-- //wrap end -->
103.</body>
104.</html>
41

More Related Content

What's hot

Java collections framework
Java collections frameworkJava collections framework
Java collections framework경주 전
 
Daejeon IT Developer Conference Hibernate3
Daejeon IT Developer Conference Hibernate3Daejeon IT Developer Conference Hibernate3
Daejeon IT Developer Conference Hibernate3plusperson
 
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육준일 엄
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivityJinKyoungHeo
 
Django와 flask
Django와 flaskDjango와 flask
Django와 flaskJiho Lee
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template EngineOhgyun Ahn
 
ORM을 활용할 경우의 설계, 개발 과정
ORM을 활용할 경우의 설계, 개발 과정ORM을 활용할 경우의 설계, 개발 과정
ORM을 활용할 경우의 설계, 개발 과정Javajigi Jaesung
 
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃Kwangyoun Jung
 
좌충우돌 ORM 개발기 | Devon 2012
좌충우돌 ORM 개발기 | Devon 2012좌충우돌 ORM 개발기 | Devon 2012
좌충우돌 ORM 개발기 | Devon 2012Daum DNA
 
Ksug2015 - JPA2, JPA 기초와매핑
Ksug2015 - JPA2, JPA 기초와매핑Ksug2015 - JPA2, JPA 기초와매핑
Ksug2015 - JPA2, JPA 기초와매핑Younghan Kim
 
JSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSPJSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSPMyungjin Lee
 
Ksug2015 jpa4 객체지향쿼리
Ksug2015 jpa4 객체지향쿼리Ksug2015 jpa4 객체지향쿼리
Ksug2015 jpa4 객체지향쿼리Younghan Kim
 
회사에서 써보는 SQLAlchemy
회사에서 써보는 SQLAlchemy회사에서 써보는 SQLAlchemy
회사에서 써보는 SQLAlchemyJc Kim
 
Web server page_ed10
Web server page_ed10Web server page_ed10
Web server page_ed10hungrok
 
SpringDataJPA - 스프링 캠프
SpringDataJPA - 스프링 캠프SpringDataJPA - 스프링 캠프
SpringDataJPA - 스프링 캠프Younghan Kim
 

What's hot (20)

Java collections framework
Java collections frameworkJava collections framework
Java collections framework
 
Daejeon IT Developer Conference Hibernate3
Daejeon IT Developer Conference Hibernate3Daejeon IT Developer Conference Hibernate3
Daejeon IT Developer Conference Hibernate3
 
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivity
 
플라스크 템플릿
플라스크 템플릿플라스크 템플릿
플라스크 템플릿
 
Django와 flask
Django와 flaskDjango와 flask
Django와 flask
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template Engine
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Html5
Html5 Html5
Html5
 
ORM을 활용할 경우의 설계, 개발 과정
ORM을 활용할 경우의 설계, 개발 과정ORM을 활용할 경우의 설계, 개발 과정
ORM을 활용할 경우의 설계, 개발 과정
 
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
QnA blog using Django - ORM, 회원가입, 로그인/로그아웃
 
좌충우돌 ORM 개발기 | Devon 2012
좌충우돌 ORM 개발기 | Devon 2012좌충우돌 ORM 개발기 | Devon 2012
좌충우돌 ORM 개발기 | Devon 2012
 
Ksug2015 - JPA2, JPA 기초와매핑
Ksug2015 - JPA2, JPA 기초와매핑Ksug2015 - JPA2, JPA 기초와매핑
Ksug2015 - JPA2, JPA 기초와매핑
 
JSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSPJSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSP
 
Ksug2015 jpa4 객체지향쿼리
Ksug2015 jpa4 객체지향쿼리Ksug2015 jpa4 객체지향쿼리
Ksug2015 jpa4 객체지향쿼리
 
회사에서 써보는 SQLAlchemy
회사에서 써보는 SQLAlchemy회사에서 써보는 SQLAlchemy
회사에서 써보는 SQLAlchemy
 
Mongo db 최범균
Mongo db 최범균Mongo db 최범균
Mongo db 최범균
 
Javascript
JavascriptJavascript
Javascript
 
Web server page_ed10
Web server page_ed10Web server page_ed10
Web server page_ed10
 
SpringDataJPA - 스프링 캠프
SpringDataJPA - 스프링 캠프SpringDataJPA - 스프링 캠프
SpringDataJPA - 스프링 캠프
 

Viewers also liked

고와선 마을계획
고와선 마을계획고와선 마을계획
고와선 마을계획Zoosun Yoon
 
Paratuss _ 장진태 자기소개서
Paratuss _ 장진태 자기소개서Paratuss _ 장진태 자기소개서
Paratuss _ 장진태 자기소개서Joshua Jang
 
자기소개서 복사본
자기소개서   복사본자기소개서   복사본
자기소개서 복사본경희 이
 
Shipyard one 사용자 교육 1. 프로그램 소개 및 기본 사용법
Shipyard one 사용자 교육   1. 프로그램 소개 및 기본 사용법Shipyard one 사용자 교육   1. 프로그램 소개 및 기본 사용법
Shipyard one 사용자 교육 1. 프로그램 소개 및 기본 사용법Byoungik Moon
 
70.자기소개서
70.자기소개서70.자기소개서
70.자기소개서FishCA
 
[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322jylee6977
 
포토그래피 자기소개서
포토그래피 자기소개서포토그래피 자기소개서
포토그래피 자기소개서Sang Mi Lee
 
빅데이터 솔루션 소개서(2013년 05월)
빅데이터 솔루션 소개서(2013년 05월)빅데이터 솔루션 소개서(2013년 05월)
빅데이터 솔루션 소개서(2013년 05월)동학 노
 
Node.js를 이용한 수업관리 시스템(Lecture System using Node.js)
Node.js를 이용한 수업관리 시스템(Lecture System using Node.js) Node.js를 이용한 수업관리 시스템(Lecture System using Node.js)
Node.js를 이용한 수업관리 시스템(Lecture System using Node.js) 은지 박
 
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)Seung-Hyun PAEK
 
빅데이터 이용 사례 분석
빅데이터 이용 사례 분석빅데이터 이용 사례 분석
빅데이터 이용 사례 분석ko donghwi
 
[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션
[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션
[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션opencontentslab
 
Shipyard one 사용자 교육
Shipyard one 사용자 교육Shipyard one 사용자 교육
Shipyard one 사용자 교육Byoungik Moon
 
[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서
[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서
[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서BizSpring Inc.
 
오르그닷 제품소개서
오르그닷 제품소개서오르그닷 제품소개서
오르그닷 제품소개서orgdot
 
빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)
빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)
빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)Wonjin Lee
 
졸업작품 최종 발표
졸업작품 최종 발표졸업작품 최종 발표
졸업작품 최종 발표DongGeun Lee
 
css_sprites 독인가? 약인가
css_sprites 독인가? 약인가css_sprites 독인가? 약인가
css_sprites 독인가? 약인가르 부
 
[드론] 펌웨어 분석 [2015.5.23]
[드론] 펌웨어 분석 [2015.5.23][드론] 펌웨어 분석 [2015.5.23]
[드론] 펌웨어 분석 [2015.5.23]chcbaram
 

Viewers also liked (20)

고와선 마을계획
고와선 마을계획고와선 마을계획
고와선 마을계획
 
Paratuss _ 장진태 자기소개서
Paratuss _ 장진태 자기소개서Paratuss _ 장진태 자기소개서
Paratuss _ 장진태 자기소개서
 
자기소개서 복사본
자기소개서   복사본자기소개서   복사본
자기소개서 복사본
 
Shipyard one 사용자 교육 1. 프로그램 소개 및 기본 사용법
Shipyard one 사용자 교육   1. 프로그램 소개 및 기본 사용법Shipyard one 사용자 교육   1. 프로그램 소개 및 기본 사용법
Shipyard one 사용자 교육 1. 프로그램 소개 및 기본 사용법
 
70.자기소개서
70.자기소개서70.자기소개서
70.자기소개서
 
[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322
 
포토그래피 자기소개서
포토그래피 자기소개서포토그래피 자기소개서
포토그래피 자기소개서
 
자기소개서
자기소개서자기소개서
자기소개서
 
빅데이터 솔루션 소개서(2013년 05월)
빅데이터 솔루션 소개서(2013년 05월)빅데이터 솔루션 소개서(2013년 05월)
빅데이터 솔루션 소개서(2013년 05월)
 
Node.js를 이용한 수업관리 시스템(Lecture System using Node.js)
Node.js를 이용한 수업관리 시스템(Lecture System using Node.js) Node.js를 이용한 수업관리 시스템(Lecture System using Node.js)
Node.js를 이용한 수업관리 시스템(Lecture System using Node.js)
 
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
 
빅데이터 이용 사례 분석
빅데이터 이용 사례 분석빅데이터 이용 사례 분석
빅데이터 이용 사례 분석
 
[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션
[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션
[오픈콘텐츠랩 / 꿈꾸는프리젠테이션] 청중을 사로잡는 프리젠테이션
 
Shipyard one 사용자 교육
Shipyard one 사용자 교육Shipyard one 사용자 교육
Shipyard one 사용자 교육
 
[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서
[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서
[비즈스프링]BizSpring Attribution™ (비즈스프링 어트리뷰션) 소개서
 
오르그닷 제품소개서
오르그닷 제품소개서오르그닷 제품소개서
오르그닷 제품소개서
 
빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)
빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)
빅데이터의 개념과 이해 그리고 활용사례 (Introduction to big data and use cases)
 
졸업작품 최종 발표
졸업작품 최종 발표졸업작품 최종 발표
졸업작품 최종 발표
 
css_sprites 독인가? 약인가
css_sprites 독인가? 약인가css_sprites 독인가? 약인가
css_sprites 독인가? 약인가
 
[드론] 펌웨어 분석 [2015.5.23]
[드론] 펌웨어 분석 [2015.5.23][드론] 펌웨어 분석 [2015.5.23]
[드론] 펌웨어 분석 [2015.5.23]
 

Similar to 2 1. html4.01

01. basic html5
01. basic html501. basic html5
01. basic html5동우 주
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개Toby Yun
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupToby Yun
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그은심 강
 
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성Lee Sang-Ho
 
웹성능최적화 20130405
웹성능최적화 20130405웹성능최적화 20130405
웹성능최적화 20130405주형 전
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsEunYoung Kim
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Nts Nuli
 
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Toby Yun
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Jeado Ko
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)ymtech
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)Channy Yun
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
업무자동화를 위한 파이썬
업무자동화를 위한 파이썬업무자동화를 위한 파이썬
업무자동화를 위한 파이썬성주 이
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Eulsoo Jung
 

Similar to 2 1. html4.01 (20)

웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
01. basic html5
01. basic html501. basic html5
01. basic html5
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic Markup
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그
 
Asp.net Razor
Asp.net Razor Asp.net Razor
Asp.net Razor
 
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
 
웹성능최적화 20130405
웹성능최적화 20130405웹성능최적화 20130405
웹성능최적화 20130405
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
업무자동화를 위한 파이썬
업무자동화를 위한 파이썬업무자동화를 위한 파이썬
업무자동화를 위한 파이썬
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
 

More from JinKyoungHeo

6. nexcore alopex runtime
6. nexcore alopex runtime6. nexcore alopex runtime
6. nexcore alopex runtimeJinKyoungHeo
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storageJinKyoungHeo
 
5-3. html5 device access
5-3. html5 device access5-3. html5 device access
5-3. html5 device accessJinKyoungHeo
 
5-2. html5 multimedia
5-2. html5 multimedia5-2. html5 multimedia
5-2. html5 multimediaJinKyoungHeo
 
5-1. html5 graphics
5-1. html5 graphics5-1. html5 graphics
5-1. html5 graphicsJinKyoungHeo
 
1. 웹 어플리케이션 아키텍처
1. 웹 어플리케이션 아키텍처1. 웹 어플리케이션 아키텍처
1. 웹 어플리케이션 아키텍처JinKyoungHeo
 

More from JinKyoungHeo (6)

6. nexcore alopex runtime
6. nexcore alopex runtime6. nexcore alopex runtime
6. nexcore alopex runtime
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storage
 
5-3. html5 device access
5-3. html5 device access5-3. html5 device access
5-3. html5 device access
 
5-2. html5 multimedia
5-2. html5 multimedia5-2. html5 multimedia
5-2. html5 multimedia
 
5-1. html5 graphics
5-1. html5 graphics5-1. html5 graphics
5-1. html5 graphics
 
1. 웹 어플리케이션 아키텍처
1. 웹 어플리케이션 아키텍처1. 웹 어플리케이션 아키텍처
1. 웹 어플리케이션 아키텍처
 

2 1. html4.01

  • 2. www.javaspecialist.co.kr 1. HTML(Hyper Text Markup Language) • MARK UP 기호란? – <태그> 데이터 </태그> : 꺽쇠로 감싸는것 – 데이터가 어떻게 화면에 웹브라우저를 통해서 보여질 것인가? • 하지만 무슨 데이터인지 파악하기 힘듬. – 기호(<, >) 하나의 데이터를 구분하는 것을 TAG(태크)라고 부름 • TAG는 표시라는 의미로 해석. • 예 – <a href="http://www.naver.com">naver</a> – 위와 같이 시작과 끝을 지정해야 함 • 태그는 열면 반드시 닫아줘야 함 – <a> hello </a> 이런식으로 a로 열고 /a로 닫음 • 태그의 시작부터 끝까지 내용을 포함해서 하나의 요소(Element; 엘리먼트)라고 부름. • Doctype – HTML문서의 버전을 정의. 아래 코드는 HTML문서의 버전 4.01임 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • HTML5 에서는 <!DOCTYPE html> 이라고만 하면 됨. • html의 ROOT 요소는 <html> – <html> ~ </html> 이 영역을 벗어나서 mark 하면 안됨. – <head> ~ </head> 서두라고 생각하면 됨 • 문서의 제목과 메타 정보, 스타일 정의, 자바스크립트 코드 등을 작성. – <body> ~ </body> 궁극적으로 웹에 표시되는 내용 • 브라우저 화면에 보여야 할 내용을 작성. 2
  • 3. www.javaspecialist.co.kr • 시작하기 전에... – html 문서는 <html>로 시작해서 </html>로 종료 – 대부분의 태그는 시작 태그인 '< >'로 시작하 여 종료 태그인 '</ >'가 한쌍으로 쓰이지만, 종료 태그가 없는 경우도 있음. – 태그는 대소문자를 구별하지 않으므로 대문 자나 소문자 어떤 걸 써도 상관 없음.(소문자 권장) • HTML의 구조(HTML 4.01) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 제목표시줄에 표시될 문서의 제목 </title> </head> <body> 본문의 내용 </body> </html> • HTML 문서의 확장자는 htm 또는 html • <html> – HTML 문서를 시작한다는 의미이다. • <head> – 문서의 머리부분으로 웹 문서에 대한 정보가 들어가는 곳. – head 태그 내에 meta, title, link, script, style 태그 등이 포함 될 수 있음. – head 태그내의 내용은 브라우저에 표시 안 됨. • <title> – HTML 문서의 제목을 지정하는 태그. – 이곳에 들어간 제목은 HTML 문서를 실행했 을 때 웹 브라우저의 상단 제목 표시줄에 나 타남. – title 태그는 반드시 head 태그 안에 써줘야 함. • <body> – 문서의 본문에 해당하는 곳 – 문서 대부분의 내용이 이 body 태그 안에 들 어감. • 메모장에 작성해서 .htm 이나 .html 파일로 저 장하면 브라우저에서 바로 실행할 수 있다. 2. HTML의 기본 구조
  • 4. www.javaspecialist.co.kr 3. 문서 기본 구조 예 4 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>문서의 제목</title> <link rel="styleshee" href="default.css"> <style type="text/css"> /* css 스타일 지정 */ </style> <script type="text/javascript"> //자바스크립트 코드 </script> </head> <body> <!-- 주석 --> 본문의 내용... </body> </html>
  • 5. www.javaspecialist.co.kr 4. HTML Attributes • HTML 속성(Attribute) – html요소는 속성값을 가질 수 있음. – html요소에 대한 추가적인 정보를 제공해줌. – 속성값은 요소의 추가적인 정보를 할당해 줌. – 속성값은 항상 시작 태그에 정의. – 속성값은 name/value로 name="value"처럼 오 게 됨. • Attribute 예 – 다음 코드 예처럼 <a> 시작 태그에 속성값을 기록할 수 있음. – 일부 태그들은 필수 속성이 존재할 수 있음 <html> <body> <a href="http://www.consolbook.com">콘솔북</a> </body> </html> – 속성값은 항상 "와 "로 닫혀있어야 함. – 쌍따옴표가 대부분 일반적인 모양이지만, '싱 글' 모양도 허용됨. • 모든 요소에서 사용할 수 있는 속성 Attribute Value Description class class_rule or style_rule element 의 클래스 id id_name 요소에 대해 유일해야 함 style style_definition 동일라인의 스타일 정 의 title tooltip_text tool tip에서의 text
  • 6. www.javaspecialist.co.kr 5. 블록-레벨 요소와 인라인-레벨 요소 • HTML 문서에는 블록레벨(black level) 요소와 인라 인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있음. • 블록-레벨 요소 – <div>나 <p>, <h1>과 같은 요소들은 블록레벨 요 소. – 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과 같은 요소를 쓰지 않아도 스스로 줄 바꿈이 된다 는 데 있음. – 이 요소들은 기본적으로 문서 내에서 가로로 흐르 지 않고 세로로 흐른다. 그리고 주변에 일정량의 공간을 만든다. 또한 너비를 지정해 주지 않으면 풀사이즈가 되어 가로로 가득 차게 된다. – CSS를 적용하지 않고 이 요소들을 보면 세로로 쭉 나열되는 것을 볼 수 있음. 블록레벨 요소는 가 로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다름. • 블록-레벨 요소 종류 – <div>, <p>, <pre>,<xmp>, <h1>~<h6>, <form>, <table>, <menu>, <ul>, <ol>,<dl>,<hr>, <address>, <blockquote>, <fieldset>, <noscript> – <dir>, <center> : HTML5 에서 사라진 요소 • 인라인-레벨 요소 – <img>, <span>, <strong>과 같은 요소들은 인라 인 요소. – 인라인레벨 요소들의 특징은 줄 바꿈 태그를 사용 하지 않거나 블록레벨 태그 안에 단독으로 포함되 지 않는 한 가로로 쭉 나열된다는 데 있음. – 이 요소들의 주변에는 공간이 생기지 않는다. – 블록레벨 요소 안에 인라인 요소가 포함되도록 마 크업 해야 문법을 바르게 준수할 수 있게 된다. • 인라인-레벨 요소 종류 – <button>, <input>, <lable>, <select>, <textarea>, <strong>, <img>,< map>, <span>, <object>, <script>, <br>, <q>, <a>, <b>, <sub>, <sup>, <i>, <abbr>, <cite>, <dfn>, <kbd>, <samp>, <var>, <bdo> – <applet>, <small>, <tt>, <acronym>, <strike>, <basefont>, <big> : HTML5 에서 사라진 요소 body <h1>.........................</h1> <div> <p>......<strong>...<strong>......</p> <div> 블록-레벨 요소 인라인-레벨 요소 블록-레벨 요소와 인라인-레벨 요소
  • 7. www.javaspecialist.co.kr 6. 블록-레벨 요소 (1/3) • 그룹화 요소 (Grouping Element) – <div> • division • 문단 구조 요소 (Paragraph, Break Element) – <p> • paragraph, 문단 나눔 • 논리적 블록 요소 (Logical Block Element ) – <pre> • 입력된 텍스트들은 입력한 그대로 화면에 출력. • 태그를 실행한다. • 태그가 포함되어 있으면 태그를 실행한 결과를 출력. – <xmp> • 입력된 텍스트들은 입력한 그대로 화면에 출력. • 태그를 그대로 나타낸다. • <와 >를 &lt; 이나 &gt;으로 사용하지 않아도 <와 >를 그대로 출력. 7
  • 8. www.javaspecialist.co.kr 6. 블록-레벨 요소 (2/3) • 표제, 제목 (heading, Break Element) – <h1>~<h6>, – 6단계의 표제(heading)을 제공하고 있으며, 이는 h1 ~ h6 요소를 이용하여 표현. – 표제 즉, h 요소는 문서의 구조를 정의하는데 사용하며 스크린 리더와 같은 일부 유저 에이 전트는 h 요소를 참조해서 페이지 컨텐츠를 구성한다. – h 요소의 사용이 필수는 아니지만 이를 사용함으로서 논리적 단계를 지정할 수 있다. – h1 ~ h6 요소들 크기는 브라우저에 의존하지만 CSS의 font-size속성으로 임의 크기를 지 정할 수 있다. – h1 ~ h6 요소의 계층구조에 주의해야 한다. • 예를 들어 h1요소 다음에 h3요소를 지정하는 것은 계층 구조를 지키지 않는 것이 된다. • 즉, h1요소 다음에는 h2요소 그 다음 h3요소로 제목을 순서에 맞게 작성해야 한다. – h1요소의 경우 해당 문서의 큰 제목(타이틀)을 나타내기 때문에 원칙적으로 하나의 문서에 한번만 지정한다. 8
  • 9. www.javaspecialist.co.kr 6. 블록-레벨 요소 (3/3) • 폼 컨트롤 그룹화 요소 (Form Control Grouping Element) – <form> • HTML Form 요소는 데이터를 서버로 전달하기 위해 사용. • Form은 텍스트 필드, 체크박스, 라디오 버튼, 전송 버튼과 같은 입력 요소(input)를 포함할 수 있다. • 선택 목록(select), 텍스트 입력영역(textarea), 필드 모음(fieldset), 범례(legend), 라벨(label) 요소 또한 포함할 수 있다 • <form name="이름" action="URL" method="post/get"> – name : 현재 사용중인 폼의 이름을 정의. – action : 송신된 필드의 내용(폼 데이터)을 처리할 서버 프로그램의 URL을 지정. – method : 입력한 폼 데이터를 송신할 때 서버로 전송하고자 하는 방식(get, post)을 지정. » post : form data set이 폼의 본문에 포함되어 서버 프로그램으로 넘어가는 방식으로 문의나 게시판글쓰기, 회원가입과 같 은 페이지에서 주로 사용된다. 입력한 내용이 브라우저에 남지 않는다. 주로 서버에 데이터를 전송하는 용도로 사용한다. » get : 브라우저 주소 표시줄에 작성된 내용을 보여준다. 원래의 데이터에 변화를 주지 않고 폼의 내용이 많지 않은 경우 주 로 사용된다.(검색서비스, 게시판의 글 읽기 등), 전송하는 데이터의 크기가 제한된다. 주로 서버로부터 데이터를 요청하 는 용도로 사용한다. – <fieldset> • 폼 컨트롤(input, select, textarea)및 입력박스들을 그룹화하는 용도로 사용 • 자동으로 테두리가 생성된다. • 복수의 컨트롤 요소를 하나의 그룹으로 범위를 정의하며 그룹화 및 구조화 할 수 있다. – <legend> • 그룹화한 범위에 설명(캡션 및 ,제목)을 기술 • fieldset요소 바로 다음 순서로 한번만 정의한다. • 웹접근성을 위해 눈에 보이지 않더라도 반드시 선언해 주는 것이 좋다.(css로 처리)9
  • 10. www.javaspecialist.co.kr 7. 인라인-레벨 요소 (1/2) • 인라인-레벨 요소 – 일반적인 속성의 INLINE은 새로운 줄을 생성하지 않고 줄 내부에 위치한다. – 즉, 줄바꿈이 되는 블록 레벨과는 다르게 인라인 레벨은 줄바꿈이 되지 않는다. – 인라인 레벨 요소는 블록 레벨에겐 하위 구조이며, data, object에게는 상위구조에 속한다. – 인라인 요소의 대표적 그루핑 요소로는 <a>, <img>, <select>, <input>, <span>등이 있다 . – 웹표준을 지키는 html이라면 인라인 요소는 반드시 블록 요소 안에 "감싸져야" 한다. – 인라인 요소는 단독으로 쓰일 수 없으며 <div>,<p>와 같은 블록요소를 별도로 사용하여 그 블록레벨 요소 안에서 선언 되어야 한다. • 그룹화 요소 (Grouping Element) – <span> : 인라인 요소의 대표 요소로서 span 요소는 div 요소와 같은 그룹화 요소로 특정 한 의미 없이 인라인 레벨 요소들을 그룹화하고 스타일을 입히기 위해 존재한다. – CSS를 이용해 span요소 안의 인라인 요소들을 디자인하고 레이아웃을 적용한다. • 문단 구조 요소 (Paragraph, Break Element) – <br> : br element는 시작 태그만 존재하고 종료 태그가 없는 빈 요소(empty elements)이다 – br 요소는 해당 줄을 끝맺고 다음 줄로 이동하기 위한 줄바꿈을 의미하며, 줄바꿈을 할 위 치에 <br>요소를 삽입하기만 하면 된다. – 그러나 HTML 마크업시 <BR>요소는 최대한 사용하지 않는 것을 권장한다. <BR>을 이용 는 방법보다는 <P>태그를 사용하여 CSS를 적용하는 방법으로 문단의 너비를 조정하는 것이 바람직하다. 10
  • 11. www.javaspecialist.co.kr 7. 인라인-레벨 요소 (2/2) • Form 입력 형식 요소 (Form Control Type, Element) – <input>, <label>, <select>, <textarea> – <input> • form 요소 중 가장 중요한 요소는 input 요소이다. • input 요소는 사용자의 정보를 수집하기 위해 사용된다. • input 요소의 속성은 다음과 같다. – input 요소는 type 속성을 통해 다양한 방식으로 변할 수 있다. » input 요소의 type 속성의 값은 텍스트 필드(text), 암호필드(password), 체크박스 (checkbox), 라디오(radio), 숨김(hidden) 양식, 전송(submit), 취소(reset) 버튼 등이 될 수 있다. – name : 컨트롤에 이름을 부여한다. – maxlength : 사용자가 입력할 수 있는 최대 문자 수를 정의한다. – ckecked : 체크박스나 라디오버튼 일 때, checked 속성이 부여되면 선택된 상태로 나 타나게 된다. – readonly : 컨트롤이 읽기 전용이 되어 사용자가 임의로 변경이 불가능하게 한다. – disabled : 사용자 입력을 못하도록 한다. » disabled 컨트롤은 tabindex를 갖지 않는다. – tabindex : 탭 키를 이용해 컨트롤의 포커스를 옮길 때, 그 순서를 정의한다 – <label> • label 요소는 암시적 라벨을 가지고 있지 않는 제어의 라벨을 지정하기 위해 사용된다. • label 요소(엘리먼트)의 for 속성(애트리뷰트)은 연관된 제어(컨트롤 요소)의 id 속성 값 과 일치해야 함. 11
  • 12. www.javaspecialist.co.kr • html headings – headings는 <h1>에서 <h6>tags로 구성. – <h1>은 가장큰 heading으로 정의 되어 있음. – <h6>은 가장작은 heading으로 정의 되어 있 음. • heading의 주의점 – font의 크기와 두께를 위해서 쓰면 안된다. – 웹브라우저의 검색엔진은 heading을 구조와 웹페이지 콘텐츠로 접근한다. • 예 – <html> – <body> – <h1> this is a heading 1</h1> – <h2> this is a heading 2</h2> – <h3> this is a heading 3</h3> – <h6> this is a heading 6</h6> – </body> – </html> • 결과 8. HTML Headings
  • 13. www.javaspecialist.co.kr 8. HTML Headings (HTML/heading.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>heading</title> 6. </head> 7. <body> 8. <h1>This is heading 1</h1> 9. <h2>This is heading 2</h2> 10. <h3>This is heading 3</h3> 11. <h4>This is heading 4</h4> 12. <h5>This is heading 5</h5> 13. <h6>This is heading 6</h6> 14. hn(n=1~6) 태그는 문서의 제목을 표현할 때 사용합니다.<br> 15. 문서 내에서 h1태그는 하나만 오는 것이 바람직하며, 16. 문서의 제목을 단계별로 나타내야 할 경우에는 태그의 단계를 지키는 것이 17. 바람직합니다. 즉, h2 태그가 나온 다음에는 h3 태그가 나오는 것이 바람직합니다. 18. <br> 19. 이 태그는 줄바꿈 기능과, 진하게 하는 기능이 있습니다. 20. </body> 21. </html> 13
  • 14. www.javaspecialist.co.kr • HTML Rules(Lines) and break – <hr/> tag는 수평선을 그리기 위해 사용. – <br/> output <p>tag의 break의 의미인데 한 줄을 띄어서 출력함(브라우저에서 개행 의 미). • 예 – <html> – <body> – <p> The hr tag defines a horizontal rule : </p> – <hr/> – <p> this is a paragraph</p> – <hr/> – </body> – </html> • 결과 • html의 주석(comment) – 프로그래밍 에디터(창)에서 마크업언어를 인 식하지 못하는 글이라고 보면 된다. – C 나 JAVA에서의 주석과 같은 의미이다. – <!-- This is a comment --> – 주석 안에 또다른 주석을 넣으면 안된다. • 예 – <html> – <body> – <!-- 이 주석 내용은 안보입니다. --> – <p>This is a regular paragraph</p> – </body> – </html> 9. HTML Paragraph & Line & Break
  • 15. www.javaspecialist.co.kr 9. HTML Paragraph & Line & Break (HTML/paragraph.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>paragraph</title> 6. </head> 7. <body> 8. <p>p 태그는 문단을 나눠주는 태그입니다.</p> 9. <p>p 태그로 작성된 문단은 문단과 문단 사이에 빈 줄이 하나 생깁니다</p> 10. 태그에 <br>br 태그를 넣는것과는 다릅니다. br태그는 단순히 줄바꿈 기능만 11. 있습니다. br 태그를 두번쓰는 것과 p태그를 한번 쓰는 것이 외형적으로 12. 비슷해 보일지라도 그의미는 전혀 다릅니다. br태그는 문단을 구분하지 않습니다. 13. <br><br> 14. p 태그와 유사한 기능을 하는 태그가 있습니다. hr 태그입니다. 15. <hr> hr태그는 수평선을 만들어주는 효과가 있습니다.<br> 16. hr태그는 width 속성과 size 속성을 가질 수 있습니다. 17. width 속성은 수평선의 폭을 지정하며(%를 표시하면 브라우저 화면의 비율로), 18. size 속성은 선의 두께를 지정합니다. 19. noshade 속성(속성이름만)을 추가하면 선이 2차원으로 보입니다. 20. <hr width="80"><!-- 단위에 숫자만 기록하면 단위는 픽셀 --> 21. <hr width="80%"><!-- %를 기록하면 비율 --> 22. <hr width="300" size="10"> 23. <hr width="300" size="10" noshade align="left"> 24. </body> 25. </html> 15
  • 16. www.javaspecialist.co.kr • HTML formatting tags – <b>태그와 <i>태그는 출력 포맷 태그이며, 각각 bold와 italic 텍스트를 나타낸다. – 이러한 태그들을 포멧팅 태그라 부른다. • 예 1) <html> <body> <p><b> This is bold</b></p> <p><strong> this is string </strong></p> <p><big> this is big </big></p> <p><em> this text is emphasized </em></p> <p><i>this text is italic </i></p> <p><small>this text is samll</small></p> <p> this is <sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> </body> </html> • 예 2) <html> <body> <code>Computer code</code><br> <kbd>Keyboard input</kbd><br> <tt>Teletype text</tt><br> <samp>Sample text</samp><br> <var>Computer variable</var><br> <p><b>Note:</b> These tags are often used to display computer/programming code.</p> </body> </html> • 예 3) <html> <body> <address> Donald Duck<br> BOX 555<br> Disneyland<br> USA</address> </body> </html> 10. HTML Formatting (HTML/formatting.html) 특정 단어를 강조하고 싶을 때는 <b> 태그보다 <strong> 태그를 사용하는 것이 좋다 외관상으로 는 두 태그 모두 텍스트를 굵게 보이게 하여 강조해 주지만, <b> 태그는 단지 굵게 만들어 줄 뿐 강조하는 아무 의미가 없는 태그 이다. 반면에 <strong> 태그는 외 형적으로 텍스트를 굵게 해 주고 실제로 의미 있는 텍스트라고 강 조해 주는 역할도 한다.
  • 17. www.javaspecialist.co.kr • 웹사이트의 메뉴나 목록 형태의 컨텐츠를 만들 때는 <ul>과 <li> 태그를 사용한다. • 만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫 자를 순차적으로 붙이고 싶을 때는 <ol>, <li>를 이용하 면 관리하기 쉽고 훨씬 의미 있는 마크업이 된다. • 주 메뉴 등 연속된 링크를 목록 태그로 구성한 다음 CS S를 이용해 표현 형식을 다르게하여 사용할 수 있다. • 비순차적 목록(Unordered List) – <ul>태그는 "Unordered List" 의 약자로 비순차적 목 록을 나타낼 때 사용한다. – <li>태그를 사용해서 목록의 항목을 표현한다. • 태그 속성 – type • type 속성은 글머리표를 지정하는데 사용되며, <ul> 태그와 <li>태그에 공통으로 사용될 수 있다 . • <ul>태그의 속성으로 사용될 경우에는 목록 전체 에 영향을 주며, <li>태그에 속성이 사용될 경우 에는 해당하는 목록에만 영향을 준다. • 속성의 값은 circle, square, disc 중 하나를 선택 할 수 있으며, circle은 ○, square는 ■, 그리고 disc는 ●모양으로 목록에 글머리표가 표시된다. 1. <html> 2. <body> 3. <h4>Disc bullets list:</h4> 4. <ul type="disc"> 5. <li>Apples</li> 6. <li>Bananas</li> 7. <li>Lemons</li> 8. <li>Oranges</li> 9. </ul> 10. 11.<h4>Circle bullets list:</h4> 12.<ul type="circle"> 13. <li>Apples</li> 14. <li type="square">Bananas</li> 15. <li>Lemons</li> 16. <li>Oranges</li> 17.</ul> 18. 19.<h4>Square bullets list:</h4> 20.<ul type="square"> 21. <li>Apples</li> 22. <li>Bananas</li> 23. <li>Lemons</li> 24. <li>Oranges</li> 25.</ul> 26. 27.</body> 28.</html> 11. HTML Lists (1/2)
  • 18. www.javaspecialist.co.kr • 순차적 목록(Ordered List) – <ol> 태그는 "Ordered List" 의 약자로 순차적 목 록을 나타낼 때 사용. – <li> 태그를 사용해서 목록을 표현. • 태그 속성 – type • type 속성은 글머리표를 지정하는데 사용되 며, <ol>과 <li>태그에 공통으로 올 수 있다. • <ol>태그의 속성으로 사용될 경우에는 목록 전체에 영향을 주며, <li>태그에 속성이 사용 될 경우에는 해당하는 목록에만 영향을 준다. • 속성의 값은 A, a, I, i, 1 중 하나가 올 수 있다. • 각각 속성 값에 따라 글머리표는 A : 영문자(대문자), a : 영문자(소문자), I : 그리스 숫자(대문자), i : 그리 스 숫자(소문자), 1 : 아라비아 숫자(기본 값)가 된다. – start • start 속성은 <ol>태그 안에서 사용된다. <ol start="적용하고 싶은 숫자">처럼 사용하였을 경우 순차적 목록의 시작 번호를 지정할 수 있다. – value • value 속성은 <li>태그 안에서 사용된다. <li value="적용하고 싶은 숫자">처럼 사용하여 특정 목록에 원하는 번호를 지정할 수 있다. 1. <h4>Numbered list:</h4> 2. <ol> 3. <li>Apples</li> 4. <li>Bananas</li> 5. <li>Lemons</li> 6. <li>Oranges</li> 7. </ol> 8. <h4>Letters list:</h4> 9. <ol type="A"> 10. <li>Apples</li> 11. <li>Bananas</li> 12. <li>Lemons</li> 13. <li>Oranges</li> 14. </ol> 15. <h4>Lowercase letters list:</h4> 16. <ol type="a"> 17. <li>Apples</li> 18. <li value="3">Bananas</li> 19. <li>Lemons</li> 20. <li>Oranges</li> 21. </ol> 22. <h4>Roman numbers list:</h4> 23. <ol type="I" start="2"> 24. <li>Apples</li> 25. <li>Bananas</li> 26. <li>Lemons</li> 27. <li>Oranges</li> 28. </ol> 29. <h4>Lowercase Roman numbers list:</h4> 30. <ol type="i"> 31. <li>Apples</li> 32. <li>Bananas</li> 33. <li>Lemons</li> 34. <li>Oranges</li> 35. </ol> 11. HTML Lists (2/2)
  • 19. www.javaspecialist.co.kr 11. HTML Lists (HTML/list.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>list</title> 6. </head> 7. <body> 8. 리스트는 ol, ul, dl 3가지가 있습니다.<br> 9. ol은 ordered list의 약어, 순서가 있는 목록을 표현<br> 10.ul은 unordered list의 약어, 순서가 없는 목록을 표현<br> 11.dl은 definition list의 약어, 정의 목록을 표현합니다.<br> 12.<ol start="6"> 13.<li>다음 중 빈으로 등록하기 위한 아노테이션이 아닌 것은? 14. <ol type="a"> 15. <li>Component 16. <li>Service 17. <li>Resource 18. <li>Controller 19. </ol> 20.</li> 21.<li>component-scan 태그를 사용하기 위해 추가해야 하는 네임스페이스는? 22. <ol type="I"> 23. <li>context 24. <li>aop 25. <li>component 26. <li>property 27. </ol> 28.</li> 29.</ol> 30.<hr> 19
  • 20. www.javaspecialist.co.kr 11. HTML Lists (HTML/list.html) 1. <p>내가 좋아하는 과일</p> 2. <ul type="square"><!-- square, circle, disc --> 3. <li>사과 4. <li type="circle">바나나 5. <li>포도 6. <li>복숭아 7. </ul> 8. <hr> 9. dl은 사전에 정의된 단어와 그 의미를 표현할 때 사용한다.<br> 10.dd태그에 의한 값은 들여쓰기 된다. 11.<dl> 12. <dt>HTML 13. <dd>Hyper Text Markup Language 14. <dt>WWW 15. <dd>World Wide Web 16.</dl> 17.<hr> 18.목록과 관련된 태그는 단순하게 목록을 표현할 때에만 사용되는 것은 아닙니다.<br> 19.문서 내에서 여러개의 항목을 나열할 때 사용합니다. 예를 들면 문서 내에서 주메뉴 등의 링크, 또는 페이지 네비게이션 등 에 사용됩니다. 20.</body> 21.</html> 20
  • 21. www.javaspecialist.co.kr 12. HTML Links • 하이퍼링크를 만들기 위해 <a> 태그를 사용한다.(Anchor태그라 부른다.) – <a href="URL">text</a> – 시작태그 안의 href 속성은 링크 문자열을 클릭하였을 때 참조할 주소를 입력하여 준다. – 링크요소의 내용(element contents)은 반드시 텍스트일 필요는 없다. 이미지나 다른 HTML 요소들에도 링크를 설정할 수 있다. • 태그 속성 – href : 연결될 주소를 지정할 때 사용한다. 필수속성이다. href="http://www.naver.com" 이 라고 지정하면 네이버 홈페이지로 이동하게 한다는 의미이다. – target : 연결된 문서가 열려질 장소를 정의한다. 속성의 값으로 _blank, _self, _top, _parent가 있다. • _blank를 사용하면 새로운 창으로 링크된 주소가 열리게 된다. • _self 는 현재 프레임에 링크된 주소를 연다. • _top는 브라우저의 화면에 있는 모든 프레임을 취소하고 링크된 주소를 연다. • _parent는 현재 프레임을 포함하는 상위 프레임에 링크된 주소를 연다. – name : name 속성은 HTML문서 안에서 이름을 갖는 앵커(Named Anchor)를 정의할 때 사 용한다. • name 속성으로 지정된 앵커는 브라우저에는 나타나지 않는다. • Named Anchor 사용 방법은 <a name="label">앵커 이름</a> 으로 문서 내의 위치를 지 정하고, • <a href="#label">링크 내용</a> 으로 문서 내의 특정 위치로 찾아가기 위한 링크를 지정 한다. 21
  • 22. www.javaspecialist.co.kr 12. HTML Links • 예 – <HTML> – <HEAD> – <TITLE>하이퍼링크</TITLE> – </HEAD> – <BODY> – <a href = "http://www.naver.com">네이버</a><br> – <a href = "http://www.naver.com" target="_blank">네이버</a><br> – </BODY> – </HTML> 새 탭으로 보여짐 22
  • 23. www.javaspecialist.co.kr 12. HTML Links (HTML/anchor.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>anchor</title> 6. </head> 7. <body> 8. anchor 태그는 링크를 만들어줍니다. 9. 클릭했을 때 보여질 대상 사이트 주소는 href 속성을 이용합니다. 10. <br> 11. 네이버 페이지로 이동되게 하는 코드는 <a href="http://www.naver.com">네이버</a>입니다. 12. <br> 13. 문서 내에서 원하는 위치로 이동이 되게 하고 싶다면 href 속성에 #을 이용합니다.<br> 14. <p id="top">문서의 맨 위</p> 15. <a href="#chapter1">문서내의 특정 위치로 이동 - 1장</a><br> 16. <a href="#chapter2">문서내의 특정 위치로 이동 - 2장</a> 17. <!-- 이 곳을 클릭하면 chapter1이라는 아이디 속성이 부여된 곳이 화면 맨 위로 올라옵니다. --> 18. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <!-- 생략 --> 19. <p id="chapter1">문서 내의 특정 위치-1장</p> 20. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <!-- 생략 --> 21. <a href="#top">맨 위로</a> 22. <p id="chapter2">문서 내의 특정 위치-2장</p> 23. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <!-- 생략 --> 24. <a href="#top">맨 위로</a> 25. </body> 26. </html> 23
  • 24. www.javaspecialist.co.kr 13. HTML Table • 테이블을 표시할 때에는 <table>태그를 사용한다. • <table>태그는 – <thead>와 <tbody>태그를 포함하여 테이블의 헤더와 바디를 구분한다. – <tr>태그를 포함하며, <tr>태그는 <td>태그 또는 <th>태그를 포함한다. – 테이블의 경계선을 표시하는 border 속성의 디폴트 값은 0이다. 테이블 경계선을 보이게 하려면 속성의 값을 1이상을 줘야 한다. • <tr>태그는 – 테이블의 행을 만들어 주는 역할을 한다. – Table Row • <td>태그는 – 테이블의 행 안에 테이블의 셀을 만들어주는 역할을 한다. – Table Data • <th>태그는 – 테이블의 제목 셀을 표시(진하게 표시됨)할 때 사용한다. – Table Heading • 셀 합치기 – <td>태그의 속성들 중에서 rowspan과 colspan 속성은 여러 개의 셀을 하나로 합쳐주는 역 할을 한다. • rowspan 속성은 셀의 속성 값으로 지정한 수 만큼 인접한 아래 셀을 합쳐준다. • colspan 속성은 셀의 속성 값으로 지정한 수 만큼 인접한 오른쪽 셀을 합쳐준다. 24
  • 25. www.javaspecialist.co.kr 13. HTML Table (HTML/table.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Insert title here</title> 6. </head> 7. <body> 8. table은 표를 만들어 줍니다.<br> 9. caption은 표의 제목을 만들어 줍니다.<br> 10.thead, tfoot와 tbody는 표의 헤더, 푸터, 표의 바디를 구분합니다.<br> 11.tr(table row)은 행을 만들어줍니다.<br> 12.td(table data)는 행에 들어가는 셀 하나를 만들어줍니다.<br> 13.th(table header)는 td 대신 제목 셀을 표현할 때 사용합니다.<br> 14.<hr> 15.<table width="80%" border="1" cellspacing="0" cellpadding="5" tyle="border-collapse:collapse" align="center"> 16.<caption>표의 제목입니다.</caption> 17.<tr align="center" bgcolor="red"> 18. <td colspan="2">셀 하나</td> 19. <!-- td>셀 하나</td--> 20. <td bgcolor="yellow">셀 하나</td> 21.</tr> 22.<tr> 23. <td bgcolor="blue">셀 하나</td> 24. <td>셀 하나</td> 25. <td rowspan="2">셀 하나</td> 26.</tr> 27.<tr> 28. <td>셀 하나</td> 29. <td>셀 하나</td> 30. <!-- td>셀 하나</td--> 31.</tr> 32.</table> 33.</body> 34.</html> 25
  • 26. www.javaspecialist.co.kr 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2. <HTML> 3. <HEAD> 4. <TITLE>HTML 테이블</TITLE> 5. </HEAD> 6. <BODY> 7. <h4> one column </h4> 8. <table border="1"> <!-- border: 선 굵기 --> 9. <tr> 10. <td>100</td> 11. </tr> 12.</table> 13.<br/> 14.<h4> one row and three columns </h4> 15.<table border="1"> 16. <tr> 17. <td>100</td> 18. <td>200</td> 19. <td>300</td> 20. </tr> 21.</table> 22.<br/> 23.<h4> Two rows and tree columns </h4> 24.<table border="1"> 25. <tr> 26. <td>100</td> 27. <td>200</td> 28. <td>300</td> 29. </tr> 30. <tr> 31. <td>400</td> 32. <td>500</td> 33. <td>600</td> 34. </tr> 35.</table> 36.</BODY> 37.</HTML> 13. HTML Table (HTML/table1.html) 26
  • 27. www.javaspecialist.co.kr 13. HTML Table (HTML/table2.html) 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2. <HTML> 3. <HEAD> 4. <TITLE>테이블 연습</TITLE> 5. </HEAD> 6. <BODY> 7. <table border="0" align="center" width="600" cellspacing="3"> 8. <tr> 9. <th colspan="3">가장 인기있는 스포츠 종목과 그 운동기구들</th> 10. </tr> 11. <tr> 12. <td bgcolor="gold" align="center" width="200">야구</td> 13. <td bgcolor="gold" align="center" width="200">축구</td> 14. <td bgcolor="gold" align="center" width="200">농구</td> 15. </tr> 16. <tr> 17. <td>미국의 메이저리그가 가장유명하고 좋고 좋다</td> 18. <td>월드컵 축구가 한국에서 2002년도에 열렸다</td> 19. <td><nobr>조던이라는 농구의 슈퍼스타가 예전에 있었다</nobr></td> 20. </tr> 21. <tr> 22. <td bgcolor="pink" align="center"><font color="green">야구공</font></td> 23. <td bgcolor="pink" align="center"><font color="blue">축구공</font></td> 24. <td bgcolor="pink" align="center"><font color="#FF00FF">농구공</font></td> 25. </tr> 26. </table> 27. </BODY> 28. </HTML> 27
  • 28. www.javaspecialist.co.kr 14. HTML input • 입력 양식을 만들 때 사용하는 Form 요소의 하위 요소로 input 요소를 사용할 수 있다. – Input 요소는 type 속성의 값에 따라 입력 양식을 다르게 보여준다. – HTML4.01에서 type 속성의 값은 text, password, checkbox, hidden, radio, image, button, submit, reset 등이 있다. – type 속성의 값이 checkbox와 radio 일 경우에는 name 속성의 값이 같아야 같은 그룹으로 적용된다. radio일 경우 name 속성의 값이 다르면 모두 선택상태가 될 수 있다. <form action="#" method="post" > <p>성:<input type="text" id="lastname" title="성" value="성명의 성" class="input_txt"></p> <p>이름:<input type="text" id="firstname" title="이름" value="성명의 이름" class="input_txt"></p> <p><label for="nick">닉네임</label><input type="text" id="nick" title="닉네임" value="별명으로 사용할 이름 "> <input type="image" src="id_confirm.png" alt="중복확인"></p> <p>비밀번호:<input type="password" id="pwd" title="비밀번호" class="input_txt"></p> <p><input type="radio" name="md_area" id="radio_s" checked><label for="radio_s">서울</label> <input type="radio" name="md_area" id="radio_k" checked><label for="radio_k">경기</label> </p> <p><input type="checkbox" name="md_agr" id="agr" checked><label for="agr">다음 내용에 동의합니다 </label></P> </form> • type 속성의 값이 hidden 일 경우 브라우저 화면에 보이지 않지만 submit 버튼으로 폼 데이터를 전송시 다른 폼데이터와 함께 전송된다. 28
  • 29. www.javaspecialist.co.kr 15. HTML label • 텍스트 필드(text), 체크박스(checkbox), 라디오 버튼(radio), 메뉴(menu) 등 대부분은 갖지 않 지만, 일부 폼(form) 제어(control)는 자동적으로 단추와 연관 된 라벨을 갖는다. • label 요소는 암시적 라벨을 가지고 있지 않는 제어의 라벨을 지정하기 위해 사용된다. • label 요소는 제어(control)에 정보를 첨부하는데 사용 될 수 있다. • 컨트롤 요소 하나에 정확하게 한 개의 라벨 요소가 연관되어 사용된다. • label 요소(엘리먼트)의 for 속성(애트리뷰트)은 연관된 제어(컨트롤 요소)의 id 속성 값과 일 치해야 한다. • 다음과 같이 레이블을 지정하면 "예"를 클릭하더라도 라디오버튼이 선택된다. • <input type="radio" id="yes_button" name="yes"> • <label for="yes_button" title="그렇다면 예를 선택하라">예</label> • for 속성을 사용하지 않으려면 <label>요소가 <input>요소를 포함하도록 하면 된다. • <label title="그렇다면 예를 선택하라"> • <input type="radio" name="yes"> 예 • </label> 29
  • 30. www.javaspecialist.co.kr 15. HTML label (HTML/label.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Insert title here</title> 6. <style type="text/css"> 7. body { 8. font-size:12px; font-family:'돋음'; 9. } 10. label { 11. cursor:hand; color:#999; 12. padding:0 10px 8px 0; 13. } 14. </style> 15. </head> 16. <body> 17. <form action="./" method="post"> 18. <p>라디오 버튼 테스트 텍스트를 클릭해도 선택된다<br /> 19. <strong>설명조사가 만족 스러우십니까?</strong> 20. <input type="radio" id="yes_button" name="yes"> 21. <label for="yes_button" title="그렇다면 예를 선택하라">예</label> 22. <input type="radio" id="no_button" name="yes"> 23. <label for="no_button" title="그렇지 않다면 아니요를 선택하라">아니요</label> 24. 25. <p>체크박스를 직접 선택하지 않고, 네트윅 프로그래밍 같은 텍스트를 선택해도 선택된다<br /> 26. <strong>관심분야를 선택해주세요</strong><br /> 27. <input type="checkbox" id="che0" name="che"> 28. <label for="che0" title="관심분야 : 디자이너">디자이너</label> 29. <input type="checkbox" id="che1" name="che"> 30. <label for="che1" title="관심분야 : 서비스업">서비스업</label> 31. <input type="checkbox" id="che2" name="che"> 32. <label for="che2" title="관심분야 : 사이트관리">사이트관리</label> 33. 34. <p>텍스트를 클릭하면 입력상자가 선택된다<br /> 35. <strong><label for="hint">비밀번호 힌트를 적어주세요</label></strong><br> 36. <input type="text" name="hint" id="hint"> 37. </form> 38. </body> 39. </html> 30
  • 31. www.javaspecialist.co.kr 16. HTML select, button. textarea • <select> – 여러 개 목록 중에서 선택된 하나만 보여주는 셀렉트 박스(드롭다운 리스트 박스라고 부르기도 한다.)를 만들어준다. <optgroup>태그를 이용하면 선택 항목을 그룹으로 묶어줄 수 있다. <option>태그에 value 속성을 포함하지 않으면 선택 항목이 값으로 지정된다. <select>태그에 multiple 속성을 부여하면 복수 개 선택할 수 있도록 한다. – <select name="grade"> <option value="A">A 등급</option> <option value="B">B 등급</option> <option value="C">C 등급</option> </select> • <button> – 버튼을 제공한다. – 폼 전송 역할을 하는 디자인 미적용 버튼은 input 요소의 type 속성을 submit 타입을 사용한다. – 이미지를 이용한 디자인 버튼은 <input type="image">로 사용한다. – <button type="button"> 열기 </button> – <button type="submit"> 전송 </button> • <textarea> – 여러 줄 입력할 수 있는 입력 양식을 만든다 – 화면에 보여지는 입력양식의 폭과 높이는 cols와 rows속성으로 선언한다. – css를 정상적으로 불러오지 못하는 상황에서도 사용에 문제가 없도록 cols, rows의 애트리뷰트 값은 각각 최소 30, 5이상이 되도록 선언한다. – 다음 코드는 폭은 글자 30자, 높이는 5줄 크기의 입력양식을 만든다 – <textarea cols="30" rows="5"></textarea> 31
  • 32. www.javaspecialist.co.kr 16. HTML select, button, textarea (HTML/select.html) • <input type="text" name="hint" id="hint"> • <p>등급을 선택하라</p> • <select style="width:100px"> • <option value="A">A 등급</option> • <option value="B">B 등급</option> • <option value="C">C 등급</option> • </select><br /> • <p>폼 전송 역할을 하는 디자인 미적용 버튼은 submit 타입을 사용한다 (디자인 버튼은 &lt;input type="image"&gt;로 사용한다.)</p> • <button type="button"> 열기 </button> • <button type="submit"> 전송 </button><br /> • <p>메모를 입력하라.</p> • <textarea cols="30" rows="5"></textarea><br /> 32
  • 33. www.javaspecialist.co.kr 16. HTML select, button, textarea (HTML/form.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="euc-kr"> 5. <title>form</title> 6. </head> 7. <body> 8. <h1>폼 관련 태그 실습입니다.</h1> 9. <form action="result.jsp" method="post"> 10. <fieldset> 11. <legend>입력 양식</legend> 12. 아이디 : <input type="text" name="userid"><br> 13. <!-- 파라미터의 이름이 name 속성의 값이 된다. --> 14. 비밀번호 : <input type="password" name="userpw"><br> 15. 파일 : <input type="file" name="filename"><br> 16. 운동 : <input type="checkbox" name="hobby" value="soccer">축구 17. <input type="checkbox" name="hobby" value="baseball">야구 18. <input type="checkbox" name="hobby" value="golf">골프 19. <input type="checkbox" name="hobby" value="swimming">수영<br> 20. <!-- 체크박스는 같은 그룹일 경우 name 속성의 값이 같아야 한다. --> legend태그는 fieldset 태 그 안에서 사용된다. 폼 양식에 테두리와 범례를 제공한다. 33
  • 34. www.javaspecialist.co.kr 16. HTML select, button, textarea 21 직업 : <input type="radio" name="job" value="programmer">프로그래머 22 <input type="radio" name="job" value="salesman">세일즈맨 23 <input type="radio" name="job" value="professor">교수<br> 24 <!-- 라디오는 같은 그룹일 경우 name 속성의 값이 같아야 한다. --> 25 <input type="hidden" name="id" value="uid0001"> 26 <select name="major" multiple><!-- multiple 속성은 복수 개 선택할 수 있도록 함 --> 27 <option value="1">컴퓨터 28 <option>경제 29 <option>경영 30 <option>자동차 31 <option>전기 32 <option>건축 33 </select><br><!-- result.jsp에 request.setCharacterEncoding("euc-kr");를 포함시킴 --> 34 <!-- textarea는 여러줄 입력 양식을 만들어 줌 --> 35 <textarea rows="5" cols="70"> 36 이곳에 입력한 데이터는 37 텍스트 영역에 그대로 표시됩니다. 38 </textarea><br> 39 <input type="submit" value=" 확인 "> 40 <input type="reset" value=" 취소 "> 41 </fieldset> 42 </form> 43 </body> 44 </html> 34
  • 35. www.javaspecialist.co.kr 17. HTML image • 이미지를 삽입하기 위해 <img> 요소를 사용한다. • 사용법은 다음과 같다. – <img src="이미지 파일 경로" width="너비" height="높이" alt="설명" align="정렬속성값"> – <img>요소는 src 속성을 필수 속성으로 가지며 그림파일의 경로를 지정한다. – width와 height 속성은 보여질 이미지의 크기를 지정한다. – alt 속성은 이미지 툴팁(이미지의 설명)을 지정한다. – 정렬 속성값인 align은 • 이미지의 위치만을 지정하는 LEFT(왼쪽), RIGHT(오른쪽)와 • 이미지와 텍스트 사이의 정렬 위치를 지정하는 TOP(위), MIDDLE(중간), BOTOM(아래) 이 있다. – 이 외에도 • 테두리의 두께를 지정하는 border와 • 테두리와 가로 여백을 지정하는 hspace, 세로 여백을 지정하는 vspace가 있다. • 툴팁이 이미지를 가릴 때 – <img src="main_info.gif" title="" alt="01.가이드를 꼭 지켜주세요. 가이드 보기" width="360" height="200" /> • alt 텍스트는 본래 이미지가 출력되지 않는 경우에만 브라우저에 시각적으로 표시되어야 하는데 Internet Explorer는 이미지에 마우스를 올리는 경우에도 alt 값을 툴팁 형식으로 표시하고 있어서 이 미지에 포함된 문자를 시각적으로 인지하는데 오히려 방해가 되기도 한다. 이러한 경우에는 title 속 성 값이 alt 속성 값보다 우선순위를 가지고 툴팁으로 표시되는 브라우저 특성을 이용하여 alt 값에 원 문과 동등한 수준의 대체텍스트를 제공하고 title 속성을 사용하되 값을 비워둡니다. 이런 경우 Internet Explorer는 alt 대신 title 속성의 값을 툴팁으로 표시하려고 하는데 title 속성의 값이 비어 있 으므로 결국 Tool Tip을 표시하지 않게 된다. 35
  • 36. www.javaspecialist.co.kr Lab - 문제 • 다음과 같은 입력 양식이 출력되도록 HTML 문서를 작성하라. 자세한 설명은 다음 슬라이드에… 36
  • 37. www.javaspecialist.co.kr Lab - 문제 • 다음과 같은 입력 양식이 출력되도록 HTML 문서를 작성하라. 제목 h2 2 입력필드 text 4 셀렉션 필드 목록에 보이는 값과 선택시의 값이 같음 6 버튼 submit과 reset 버튼임 9 구조 입력 양식은 표 안 에 작성되어야 함 제목과 입력양식 이 모두 블록 요소 안에 포함되어야 함 1 요청방식 post 3 입력 값 힌트 placeholder 7 셀렉션 필드 선택시의 값은 각각 10, 20, 30, 40임 8 성별 radio, 둘 중 하나 만 선택되어야 함 5 37
  • 38. www.javaspecialist.co.kr Lab - Solution (HTML/Lab/end/EmpForm.html) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <meta http-equiv="content-language" content="ko"> 6. <title>Emp 정보 입력</title> 7. <link rel="stylesheet" href="default.css" type="text/css" > 8. </head> 9. <body> 10.<!-- wrap start --> 11.<div id="wrap"> 12. <div id="middle_content"> 13. <!-- 현재위치 네비게이션 시작 --> 14. <div id="cur_loc"> 15. <div id="cur_loc_align"> 16. <ul> 17. <li>HOME</li> 18. <li>&gt;</li> 19. <li>테이블 관리</li> 20. <li>&gt;</li> 21. <li><strong>Emp 테이블 관리</strong></li> 22. </ul> 23. </div> 24. </div> 25. <div id="content_field"> 26. <!-- 여기부터 본문의 내용이 들어갑니다. --> 27. <div class="form_div"> 28. <div><h2>Emp 정보</h2></div> 29. <form action="../form_result.jsp" method="post"> 30. 38
  • 39. www.javaspecialist.co.kr Lab - Solution (HTML/Lab/end.html) 31. <form action="../form_result.jsp" method="post"> 32. <table> 33. <tr> 34. <td>사원번호 : </td> 35. <td><input type="text" name="empno" value=""></td> 36. </tr> 37. <tr> 38. <td>이름 : </td> 39. <td><input type="text" name="ename" value=""></td> 40. </tr> 41. <tr> 42. <td>성별 : </td> 43. <td><label><input type="radio" name="sex" value="M">남자</label> 44. <label><input type="radio" name="sex" value="F">여자</label></td> 45. </tr> 46. <tr> 47. <td>직업 : </td> 48. <td><input type="text" name="job" value=""></td> 49. </tr> 50. <tr> 51. <td>상사 : </td> 52. <td><select name="mgr"> 53. <option>7369</option> 54. <option>7499</option> 55. <option>7521</option> 56. <option>7566</option> 57. <option>7654</option> 58. <option>7698</option> 59. <option>7782</option> 60. <option>7788</option> 39
  • 40. www.javaspecialist.co.kr Lab - Solution (HTML/Lab/end.html) 61. <option>7839</option> 62. <option>7844</option> 63. <option>7876</option> 64. <option>7900</option> 65. <option>7902</option> 66. <option>7934</option> 67. </select></td> 68. </tr> 69. <tr> 70. <td>입사일 : </td> 71. <td><input type="text" name="hiredate" value="" placeholder="2012-01-01">예:2012-01-01</td> 72. </tr> 73. <tr> 74. <td>급여 : </td> 75. <td><input type="text" name="sal" value=""></td> 76. </tr> 77. <tr> 78. <td>커미션 : </td> 79. <td><input type="text" name="comm" value=""></td> 80. </tr> 81. <tr> 82. <td>부서번호 : </td> 83. <td><select name="deptno"> 84. <option value="10">10 ACCOUNTING NEW YORK</option> 85. <option value="20">20 RESEARCH DALLAS</option> 86. <option value="30">30 SALES CHICAGO</option> 87. <option value="40">40 OPERATIONS BOSTON</option> 88. </select></td> 89. </tr> 90. <tr> 40
  • 41. www.javaspecialist.co.kr Lab - Solution (HTML/Lab/end.html) 91. <td></td> 92. <td><input type="submit" value=' 저장 '> 93. <input type="reset" value=" 취소 "></td> 94. </tr> 95. </table> 96. </form> 97. </div> 98. <!-- 여기까지 본문의 내용입니다. --> 99. </div> 100. </div> 101.</div> 102.<!-- //wrap end --> 103.</body> 104.</html> 41