2 1. html4.01

www.javaspecialist.co.kr
HTML
1

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

• 시작하기 전에...
– 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의 기본 구조

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>

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

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>
블록-레벨
요소
인라인-레벨
요소
블록-레벨 요소와 인라인-레벨 요소

6. 블록-레벨 요소 (1/3)
• 그룹화 요소 (Grouping Element)
– <div>
• division
• 문단 구조 요소 (Paragraph, Break Element)
– <p>
• paragraph, 문단 나눔
• 논리적 블록 요소 (Logical Block Element )
– <pre>
• 입력된 텍스트들은 입력한 그대로 화면에 출력.
• 태그를 실행한다.
• 태그가 포함되어 있으면 태그를 실행한 결과를 출력.
– <xmp>
• 입력된 텍스트들은 입력한 그대로 화면에 출력.
• 태그를 그대로 나타낸다.
• <와 >를 < 이나 >으로 사용하지 않아도 <와 >를 그대로 출력.
7

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

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

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

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

• html headings
– headings는 <h1>에서 <h6>tags로 구성.
– <h1>은 가장큰 heading으로 정의 되어 있음.
– <h6>은 가장작은 heading으로 정의 되어 있
음.
• heading의 주의점
– font의 크기와 두께를 위해서 쓰면 안된다.
– 웹브라우저의 검색엔진은 heading을 구조와
웹페이지 콘텐츠로 접근한다.
• 예
– <html>
– <body>
– <h1> this is a heading 1</h1>
– </body>
– </html>
• 결과
8. HTML Headings

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>
14. hn(n=1~6) 태그는 문서의 제목을 표현할 때 사용합니다.<br>
15. 문서 내에서 h1태그는 하나만 오는 것이 바람직하며,
16. 문서의 제목을 단계별로 나타내야 할 경우에는 태그의 단계를 지키는 것이
17. 바람직합니다. 즉, h2 태그가 나온 다음에는 h3 태그가 나오는 것이 바람직합니다.
18. <br>
19. 이 태그는 줄바꿈 기능과, 진하게 하는 기능이 있습니다.
20. </body>
21. </html>
13

• 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에서의 주석과 같은 의미이다.
– 
– 주석 안에 또다른 주석을 넣으면 안된다.
• 예
– <html>
– <body>
– 
– <p>This is a regular paragraph</p>
– </body>
– </html>
9. HTML Paragraph & Line & Break

9. HTML Paragraph & Line & Break (HTML/paragraph.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
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

• 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> 태그는 외
형적으로 텍스트를 굵게 해 주고
실제로 의미 있는 텍스트라고 강
조해 주는 역할도 한다.

• 웹사이트의 메뉴나 목록 형태의 컨텐츠를 만들 때는
<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>
25.</ul>
26.
27.</body>
28.</html>
11. HTML Lists (1/2)

• 순차적 목록(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>
12. <li>Lemons</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>
21. </ol>
22. <h4>Roman numbers list:</h4>
23. <ol type="I" start="2">
24. <li>Apples</li>
26. <li>Lemons</li>
28. </ol>
29. <h4>Lowercase Roman numbers list:</h4>
30. <ol type="i">
31. <li>Apples</li>
33. <li>Lemons</li>
35. </ol>
11. HTML Lists (2/2)

11. HTML Lists (HTML/list.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
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

11. HTML Lists (HTML/list.html)
1. <p>내가 좋아하는 과일</p>
2. <ul type="square">
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

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

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

12. HTML Links (HTML/anchor.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
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. 
18. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. 
19. <p id="chapter1">문서 내의 특정 위치-1장</p>
21. <a href="#top">맨 위로</a>
22. <p id="chapter2">문서 내의 특정 위치-2장</p>
24. <a href="#top">맨 위로</a>
25. </body>
26. </html>
23

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

13. HTML Table (HTML/table.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
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. 
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>
30. 
31.</tr>
32.</table>
33.</body>
34.</html>
25

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"> 
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

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

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

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

15. HTML label (HTML/label.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
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>
30. <label for="che1" title="관심분야 : 서비스업">서비스업</label>
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

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

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 타입을 사용한다 (디자인 버튼은
<input type="image">로 사용한다.)</p>
• <button type="button"> 열기 </button>
• <button type="submit"> 전송 </button><br />
• <p>메모를 입력하라.</p>
• <textarea cols="30" rows="5"></textarea><br />
32

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. 
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. 
legend태그는 fieldset 태
그 안에서 사용된다. 폼
양식에 테두리와 범례를
제공한다.
33

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 
25 <input type="hidden" name="id" value="uid0001">
26 <select name="major" multiple>
27 <option value="1">컴퓨터
28 <option>경제
29 <option>경영
30 <option>자동차
31 <option>전기
32 <option>건축
33 </select><br>
34 
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

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

Lab - 문제
• 다음과 같은 입력 양식이 출력되도록 HTML 문서를 작성하라.
자세한 설명은 다음 슬라이드에…
36

Lab - 문제
• 다음과 같은 입력 양식이 출력되도록 HTML 문서를 작성하라.
제목
h2
2
입력필드
text
4
셀렉션 필드
목록에 보이는
값과 선택시의
값이 같음
6
버튼
submit과 reset
버튼임
9
구조
입력 양식은 표 안
에 작성되어야 함
제목과 입력양식
이 모두 블록 요소
안에 포함되어야
함
1
요청방식
post
3
입력 값 힌트
placeholder
7
셀렉션 필드
선택시의 값은
각각 10, 20,
30, 40임
8
성별
radio, 둘 중 하나
만 선택되어야 함
5
37

Lab - Solution (HTML/Lab/end/EmpForm.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
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.
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>></li>
19. <li>테이블 관리</li>
20. <li>></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

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>
39

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

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.
103.</body>
104.</html>
41

2 1. html4.01

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 2 1. html4.01

Similar to 2 1. html4.01 (20)

More from JinKyoungHeo

More from JinKyoungHeo (6)

2 1. html4.01