<C0A5C7C1B7CEB1D7B7A1B9D628B8F1C2F7292E687770>

Transcription

1 웹 프로그래밍 이용규 김신우 박성은 지음

2

3 머 리 말 웹은 월드와이드웹(World Wide Web)의 약자로서 하이퍼텍스트 문서를 인 터넷을 통해 제공하는 시스템이다. 웹 프로그래밍이란 웹에서 동작하는 프로 그램을 작성하는 것으로 여러 가지 언어들이 사용된다. 웹 페이지 작성을 위 해서는 마크업 언어가 사용되고, 클라이언트에서 실행되는 프로그램을 위해 서는 클라이언트 사이드 언어가 이용되며, 서버에서 수행되는 프로그램을 위 해서는 서버 사이드 언어가 활용된다. 구체적으로 살펴보면, 마크업 언어로 HTML, XML, SGML 등이 있으나 사 용이 간편한 HTML이 주로 사용되며, HTML5가 새로운 표준으로 제정되는 과정에 있다. 이와 더불어 웹 페이지의 스타일 지정을 위해 CSS가 활용되는 데, 기존 CSS2의 기능을 확장한 CSS3이 최근에 사용되고 있다. 한편 클라이 언트 사이드 언어로는 JavaScript가 주로 이용되며, 서버 사이드 언어로는 JSP, ASP, PHP 등이 있으나, JSP가 점점 더 많이 활용되는 추세이다. 서버의 데이터베이스 처리를 위해서는 SQL이 사용된다. 이 책은 웹 페이지 작성을 위한 HTML, HTML5, CSS3, 클라이언트 사이드 프로그래밍을 위한 JavaScript, 서버 사이드 프로그래밍을 위한 JSP, SQL에 대해서 다룬다. 이 책은 한 권으로 최신 기술을 활용한 웹 페이지 작성과 프 로그래밍이 가능하도록 각 부문별 대표적인 언어를 모두 포함하며, 이론과 실습을 겸비하도록 저술하였다. 따라서 초보 프로그래머라도 스스로 공부할 수 있으며, 대학의 웹 프로그래밍 또는 인터넷 프로그래밍 과목의 교재로 적 당하다고 판단한다. 머리말 3

4 웹 프로그래밍의 수요가 나날이 확대되는 시점에서 독자 여러분들 모두 이 책을 통해 훌륭한 웹 프로그래머로 성장하기를 바란다. 이 책이 나오기까 지 W3C의 표준과 관련 문서들이 큰 도움이 되었으므로 W3C에 감사를 표한 다. 그리고 예제의 실행 등에 도움을 준 동국대학교 컴퓨터공학과 데이터베 이스 연구실의 대학원생들에게 고마움을 전하며, 책의 제작 과정에서 적극 협력해주신 생능출판사 여러분에게 감사를 드린다. 2013년 2월 저자 일동 4 머리말

5 차 례 제1장 HTML 1.1 HTML 기초 HTML 개요 HTML 문서의 구조 HTML 기본 태그 기본 태그 문자 서식 태그 단락 서식 태그 목록 태그 연결 태그 이미지 삽입 이미지 태그 이미지 태그의 속성 이미지로 문서 연결 테이블 작성 테이블 기본 태그 테이블 서식 테이블 정렬 프레임 작성 프레임 정의 프레임 서식 타겟 프레임 설정 내부 프레임 생성 82 차례 5

6 1.6 폼 작성 폼 정의 폼 작성 예제 멀티미디어 활용 사운드 삽입 동영상 삽입 95 연습문제 99 참고문헌 111 제2장 CSS 2.1 CSS 기초 CSS 개요 스타일 유형 스타일 정의 방법 CSS 선택자 CSS3 선택자 CSS3 접두어 CSS3 미디어 질의 미디어 스타일 정의 미디어 질의 작성 미디어 질의 예제 CSS 속성 폰트 속성 차례

7 2.5.2 텍스트 속성 색과 배경 속성 위치 속성 목록 속성 박스 속성 테이블 속성 CSS3 변형 CSS3 전환 CSS3 애니메이션 216 부록 220 부록 1. Android Emulator 설치 방법 220 부록 2. Apache Tomcat 설치 방법 231 연습문제 232 참고문헌 247 제3장 JavaScript 3.1 JavaScript 기초 JavaScript 개요 JavaScript 기본 구조 JavaScript 기본 문법 자료형 및 변수 연산자 문장 함수 281 차례 7

8 3.3 객체 내장 객체 브라우저 객체 HTML DOM 객체 사용자 정의 객체 이벤트 레이어 활용 레이어 소개 레이어 활용 예제 332 연습문제 337 참고문헌 347 제4장 HTML5 4.1 HTML5 기초 HTML5 개요 HTML5 문서의 구조 HTML5 문서 작성 기본 태그 폼 작성 태그 미디어 태그 HTML5 그래픽 캔버스 태그 그래픽 메소드 차례

9 4.4 HTML5 API 드래그 앤 드롭 웹 스토리지 웹 워커 파일 API 지오로케이션 애플리케이션 캐시 서버 전송 이벤트 웹 소켓 HTML5 추가 및 제외 사항 484 부록 489 부록 1. JDK 설치 방법 489 부록 2. Apache Tomcat 설치 방법 489 연습문제 490 참고문헌 504 제5장 SQL 5.1 SQL 기초 관계형 데이터베이스 SQL MySQL 테이블 생성 create 문 drop 문 516 차례 9

10 5.3 데이터 조작 select 문 insert 문 update 문 delete 문 528 부록 530 부록 1. MySQL 설치 방법 530 연습문제 536 참고문헌 541 제6장 JSP 6.1 JSP 기초 JSP 개요 JSP 처리 방식 JSP 기본 요소 지시문 스크립팅 요소 액션 태그 내장 객체 간단한 예제 작성 JSP 기본 문법 기본 태그 자료형 및 변수 차례

11 6.3.3 연산자 문장 클래스 함수 예외 처리 JSP 내장 객체 request 객체 response 객체 out 객체 session 객체 application 객체 JSP와 데이터베이스 연동 JDBC를 이용한 데이터베이스 연동 데이터베이스 연동 예제 JSP 프로그래밍 예제 여론조사 게시판 617 부록 639 부록 1. JDK 설치 방법 639 부록 2. Apache Tomcat 설치 방법 647 부록 3. JDBC 설정 방법 650 연습문제 653 참고문헌 661 차례 11

12

13 Chapter 01 HTML 웹 프 로 그 래 밍 1.1 HTML 기초 1.2 HTML 기본 태그 1.3 이미지 삽입 1.4 테이블 작성 1.5 프레임 작성 1.6 폼 작성 1.7 멀티미디어 활용 연습문제 참고문헌

14

15 HTML Chapter HTML HTML의 기초에 대해서 살펴보고, HTML을 이용하여 웹 페이지를 작성하는 방법에 대하여 자세히 공부하도록 한다. 가장 기본적으로 사용되는 HTML 태그를 비롯하여, 프레임을 작성하는 방법과 폼을 만드는 방법을 익히고, 멀티미디어를 이용하는 방법도 배운다. 이 장에서는 HTML4.01 태그 위주로 공부한다. 1.1 HTML 기초 HTML의 개요에 대해 알아보고, 간단한 HTML 페이지를 작성하여 본다 HTML 개요 HTML은 하이퍼텍스트(hypertext)라는 문서 형식을 사용함으로써, 문서 내의 단어나 그림을 마우스로 클릭하여 그것과 연결된 새로운 문서로 이동하게 하는 하이퍼링크 (hyperlink) 기능을 제공하고 있으며, 텍스트 문서뿐만 아니라 사운드와 동영상 같은 멀 티미디어를 웹에서 활용할 수 있도록 한다. 또한 HTML은 하이퍼텍스트 문서를 쉽게 작성할 수 있도록 간단한 작성 방법을 제공한다. 그러나 HTML로 표현할 수 있는 문 서 형식에는 제한이 있으며 이러한 제약점을 해결하기 위하여 다양한 버전의 HTML이 등장하였다. HTML 파일은 일반 텍스트 문서와 같은 아스키(ASCII) 형식의 파일이며, 확장자는.html 혹은.htm이다. HTML HTML(HyperText Markup Language)은 웹에서 사용되는 하이퍼텍스트 문서(document) 또는 페이지(page)를 태그(tag)를 이용하여 작성하는 마크업(markup) 언어이다. HTML은 CERN(유럽 입자 물리 연구소)의 팀 버너스-리(Tim Berners-Lee)와 동료들에 의해 1990년 부터 사용되기 시작하였으며, 지속적인 표준화 과정을 거쳐 1999년에는 HTML4.01이 W3C(World Wide Web Consortium)에 의해 표준으로 채택되었다. HTML을 만든 것은 웹 에서 사용하는 문서의 표준 규격이 필요하였기 때문이며, 이를 위해 HTML은 새로운 언 15

16 웹 프로그래밍 어를 정의할 수 있는 SGML(Standard Generalized Markup Language)의 DTD(Document Type Definition) 형식을 이용하여 정의되었다. 따라서 HTML의 문법에 맞게 문서를 작 성한다면 사용하는 시스템에 관계없이 브라우저를 통하여 동일한 결과를 얻을 수 있게 되었다. HTML은 문서의 구조와 내용 및 스타일을 표현할 수 있다. 즉 문서의 제목과 단락 등을 비롯하여 글자의 크기와 모양 등을 지정할 수 있다. 이러한 문서 형식을 지정하 기 위해서 일종의 해석 기호인 태그(tag)를 이용하며, 태그들을 적절히 사용하여 효과 적인 웹 문서를 제작할 수가 있다. 또한 하이퍼텍스트 형식의 HTML은 하이퍼링크를 이용하여 웹 상의 다른 문서로 이동할 수 있는 방법을 제공한다. HTML은 최초 버전 1.0을 시작으로 버전 4.01까지 소개되었다. 하이퍼링크에 관한 규정을 담은 초기 HTML1.0을 비롯하여, HTML+, HTML2.0, HTML3.0, HTML3.2, HTML4.0, HTML4.01에 이르기까지 HTML은 빠른 속도로 발전하여 왔다. HTML2.0 HTML2.0은 이전까지 사용되던 HTML을 1995년 최초로 표준화하였다는데 의의가 있다. 태그를 이용하여 문서 구조를 정의하도록 하며, 제목, 문단, 목록, 및 폼(form) 작 성, 이미지 삽입, 하이퍼링크 등의 기능을 포함한다. HTML3.2 HTML3.2는 1997년 표준화되었으며 기존의 HTML2.0에 명시된 기능 외에도 테이블, 프레임(frame), 첨자 표현 등을 추가하였으며 나아가 자바 애플릿을 웹 문서에서 사용 할 수 있는 방법을 제공한다. HTML4.01 HTML4.01은 1997년 표준화된 HTML4.0의 오류를 수정하여 1999년 표준화되었으며, CSS(Cascading Style Sheet)를 이용하여 색상과 폰트, 레이아웃(layout) 등의 스타일을 지정할 수 있다. 그리고 기존 HTML3.2의 테이블 및 프레임 기능을 확장하였고, 국제 표준인 UCS(Universal Multiple-Octet Coded Character Set) 문자 셋을 채택하였다. 또한 점자와 음성합성을 지원하며, 오른쪽에서 왼쪽으로 쓰는 우횡서 문서를 작성할 수 있 도록 한다. 그 외에도 사운드와 동영상 같은 멀티미디어 요소를 웹 문서에 포함시킬 수 있을 뿐만 아니라, 스크립트 언어를 사용할 수 있는 기능을 제공한다. 16

17 HTML Chapter 01 HTML5 최근 웹의 진화로 인해 웹은 단순히 정보를 얻는 것에서 다양한 웹 애플리케이션을 실행하는 것으로 변화하고 있다. 기존의 HTML4.01은 이러한 기능을 구현하기 위해서 ActiveX나 플래시(flash) 같은 플러그인(plug-in) 형식의 프로그램을 따로 설치해야만 했 다. 이를 극복하기 위해서 웹 브라우저 제작자들이 WHATWG(Web Hypertext Application Technology Working Group)라는 모임을 만들어 웹 애플리케이션을 쉽게 구현할 수 있 는 새로운 HTML의 표준안을 만들기 시작하였다. 이후 W3C에서 이 모임을 흡수하여 본격적으로 HTML5 표준화 작업을 진행하고 있다. HTML5는 플러그인 프로그램의 설치 없이 동영상, 사운드, 그래픽 등 다양한 멀티미 디어 콘텐츠를 구현할 수 있도록 기능이 강화되었고, 웹 애플리케이션 개발에 도움을 줄 다양한 API를 제공하고 있다. 웹과 관련된 문서 표준 언어 웹 문서 작성과 관련 있는 표준 마크업 언어들인 SGML(Standard Generalized Markup Language), XML(eXtensible Markup Language), XHTML(eXtensible HyperText Markup Language)에 대하여 살펴본다. SGML 정보화 사회가 발전함에 따라 많은 사람들이 컴퓨터를 사용하게 되었으며, 문서 작 성에 워드프로세서와 같은 다양한 문서 작성 도구들을 사용하게 되었다. 따라서 여러 가지 종류의 컴퓨터 시스템과 다양한 문서 작성 도구들이 개발되었는데, 이러한 문서 작성 도구에서 제작된 문서들은 해당 시스템과 도구에서 실행시켜야만 하였다. 예를 들어 윈도우 시스템에서 작성한 글 파일을 매킨토시 시스템의 Microsoft-Word에서 실행시켰을 경우 정확한 결과를 기대할 수가 없기 때문이다. 이와 같이 다양한 시스템 과 프로그램에서 작성된 문서들이 서로 호환되지 않는다면 많은 불편을 초래하게 된 다. 따라서 전문가들은 서로 다른 종류의 컴퓨터나 프로그램들 사이의 문서 교환을 위 하여 연구를 하게 되었고, 그 결과 개발된 언어가 SGML이다. SGML은 국제 표준기구인 ISO(International Standard Organization)에 의해 1986년 표 준으로 채택되었다. SGML은 새로운 언어를 정의할 수 있는 메타언어(metalanguage)로 서 DTD(Document Type Definition)에 의해 문서의 유형을 정의할 수 있다. 즉 DTD를 이용하면 문서에서 사용할 수 있는 태그의 집합을 정의할 수 있으며, 정의된 태그들을 이용하여 문서를 작성할 수 있다. HTML은 SGML의 이러한 기능을 활용하여 DTD로 17

18 웹 프로그래밍 정의되었다. SGML은 문법이 복잡한 단점을 갖고 있으므로 현재 HTML만큼 많이 사용 되지는 않는다. XML 웹에서 사용되는 HTML은 편리하고 간단한 사용 방법을 갖고 있기 때문에 많은 사 용자들을 확보할 수가 있었다. 그러나 HTML은 사용자들이 미리 정의된 고정적인 태 그들만을 사용할 수 있도록 한다. 즉 사용자들은 새로운 태그들을 정의할 수가 없기 때문에, 특정 유형의 문서를 작성하기가 어렵다. 예를 들어 메모를 HTML 문서로 작성 하더라도 다른 문서와 똑같은 태그를 사용할 수밖에 없다. 그러나 메모 문서에 <memo>, <from>, <to>라는 태그를 사용할 수 있다면, 의미적으로 보다 효과적인 문서 작성이 가능해진다. 이러한 상황은 전문가들로 하여금 새로운 대안을 모색하도록 하는 계기가 되었고, 그 결과 1998년 W3C에서 새로운 웹 표준 언어인 XML을 발표하게 되었다. XML은 사용법이 복잡한 SGML의 단점과 표현력이 부족한 HTML의 단점을 극복하고 SGML 의 표현력과 HTML의 단순성 등 양자의 장점만을 취한 언어이다. 다시 말하면, 기존 SGML에서 자주 사용되지 않는 복잡한 부분을 제외하고 문서 작성에 필수적인 부분만 을 선택한 SGML의 부분집합이다. 따라서 XML은 메타언어로서 SGML처럼 사용자 자 신의 문서 유형을 정의할 수 있기 때문에 기존의 HTML에 비하여 무한한 확장성을 제 공한다. 현재 웹에서 문서 작성에는 대부분 HTML을 이용하고 있지만, 웹의 데이터 표 현 및 처리 분야에서는 XML의 이용이 크게 늘어나고 있다. XHTML HTML은 다른 언어를 정의할 수 있는 메타언어(metalanguage)인 SGML에 의해 정의 된 언어이다. XML이 표준화됨에 따라 HTML을 XML에 의해 다시 정의하려는 노력이 진행되었으며, 2000년에 XHTML1.0을 표준화하였다. HTML의 발전에 따라 XHTML의 표준화 작업이 계속되고 있으며, 2001년 XHTML1.1의 표준화에 이어 최근에는 HTML5에 맞추어 XHTML5의 표준화가 진행되고 있다. 웹 표준 기구 웹과 관련된 표준을 제정하는 국제기구가 W3C(World Wide Web Consortium)이다. 이 기구는 팀 버너스-리(Tim Berners-Lee)에 의해 1994년 설립되었으며, 앞에서 설명한 HTML, HTML5, XML, XHTML과 앞으로 배울 CSS, 그리고 이외에도 웹과 관련된 언어 18

19 HTML Chapter 01 들의 표준화 작업을 수행하여, 그 결과를 표준으로 발표하고 있다. W3C의 홈페이지 주소 는 W3C의 표준과 표준화 작업에 관련된 다양한 정보를 얻을 수 있다 HTML 문서의 구조 HTML은 태그(tag)를 이용하여 문서의 구성 요소(element)를 정의하는 언어이다. 본 절에서는 HTML 문서(페이지)의 기본 구조와 태그에 대하여 알아보고, 이것을 바탕으 로 간단한 HTML 문서를 작성해 본다 HTML 문서의 기본 구조 문서를 이루는 구성 요소를 정의하는 태그에 대하여 소개한다. HTML의 태그 앞에서 설명한 바와 같이 HTML은 마크업(markup) 언어이며, 마크업 언어란 태그를 이용하여 문서의 구성 요소를 정의하는 언어이다. 따라서 HTML 문서 작성에 필수적 인 요소는 태그라고 할 수 있다. HTML의 태그는 문서의 구조와 스타일을 표현하는 기호로, 브라우저에게 화면에 나타날 문서의 내용과 모양을 알려주게 된다. 태그는 < > 기호를 사용하여 표기한다. 태그를 작성하는데 있어서 알아야 할 몇 가지 규칙들을 살펴보자. 태그는 시작 태그와 종료 태그로 구성된다. 시작 태그 < > 가 있다면 종료 태그 </ > 가 나와야 한다. 단독으로 사용되는 태그 는 시작 태그와 종료 태그를 겸하게 된다. HTML 문서에서 사용되는 태그 형식은 두 가지이며, 다음과 같다. 태그의 형식 - <태그> 내용(content) </태그> - <태그> 태그의 예 - <title> 문서의 제목 </title> - <br> HTML의 시작 태그부터 종료 태그까지를 HTML 요소(element)라고 하고, 태그 사이 19

20 웹 프로그래밍 에 포함된 것을 내용(content)이라고 한다. 따라서 HTML 태그는 HTML 요소를 정의하 는 기호라고 할 수 있다. 앞의 형식에서 단독으로 사용되는 태그는 빈(empty) 내용을 갖게 된다. 한편, HTML 태그는 HTML 요소에 대한 추가 정보를 제공하는 하나 이상 의 속성과 함께 사용될 수 있다. 속성의 예는 곧 보게 된다. 태그를 중첩하여 사용할 수 있다. HTML에서는 태그를 중첩하여 사용할 수 있다. 이때는 먼저 사용한 태그가 나중에 사용한 태그를 포함하도록 종료 태그를 순서에 맞추어 사용하여야 한다. 그렇지 않을 경우, 정확한 결과를 브라우저에서 기대할 수가 없게 된다. 다음은 이를 설명하고 있다. 태그의 올바른 중첩 <center> <font size="2"> 올바른 태그 사용 </font> </center> 태그의 올바르지 못한 중첩 <center> <font size="2"> 잘못된 태그 사용 </center> </font> 앞의 예에서 <font> 태그는 속성을 갖고 있다. 즉, 속성 size의 값으로 2를 배정하 였다. 태그의 이름은 대소문자를 구별하지 않는다. HTML에서 사용되는 태그는 대소문자를 구별하지 않는다. 즉 <BR> 이나 <br>, 혹은 <TITLE>이나 <title>은 같은 태그로 인식하게 된다. 연이은 여러 개의 공백문자들은 하나로 출력된다. 브라우저에서 문서를 출력할 때, 시작 태그와 종료 태그 사이에 연이어 입력된 여러 개의 공백문자들은 하나를 제외하고 모두 무시하게 된다. 다음 예를 살펴보자. 여러 개의 공백문자 <p> 연이은 여러 개의 공백문자들 중 하나 외에는 무시된다. </p> 결과 연이은 여러 개의 공백문자들 중 하나 외에는 무시된다. 앞의 예에서 연이은 여러 개의 공백문자들은 브라우저에서 하나의 공백문자로 보여 주는 것을 알 수가 있으며, HTML 문서를 작성할 때 이 점을 유의해야 한다. 20

21 HTML Chapter 01 HTML 문서의 기본 구조 모든 HTML 문서는 머리(head)와 몸통(body)의 두 부분으로 구성된다. 다음은 HTML 문서의 기본 구조를 나타내고 있다. HTML 문서의 기본 구조 <html> 문서의 시작 <head> 문서의 머리 부분 <title> 문서의 제목 </title> 문서의 제목 <meta> 문서의 메타데이터 </head> <body> 문서의 몸통 부분 문서의 내용 </body> </html> 문서의 종료 HTML 문서 구조에서 <head> 태그의 머리 부분은 문서에 관한 여러 가지 정보를 요 약한 부분이고, 그 안의 <title> 태그는 문서의 제목을 나타낸다. <body> 태그의 몸통 부분은 문서의 내용을 포함한다. 또한 HTML 문서는 항상 <html> 시작 태그로 시작하 고 </html> 종료 태그로 마친다 HTML 문서 작성 앞에서 살펴본 HTML 문서의 기본 구조를 바탕으로 간단한 예제를 작성하여 보자. HTML 문서는 보통 메모장과 같은 텍스트 에디터를 사용하는 방법, 글이나 워드에 서 HTML 문서 변환 기능을 이용하는 방법, 또는 에디트플러스(EditPlus)와 같은 HTML 편집기를 활용하는 방법 등에 의해 작성될 수 있다. 여기서는 마이크로소프트 윈도우 시스템에서 기본으로 제공하고 있는 텍스트 에디터인 메모장을 이용하여 HTML 문서를 작성하고, 그 결과를 브라우저에서 확인하도록 한다. HTML 문서 작성 예제 앞에서 배운 HTML 태그들을 이용하여 간단한 문서를 작성해 보자. 다음 예제는 <head> 요소와 <body> 요소를 갖고 있으며, <head> 요소에는 <title> 요소가 포함되어 있다. 메모장을 사용하여 이 예제의 <html>부터 </html>까지 보이는 대로 입력하고, 저 장할 때 파일의 이름을 first-example.html로 지정한다. HTML 문서의 확장자는 보통.html 혹은.htm을 사용하며, 이 책에서는.html을 기본으로 사용하도록 한다. 21

22 웹 프로그래밍 방금 설명한 대로 메모장을 사용하여 HTML 문서를 작성하는 것을 [그림 1.1]에서 보여주고 있다. 예제 first-example.html <html> <head> <title> 간단한 HTML 문서 작성 예제 </title> </head> <body> HTML 문서는 머리와 몸통의 두 부분으로 구성되어 있으며, 이를 정의하기 위하여 몇 개의 기본적인 태그가 이용된다. 본 예제는 이러한 기본 태그를 사용하여 작성한 것이다 </body> </html> [그림 1.1] 메모장에서 HTML 문서 작성 HTML 문서를 브라우저에서 보기 앞에서 작성한 HTML 문서를 first-example.html이란 이름으로 저장한 후에 브라우저 에서 결과를 확인해 보자. 주로 사용되는 웹 브라우저는 인터넷 익스플로러(Internet Explorer), 구글 크롬(Chrome), 파이어폭스(Firefox), 오페라(Opera), 사파리(Safari) 등이 다. 기본적으로 first-example.html을 마우스로 더블 클릭하면 기본 브라우저로 설정된 브라우저에서 실행된 결과를 볼 수 있다. 컴퓨터에 여러 개의 브라우저가 설치되어 있 다면, [그림 1.2]처럼 first-example.html을 마우스 오른쪽 버튼으로 클릭하여 나타난 메 뉴 중 연결 프로그램 에 보이는 브라우저들에서 원하는 것을 선택하여 실행 결과를 확인할 수 있다. 다른 방법으로는 브라우저를 실행시킨 뒤 first-example.html 파일을 마 우스의 왼쪽 버튼으로 끌어다 브라우저 창에 놓아도 실행이 된다. [그림 1.3]은 인터넷 익스플로러와 구글 크롬에서 각각 first-example.html 문서를 실행한 결과이다. 22

23 HTML Chapter 01 [그림 1.2] 브라우저에서 HTML 문서 실행 익스플로러 크롬 [그림 1.3] 브라우저에서 실행한 결과 이 장에서는 앞으로 예제를 실행하기 위한 기본 브라우저로 인터넷 익스플로러를 사 용한다. 23

24 웹 프로그래밍 1.2 HTML 기본 태그 HTML 문서(페이지)를 작성하기 위해서는 다양한 태그들을 사용하여야 하며, 태그 사용을 위한 특정한 규칙들이 있다. 이 절에서는 HTML의 기본 태그, 문자 서식 태그, 단락 서식 태그, 목록 태그, 그리고 연결 태그에 대하여 알아본다 기본 태그 먼저 HTML의 기본적인 태그들에 대하여 공부하여 보자 문서 구조 태그 HTML 태그들 중에서 가장 기본적인 태그는 문서 구조를 정의하는 <html>, <head>, <title>, <meta>, <body>라고 할 수 있다. 이러한 태그들을 사용하여 간단한 HTML 문 서를 작성할 수 있다. 이미 HTML 문서의 기본 구조 부분에서 살펴보았지만, 여기서 HTML에서 사용되는 문 서 구조 태그들의 역할에 대하여 자세히 살펴보고, 실제 예제를 통하여 이해하도록 한다. HTML 문서의 구조를 정의하기 위한 기본 태그들은 다음과 같으며, 필수 태그로 표 시된 태그들은 문서에서 반드시 사용되어야 한다. <html> ~ </html> <head> ~ </head> <title> ~ </title> <meta> <body> ~ </body> : 문서의 시작과 끝 (필수 태그) : 문서 머리 부분의 시작과 끝 (필수 태그) : 문서 제목의 시작과 끝 (필수 태그) : 문서의 메타데이터 : 문서 몸통 부분의 시작과 끝 (필수 태그) HTML 태그들을 이용하여 HTML 요소들을 정의하며, <head> 요소는 <title> 요소와 <meta> 요소를 포함한다. 이러한 HTML 요소들의 포함 관계를 그림으로 나타내면 HTML 문서는 트리(tree)로 표현된다. HTML 문서 트리에서 부모 노드(node)를 부모 요 소(parent element)라고 하고, 자식 노드를 자식 요소(child element)라고 한다. 또한 조상 노드들은 조상 요소(ancestor element)들이 되며, 자손 노드들은 자손 요소(descendant element)들이 된다. 24

25 HTML Chapter 01 HTML의 표준 속성(standard attribute) HTML 태그들에서 공통적으로 사용할 수 있는 속성을 표준 속성이라고 하며, 이에는 핵심 속성(core attribute), 언어 속성(language attribute), 키보드 속성(keyboard attribute)이 있다. 이들을 정리하면 [표 1.1]과 같다. [표 1.1] HTML의 표준 속성 구분 속성 설명 비고 핵심 속성 title style class id 요소의 제목 요소의 스타일 요소의 클래스 이름 요소의 아이디 <base>, <head>, <html>, <meta>, <param>, <script>, <style>, <title> 태그는 사용 불가 언어 속성 lang dir 요소 내용의 자연 언어 (ko : 한국어, en-us : 미국어 등) 요소 내용의 진행 방향 (ltr : 좌 우, rtl : 우 좌) <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, <script> 태그는 사용 불가 키보드 속성 accesskey tabindex 단축키 요소의 탭(tab) 순서 <a>, <area>, <button>, <input>, <label>, <legend>, <textarea> 태그만 사용 <a>, <area>, <button>, <input>, <object>, <select>, <textarea> 태그만 사용 핵심 속성 중 style, class, id에 대해서는 앞으로 CSS 부분에서 상세히 설명한다. 그 리고 title 속성은 요소의 제목을 기술하는 데 사용된다. 사용 예는 다음과 같다. title="html의 표준 속성" 언어 속성에서 lang 속성은 요소에서 사용하는 자연 언어(natural language)를 기술하 는 것으로 한국어, 미국어 등을 표시할 수 있으며, dir 속성은 언어의 진행 방향을 표 시한다. 사용 예는 다음과 같다. lang="ko" dir="ltr" 언어 속성 lang의 속성값으로 사용할 수 있는 국제표준기구 ISO에서 정한 주요 언어 의 약어는 [표 1.2]와 같다. 25

26 웹 프로그래밍 [표 1.2] 주요 언어의 약어 언어 약어 언어 약어 언어 약어 한국어 ko 스페인어 es 산스크리트어 sa 영어 en 포르투갈어 pt 일본어 ja 프랑스어 fr 그리스어 el 러시아어 ru 독일어 de 태국어 th 중국어 zh 이탈리아어 it 베트남어 vi 라틴어 la <html> 태그 <html> 태그는 <html> 요소를 정의하며, <html> 요소는 문서 트리에서 루트 노드에 해당되는 루트 요소(root element)로 문서의 모든 HTML 요소들을 포함한다. 또한 <html> 태그는 브라우저에게 HTML 문서라는 것을 알려주는 역할을 한다. <html> 태 그는 다음과 같은 속성들을 사용할 수 있다. lang : 요소 내용의 자연 언어 dir : 요소 내용의 작성 방향 <head> 태그 <head> 태그는 HTML 문서의 머리 부분에 해당되는 <head> 요소를 정의한다. <head> 요소는 다음과 같은 태그들을 포함할 수 있다. <title> <meta> <link> <script> <noscript> <base> : 문서의 제목 : 문서의 메타데이터 : 링크 연결 : 스크립트 코드 : 스크립트가 지원되지 않는 브라우저를 위한 대체 요소 : 상대 url의 기준이 되는 절대 url <title> 태그와 <meta> 태그는 곧 설명한다. <link> 태그와 <script> 태그는 앞으로 공 부하게 되며, <noscript> 태그는 브라우저가 <script> 태그를 지원하지 않는 경우에 출 력할 내용을 포함시키기 위해 사용한다. <base> 태그는 문서 내에서 사용되는 모든 상 대 url들의 기준이 되는 절대 url을 다음과 같이 지정할 수 있다. 26

27 HTML Chapter 01 <base href=" 앞에서 사용된 href 속성에 대해서는 <link> 태그 부분에서 공부하게 된다. <title> 태 그에서도 <html> 태그에서 설명한 lang, dir 속성을 사용할 수 있다. <title> 태그 <title> 태그는 문서의 제목을 나타내며, <title> 요소의 내용은 브라우저가 문서를 실 행할 때 제목 표시줄(title bar)에 출력된다. <title> 태그에서도 lang, dir 속성을 사용할 수 있다. <meta> 태그 메타데이터(metadata)는 데이터에 관한 데이터, 즉 데이터에 대해서 설명하는 데이터 이다. <meta> 태그는 HTML 문서에 대하여 설명하는 메타데이터를 포함한다. <meta> 태그의 형식은 다음과 같다. 형 식 1 : <meta http-equiv = "속성값" content = "내용" > 형 식 2 : <meta name = "속성값" content = "내용" > http-equiv : HTTP 헤더 정보를 기술 name : 정보의 이름을 기술 content : 정보의 내용을 기술 <meta> 태그에서 주로 사용되는 속성은 http-equiv, name, content이며, 앞의 두 가지 형식 중의 하나를 선택하여 사용한다. http-equiv 속성은 주로 메타데이터인 HTTP 헤더 정보를 브라우저에게 제공하기 위 해 사용하며, 이 속성이 취할 수 있는 주요 속성값은 다음과 같다. 27

28 웹 프로그래밍 content-language : 문서의 자연 언어 date : 문서 작성 날짜 expires : 문서의 만료 날짜 last-modified : 문서의 마지막 수정 날짜 location : 페이지로 이동 set-cookie : 쿠키 생성 refresh : 문서를 다시 로드함 page-enter : 문서를 여는 순간 page-exit : 문서를 닫는 순간 revealtrans : 문서 전환 효과 설정 blendtrans : 점점 밝게 또는 점점 어둡게 부드럽게 전환되도록 설정 content-type : 표준 포맷인 MIME 타입을 기술 (text/html:html 타입, text/css:css 타입, text/plain:일반 텍스트 타입 등) 이 중에서 page-enter, page-exit, revealtrans, blendtrans는 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원함 http-equiv 속성의 주요 속성값의 사용 예는 다음과 같다. <meta http-equiv = "content-language" content="ko"> <meta http-equiv = "date" content="fri, 20 Jul :00:00 GMT"> <meta http-equiv = "expires" content="thu, 30 Aug :00:00 GMT"> <meta http-equiv = "last-modified" content="wed, 18 Jul :10:12 GMT"> <meta http-equiv = "location" content="url= <meta http-equiv = "set-cookie" content="wahcookie=mycontent; expires=fri, 24 Aug :00:00 GMT; path= <meta http-equiv = "refresh" content="500"> <meta http-equiv = "content-type" content="text/html; charset=utf-8"> name 속성에 사용할 수 있는 주요 속성값은 다음과 같다. abstract author copyright expires generator keywords name owner refresh reply-to revisit-after robots : 문서의 요약 : 문서 제작자 : 저작권 : 문서의 만료 날짜 : 문서 작성 도구 : 문서를 검색 엔진이 검색할 때 사용할 키워드 : 문서의 이름 : 문서의 소유자 : 문서를 다시 로드하거나 다른 페이지로 이동 : 메일 주소 및 작성자 이름 : 문서 수집 스파이더에게 재방문 정보 제공 : 검색 로봇에게 인덱싱 정보 제공 28

29 HTML Chapter 01 name 속성의 주요 속성값의 사용 예는 다음과 같다. <meta name="author" content="john"> <meta name="copyright" content="2012 wah.or.kr"> <meta name="expires" content="mon, 10 Dec :00:00 GMT"> <meta name="keywords" content="html, XML, HTML5"> <meta> 태그는 HTML 문서에 대해 다음과 같은 다양한 정보를 제공할 수 있다. 페이지 자동 이동 <meta http-equiv="refresh" content="5; url=mypage.html"> - 5초 후 mypage.html 페이지로 이동시킴 화면 전환 시 다양한 효과 제공 <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=23)"> - 문서를 여는 순간 23개 효과들 중에서 임의로 선택하여 3초 동안 화면이 전환됨 <meta http-equiv="page-exit" content="blendtrans(duration=0.5)"> - 문서를 닫는 순간 부드럽게 0.5초 동안 화면이 전환됨 duration = 시간 : 전환 시간(초) 지정 transition = 효과 번호 : 효과 번호는 0~23까지 총 24개가 있음 효과 번호 23은 0~22까지 23개의 효과 중에서 임의로 선택함 문자 셋(character set) 지정 <meta http-equiv="content-type" content="text/html; charset=euc-kr"> - 콘텐츠(문서) 타입은 html 문서, 문자 셋은 한글 완성형 코드(euc-kr)로 지정함 검색 엔진에서 HTML 문서를 검색하기 위해 사용할 키워드 제공 <meta name="keywords" content="html5, css3, javascript"> - 검색 엔진에서 html5, css3, javascript를 키워드로 사용하여 본 문서를 검색하도록 함 <meta name="author" content="kim"> - 홈페이지 제작자가 kim임을 알려줌 29

30 웹 프로그래밍 다음 예제는 기본적인 태그들 중 <meta> 태그를 주로 이용하여 간단한 HTML 문서 를 작성한 것이다. 예제 meta.html 1: <html> 2: <head> 3: <title> html 문서의 메타 태그 </title> 4: <meta http-equiv="refresh" content="1; url=meta-post.html"> 5: <meta http-equiv="page-exit" content="revealtrans(duration=1, transition=23)"> 6: <meta http-equiv="content-type" content="text/html; charset=euc-kr"> 7: <meta name="author" content="hong"> 8: </head> 9: <body> 10: <center> 11: <br> <b> 잠시 후 다른 페이지로 이동합니다. </b> 12: </center> 13: </body> 14: </html> 예제의 4행에서는 본 문서가 실행된 지 1초 후에 meta-post.html 파일로 이동함을 나 타내며, 5행에서는 문서를 닫는 순간 부드럽게 1초 동안 임의의 효과로 화면이 전환됨 을 표시한다. 6행은 문서 타입을 html 문서로 정의하고 문자 셋은 한글 완성형 코드 (euc-kr)로 지정하는 것이며, 7행은 제작자가 hong임을 알려준다. 예제에서 아직 설명하 지 않은 태그들을 일부 사용하였으나 이들에 대해서는 앞으로 자세히 배우게 될 것이다. 예제 meta-post.html <html> <head> <title> html 문서 </title> </head> <body> <center> <br> <b> 여러분! 만나서 반갑습니다. *^.^* </b> </center> </body> </html> 익스플로러에서 meta.html 파일을 실행하면, 자동으로 meta-post.html 파일로 이동한 다. 실행 결과는 [그림 1.4], [그림 1.5]와 같다. 30

31 HTML Chapter 01 [그림 1.4] <meta> 태그 예제 실행 결과 [그림 1.5] 새로 이동한 HTML 문서 <body> 태그 <body> 태그에서 사용할 수 있는 주요 속성들은 다음과 같다. class id style background = "이미지 파일의 url" bgcolor = "색상명 rgb 값" text = "색상명 rgb 값" link = "색상명 rgb 값" alink = "색상명 rgb 값" vlink = "색상명 rgb 값" topmargin = "픽셀 수" leftmargin = "픽셀 수" bgproperties = "fixed" scroll = "no" : 클래스 이름 지정 : 유일한 아이디 부여 : 스타일 지정 : 배경으로 사용될 이미지 파일의 url : 배경색 : 문자색 : 링크로 설정한 문자의 색 : 링크가 설정된 문자를 클릭할 때 변화되는 색 : 링크를 클릭한 후의 문자색 : 문서의 위쪽 여백 : 문서의 왼쪽 여백 : 배경 그림 고정 : 스크롤 바 비활성화 속성의 값은 앞에서와 같이 쌍따옴표 안에 기술하며, 수직 막대 기호( )는 선택을 표시한다. 즉, bgcolor 속성의 값으로는 색상명 또는 rgb 값을 사용할 수 있음을 나타낸다. 앞의 속성들 중에서 CSS 부분에서 다룰 class, id, style을 제외한 속성들은 HTML4.01에 서는 권장하지 않으나 호환성 차원에서 주요 브라우저들에서 지원한다. HTML4.01에서 31

32 웹 프로그래밍 이들을 권장하지 않은 이유는 문서의 스타일은 스타일 시트에서 정의하는 것이 바람직하 기 때문이며, 문서의 스타일 정의 방법에 대해서는 CSS 부분에서 자세히 공부한다. 색상을 지정하기 위해서는 일반적으로 색상표를 참고하여 색상을 선택한다. [표 1.3]은 웹 페이지 제작에 기본적으로 사용할 수 있는 색상들을 나타낸 것이며, 보다 세밀한 색상을 원 할 경우, 인터넷 검색 엔진을 이용하여 웹에서 제공되는 색상표를 찾아 사용하면 된다. [표 1.3] 자주 사용되는 색상 색상 색상명 rgb 값 갈색 brown #A52A2A 감색 navy # 검정색 black # 금색 gold #FFD700 노란색 yellow #FFFF00 밝은 녹색 lightgreen #90EE90 밝은 주황색 lightsalmon #FFA07A 밝은 파란색 lightblue #ADD8E6 밝은 회색 lightgray #D3D3D3 보라색 violet #EE82EE 분홍색 pink #FFC0CB 붉은색 red #FF0000 어두운 녹색 darkgreen # 어두운 붉은색 darkred #8B0000 어두운 파란색 darkblue #00008B 연두색 chartreuse #7FFF00 연보라색 orchid #DA70D6 올리브색 olive # 은색 silver #C0C0C0 자주색 purple # 주황색 salmon #FA8072 짙은 분홍색 magenta #FF00FF 초록색 green # 파란색 blue #0000FF 하늘색 aqua #00FFFF 흰색 white #FFFFFF 회색 gray #

33 HTML Chapter 01 다음 예는 기본적인 태그들을 이용하여 간단한 HTML 문서를 작성한 것이며, 익스 플로러에서 실행한 결과를 [그림 1.6]에서 보여주고 있다. 예제에서 일부 설명하지 않 은 태그들은 앞으로 공부하게 될 것이다. 예제 basic-tag.html <html> <head> <title> HTML 문서의 body 속성 정의 </title> </head> <body bgcolor="yellow"> <center> <br> 안녕하세요? <p> 바탕화면 색상을 노란색으로 지정하였습니다. </p> <!-- 바탕화면 색상 지정 --> </center> </body> </html> [그림 1.6] 기본 태그 예제 실행 결과 주석 태그 주석(comment)은 HTML 문서에 대한 부수적인 설명이 필요할 경우 사용하며, 주석 의 내용은 브라우저에서 나타나지 않는다. 주석 태그의 형식은 다음과 같으며, 앞의 예 제에서 <!-- 바탕화면 색상 지정 --> 부분이 그 예이다. 형 식 : <!-- 주석 내용 --> 제목 태그 제목 태그는 문서의 제목에 해당하는 문자열을 표시하게 된다. 제목의 크기는 h1부 터 h6까지의 6단계로 표현할 수 있으며, 1이 가장 크고 6이 가장 작다. 또한 align 속 성을 이용하여 제목 태그 안에 있는 문자열을 정렬할 수 있다. 33

34 웹 프로그래밍 형 식 : <hn align = "left right center justify"> ~ </hn> : n은 1부터 6까지의 숫자 align 속성은 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다. 이와 같은 문서의 스타일은 CSS를 사용해서도 지정할 수 있으며, 이에 대해서는 CSS 부분 에서 자세히 다룬다. 다음 예제는 다양한 제목의 크기와 정렬 방법을 보여주고 있으며 결과는 [그림 1.7] 에서 보는 바와 같다. 예제 hn.html <html> <head> <title> HTML 문서의 제목 부분 </title> </head> <body> <h1 align="left"> H1의 제목 크기 </h1> <h2 align="center"> H2의 제목 크기 </h2> <h3 align="right"> H3의 제목 크기 </h3> <h4 align="left"> H4의 제목 크기 </h4> <h5 align="center"> H5의 제목 크기 </h5> <h6 align="right"> H6의 제목 크기 </h6> </body> </html> [그림 1.7] 제목 크기와 정렬 방법 34

35 HTML Chapter 문자 서식 태그 문자의 서식을 정하는 태그에는 글자의 모양을 정하는 태그, 글자의 크기와 색을 정 하는 태그, 글꼴(글자체)을 정하는 태그 등이 있다. 문자의 모습을 결정하는 다양한 태 그들의 기능에 대해서 살펴보도록 하자 폰트 스타일 태그 폰트 스타일(font style) 태그는 문자의 크기나 모양을 조절하는 기능을 갖고 있다. 다음은 폰트 스타일을 정하기 위해 사용되는 태그들의 종류와 기능에 대하여 설 명하고 있다. <b> <i> <tt> <sup> <sub> <big> <small> <u> <s> 또는 <strike> : 굵은 문자(bold) : 이탤릭체(italic) : 타자기체(typewritertext) : 윗첨자(superscript) : 아래첨자(subscript) : 글자 크기를 현재 크기보다 크게 : 글자 크기를 현재 크기보다 작게 : 밑줄(underline) : 취소선(strike through) 이와 같은 폰트 스타일 태그를 이용하여 실제 예제를 작성하여 보자. 본 예제는 이 태그들을 사용하여 문자들의 모양을 변화시켜 본 것이다. 실행 결과는 [그림 1.8]과 같다. 예제 font.html <html> <head> <title> 폰트 스타일 태그 </title> </head> <body> <b>굵은체</b> <i>이탤릭체</i> <tt>타자기체</tt> <br><br> 현재에^위첨자 <br><br> 현재에_아래첨자 <br><br> 현재보다<big> 좀 더 크게 <big>더욱 더 크게</big> 하기 </big> <br><br> 지금보다<small> 좀 더 작게 <small>더욱 더 작게</small> 하기 </small> <br><br> <u>밑줄</u> <s>취소선</s> <strike>취소선</strike> <br><br> <b> <i>굵은 이탤릭체</i> </b> </body> </html> 35

36 웹 프로그래밍 [그림 1.8] 폰트 스타일 태그 활용 문자 크기 지정 문자의 크기를 조절하는 태그는 앞에서 살펴본 <hn> 태그 이외에 <font> 태그가 있 다. <hn> 태그는 문서의 제목 크기를 변경하는 경우에 주로 사용하고, 본문의 글자 크 기 조정은 <font> 태그를 사용한다. <font> 태그에서 변경할 수 있는 글씨의 크기는 1 부터 7까지의 7단계가 있으며, 1이 가장 작고 7이 가장 크다. <font> 태그는 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다. 형 식 : <font size = "n"> ~ </font> : n은 1부터 7까지의 숫자 <font> 태그는 상대적인 글씨 크기를 지정할 수도 있다. 기준 크기는 3이며 이보다 크게 할 때는 +n, 작게 할 때는 -n으로 크기를 변경하게 된다. 형 식 : <font size = "+n -n"> ~ </font> : 기준 3 다음 예제는 <font> 태그의 size 속성에 따른 문자의 크기 변화를 확인하기 위한 것 으로 실행 결과를 [그림 1.9]에서 보여주고 있다. 36

37 HTML Chapter 01 예제 font-size.html <html> <head> <title> HTML 문서의 글자 크기 </title> </head> <body> <font size="1"> FONT SIZE 1 </font> <font size="2"> FONT SIZE 2 </font> <font size="3"> FONT SIZE 3 </font> <font size="4"> FONT SIZE 4 </font> <br> <font size="5"> FONT SIZE 5 </font> <font size="6"> FONT SIZE 6 </font> <font size="7"> FONT SIZE 7 </font> <br> <font size="3"> FONT SIZE 3 </font> <font size="-2"> FONT SIZE 3에서 2단계 작아짐 </font> <br> <font size="3"> FONT SIZE 3 </font> <font size="+2"> FONT SIZE 3에서 2단계 커짐 </font> </body> </html> [그림 1.9] 글자 크기 조절 문자색 지정 <font> 태그는 문자의 크기뿐만 아니라, 문자의 색도 지정할 수 있다. 이 경우에는 color 속성을 사용하여 원하는 글자의 색을 지정한다. 형식은 다음과 같으며 color 속성 의 값으로 앞에서 배운 16진수로 표현되는 rgb 값을 지정하거나 직접 색 이름을 기술 한다. 형 식 : <font color = "색상명 rgb 값"> ~ </font> 다음은 color 속성과 색상명을 이용하여 문자의 색을 지정하는 예제이다. 이것의 실 행 결과는 [그림 1.10]과 같다. 37

38 웹 프로그래밍 예제 font-color.html <html> <head> <title> HTML 문서의 글자색 </title> </head> <body> <font color="blue"> BLUE </font> 파란색으로 표시 <br> <font color="red"> RED </font> 빨간색으로 표시 </body> </html> [그림 1.10] 글자색 지정 글꼴 지정 <font> 태그는 문자의 글꼴(글자체 또는 폰트)을 지정할 수가 있으며, 이 경우에는 face 속성을 사용한다. face 속성의 값으로 컴퓨터에 설치되어 있는 글꼴들 중에서 하 나를 지정하면 된다. 다음은 face 속성을 이용하여 문자의 글꼴을 변경하는 예제이며, 실행 결과는 [그림 1.11]과 같다. 형 식 : <font face = "글꼴"> ~ </font> 예제 font-face.html <html> </html> <head> <title> HTML 문서의 글꼴 </title> </head> <body> <font face="맑은 고딕"> 맑은 고딕 </font> <br><br> <font face="궁서체"> 궁서체 </font> <br><br> <font face="돋움체"> 돋움체 </font> <br><br> <font face="바탕체"> 바탕체 </font> <br><br> <font face="휴먼둥근헤드라인"> 휴먼둥근헤드라인 </font> </body> 38

39 HTML Chapter 01 [그림 1.11] 글꼴 지정 특수 문자 사용 HTML 문서에서도 특수 문자들을 사용할 수 있다. 예전에 특히 <, >, &, 와 같은 특수 문자들을 브라우저에 나타내기 위해서는 별도의 지정어를 사용해야 했다. 다음은 HTML 문서에서 특수 문자들을 표현하는 지정어들이다. < : < > : > & : & : " 공백 : 그러나 이제는 브라우저의 기능 향상으로 지정어를 사용하지 않고 바로 특수 문자를 사용하여도 된다. 다만, HTML 문서에 연속된 공백들을 삽입하기 위해서는 지정어 ( )를 사용해야 한다 단락 서식 태그 단락과 그것의 모양을 결정하는 여러 가지의 태그들이 있다. 단락 서식에 관련된 태 그들에 대하여 살펴보자 줄바꿈 태그 <br> 태그는 줄바꿈을 할 때 사용하며, 여러 행의 줄바꿈 시에는 원하는 만큼의 <br> 태그를 사용하면 된다. 39

40 웹 프로그래밍 형 식 : <br> 다음 예제는 <br> 태그를 사용하여 한 문장의 중간에서 줄을 바꾼 것으로 결과를 [그림 1.12]에서 확인할 수 있다. 예제 br.html <html> <head> <title> HTML 문서의 줄바꿈 </title> </head> <body> 줄바꿈 태그를 이용하면 <br> 줄이 바뀝니다. </body> </html> [그림 1.12] 줄바꿈 태그 활용 단락 태그 문단을 나누기 위해서는 <p> 태그를 사용하여야 한다. 앞에서 살펴본 <br> 태그를 사용하여 줄바꿈 효과를 얻을 수 있지만, <p> 태그는 <br> 태그와 달리 줄바꿈을 하고 한 줄을 더 띄운다. 즉, <br> 태그를 두 번 사용한 것과 같은 효과를 얻을 수 있다. 여 기서 주의해야 할 점은 <p> 태그는 여러 번 써도 한 번 사용한 것과 동일한 결과를 얻는다는 것이다. 형 식 : <p align = "left right center justify"> ~ </p> 다음 예제는 <p> 태그를 사용하여 단락을 구분한 경우와 <br> 태그를 사용한 경우 를 비교하기 위한 것이다. [그림 1.13]에서 <p> 태그와 <br> 태그의 차이를 확인하기 바란다. 40

41 HTML Chapter 01 예제 p.html <html> <head> <title> HTML 문서의 단락 태그 사용 </title> </head> <body> <p> 단락을 만듭니다. </p> <p> 단락 태그는 여러 번 써도 한 번 쓴 것과 같습니다. </p> <p></p> <p></p> 줄바꿈 태그를 한 번 쓰면 줄이 변경되고, <br> 줄바꿈 태그를 두 번 쓰면 <br><br> 단락 태그를 한 번 쓴 것과 같은 효과가 납니다. </body> </html> [그림 1.13] 단락 태그 활용 괘선 태그 선을 표시하기 위해서는 <hr> 태그를 사용한다. 즉, <hr> 태그는 브라우저 화면에 수평선을 나타내며, 속성을 통해 수평선의 모양을 결정할 수 있다. 형 식 : <hr [속 성]> <hr> 태그에는 다음과 같은 속성들이 있다. 이들은 HTML4.01에서는 권장하지 않으 나 주요 브라우저들은 지원한다. size = "픽셀 수" width = "픽셀 수 가로 폭에 대한 비율(%)" align = "left right center(기본)" color = "색상명 rgb 값" noshade : 수평선의 두께 : 수평선의 길이 : 수평선의 위치 : 수평선의 색 : 음영 효과 제거 41

42 웹 프로그래밍 다음 예제는 <hr> 태그의 속성들을 이용하여 다양한 수평선들을 작성한 것이며, 실 행 결과는 [그림 1.14]와 같다. 예제 hr.html <html> <head> <title> HTML 문서의 괘선 태그 사용 </title> </head> <body> 보통 두께 1 <hr> 수평선 두께 5 <hr size="5"> 길이 150픽셀 <hr width="150"> 길이 80% <hr width="80%"> 수평선 위치를 왼쪽으로 <hr align="left" width="30%"> 색이 빨간색 <hr color="red"> 음영 효과 제거 <hr noshade> </body> </html> [그림 1.14] 괘선 태그 활용 정렬 태그 텍스트나 이미지를 간단한 방법으로 정렬시킬 수가 있다. 여기에서는 가운데 정렬 방법과, 섹션을 정렬시키는 방법에 대하여 살펴보기로 한다. 가운데 정렬 <center> 태그는 텍스트 또는 이미지 등을 가운데로 정렬한다. 이 태그는 HTML4.01 에서는 권장하지 않으나 주요 브라우저들은 지원한다. 42

43 HTML Chapter 01 형 식 : <center> ~ </center> 섹션의 정렬 <div> 태그는 섹션(section) 또는 구역(division)을 정의한다. <div> 태그는 섹션의 왼 쪽, 오른쪽, 가운데 정렬을 위한 다음과 같은 속성을 포함하고 있다. 형 식 : <div align = "left right center justify"> ~ </div> 가운데 정렬을 하기 위한 <div align = "center"> 태그는 앞에서 설명한 <center> 태 그와 동일한 효과를 얻는다. align 속성은 HTML4.01에서는 권장하지 않으나 주요 브라 우저들은 지원한다. 다음 예제와 [그림 1.15]의 화면에서는 <center> 태그와 <div> 태그를 사용하여 텍스 트와 문단을 정렬하는 방법을 살펴볼 수 있다. 예제 align.html <html> <head> <title> HTML 문서의 정렬 태그 사용 </title> </head> <body> <div align="left"> 왼쪽 정렬 </div> <br><br> <div align="center"> 가운데 정렬 </div> <br><br> <center> 가운데 정렬 </center> <br><br> <div align="right"> 오른쪽 정렬 </div> </body> </html> [그림 1.15] 정렬 태그 활용 43

44 웹 프로그래밍 인용 태그 작문에서 다른 글에서 끌어다 쓰는 구절은 인용구로 표현하여야 한다. HTML 문서 에서는 <blockquote> 또는 <q> 태그를 사용하여 인용구를 표현할 수 있다. <blockquote> 태그는 비교적 긴 인용구에 이용하고, <q> 태그는 짧은 인용구에 사용 한다. 다음은 인용구에 대한 형식이다. 형 식 : <blockquote> ~ </blockquote> <q> ~ </q> 다음은 <blockquote> 태그를 사용한 예제로 결과는 [그림 1.16]과 같다. 예제 blockquote.html <html> <head> <title> HTML 문서의 인용 태그 </title> </head> <body> Wikipedia( 웹을 다음과 같이 정의한다. <blockquote> The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks. </blockquote> 웹 프로그래밍은 웹에서 사용되는 프로그램을 작성하는 것이다. </body> </html> [그림 1.16] <blockquote> 태그 활용 입력한 대로 보여주기 HTML 문서에서 텍스트를 입력한 대로 브라우저에 표현하기 위해서는 <pre> 태그를 44

45 HTML Chapter 01 사용한다. 이 태그를 이용하면 사용자가 연속해서 입력한 공백들도 그대로 브라우저에 출력된다. <pre> 태그의 형식은 다음과 같다. 형 식 : <pre> ~ </pre> 다음은 <pre> 태그를 사용한 예제로 결과는 [그림 1.17]과 같다. 예제 pre.html <html> <head> <title> HTML 문서의 pre 태그 </title> </head> <body> <pre> 문서의 공백을 그대로 출력합니다. <br><br> </pre> </body> </html> 다른 태그들은 본래대로 적용됩니다. [그림 1.17] <pre> 태그 활용 태그 그대로 보여주기 HTML 문서에서 태그까지도 그대로 브라우저에 표현하기 위해서는 <xmp> 태그를 사용한다. <xmp> 태그는 HTML 태그를 일반 텍스트로 취급하므로, 사용자가 입력한 공백뿐만 아니라 태그도 그대로 브라우저에 출력하게 된다. 웹 사이트의 HTML 강좌 에서 태그 설명을 해야 하는 경우에 사용하면 효과적이다. <xmp> 태그의 형식은 다음 과 같으며, HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다. 45

46 웹 프로그래밍 형 식 : <xmp> ~ </xmp> 다음은 <xmp> 태그를 사용한 예제로 결과는 [그림 1.18]과 같다. 예제 xmp.html <html> <head> <title> html 문서의 xmp 태그 </title> </head> <body> <xmp> </xmp> </body> </html> 화면에 보이는 그대로 출력합니다. <font color="red"> 태그도 그대로 출력합니다. </font> [그림 1.18] <xmp> 태그 활용 문자 움직이기 HTML 문서에서 텍스트나 그림을 설정된 방향과 시간에 맞추어 움직이기 위해서 <marquee> 태그를 사용한다. <marquee> 태그의 형식은 다음과 같다. 이 태그는 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다. 형 식 : <marquee> ~ </marquee> 46

47 HTML Chapter 01 <marquee> 태그에는 다음과 같은 속성들이 있다. width = "픽셀 수" : 스크롤 영역의 너비 height = "픽셀 수" : 스크롤 영역의 높이 direction = "up down left right" : 움직이는 방향 behavior = "scroll alternate slide" : 행동 방식 (움직이는 방향으로 사라짐 좌우 또는 상하로 왕복 스크롤 영역의 끝에 멈춤) scrollamount = "픽셀 수" : 스크롤 속도 scrolldelay = "수" : 스크롤과 스크롤 사이의 지연 시간 loop = "수" : 스크롤의 반복 횟수 bgcolor = "색상명 rgb 값" : 스크롤 영역의 배경색 다음은 <marquee> 태그를 사용한 예제로 결과는 [그림 1.19]와 같다. 예제 marquee.html <html> <head> <title> HTML 문서의 marquee 태그 </title> </head> <body> <p> <marquee width="500" height="10" direction="right" behavior="scroll" scrollamount="5" scrolldelay="50" loop="3" bgcolor="yellow"> 오른쪽 방향으로 3번 반복 후 사라집니다. </marquee> </p> <p> <marquee width="500" height="100" direction="down" behavior="alternate" scrollamount="5" scrolldelay="50" loop="10" bgcolor="pink"> 아래 방향으로 10번 왕복하다가 멈춥니다. </marquee> </p> <p> <marquee width="500" height="10" direction="left" behavior="slide" scrollamount="5" scrolldelay="50" loop="3" bgcolor="yellow"> 왼쪽 방향으로 3번 반복 후 멈춥니다. </marquee> </p> </body> </html> 47

48 웹 프로그래밍 [그림 1.19] <marquee> 태그 활용 목록 태그 시각적으로 짜임새 있는 문서를 만들기 위하여 목록 태그를 사용한다. 목록 태그는 다양한 종류의 목록 형식을 제공하고 있다. 목록을 만들기 위한 태그는 다음과 같다. <ul> : 순서 없는 리스트(unordered list) - <li> : 리스트 항목 <ol> : 순서 있는 리스트 (ordered list) - <li> : 리스트 항목 <dl> : 용어 리스트 (definition list) - <dt> : 용어 제목 - <dd> : 용어 설명 목록 태그와 속성들에 대해서 자세히 알아보기로 한다. 참고로 목록 태그의 속성들 은 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다 순서 없는 리스트 <ul> 태그는 순서 없이 나열되는 목록을 작성할 경우 사용된다. 이 경우 다음의 형 식처럼 항목별로 선두에 <li>를 붙이고, 검은 원, 흰 원, 사각 박스 세 종류의 마크를 type 속성에서 지정할 수 있다. 형 식 : <ul type = "disc(기본) circle square"> <li> 리스트 항목 </li> </ul> 48

49 HTML Chapter 01 다음은 순서 없는 리스트를 중첩하여 작성한 예제로, 그 결과는 [그림 1.20]에서 확 인할 수 있다. type을 따로 지정하지 않으면, 단계별로 검은 원, 흰 원, 사각 박스 모양 이 차례대로 표시된다. 예제 ul.html <html> <head><title> 순서 없는 리스트 </title></head> <body> <ul> <li> 대항목 </li> <ul> <li> 중항목 </li> <ul> <li> 소항목 </li> </ul> </ul> </ul> </body> </html> [그림 1.20] 순서 없는 리스트 순서 있는 리스트 <ol> 태그는 항목에 순서가 있는 목록을 생성한다. <ul> 태그와는 달리 항목에 번호 를 붙여 순서를 표현한다. 그 형식은 다음과 같다. 형 식 : <ol> <li> 리스트 항목 </li> </ol> <ol> 태그에는 다음과 같은 속성들이 있다. 49

50 웹 프로그래밍 type = "1(기본) A a I i" start = "수" : 목록 스타일 : 시작 번호 <li> 태그에는 다음과 같은 속성들이 있다. type = "1(기본) A a I i" value = "수" : 목록 타입 : 항목 번호 다음 예제는 <ol> 태그와 <li> 태그의 여러 속성들을 실제 사용하여 본 것이다. 실행 결과는 [그림 1.21]과 같으며, <ol> 태그와 <li> 태그 속성들의 효과를 확인할 수 있다. 예제 ol.html <html> <head> <title> 순서 있는 리스트 </title> </head> <body> <ol> <li> 대항목 </li> <ol type="a" start="3"> <li> 중항목 1 </li> <li> 중항목 2 </li> <ol type="i"> <li> 소항목 1 </li> <li value="10"> 소항목 2 </li> <li> 소항목 3 </li> </ol> <li> 중항목 3 </li> </ol> </ol> </body> </html> [그림 1.21] 순서 있는 리스트 50

51 HTML Chapter 용어 리스트 용어에 대한 정의나 설명을 할 때 이용한다. 용어 리스트에 대한 형식은 다음과 같다. 형 식 (용어 리스트) : <dl> <dt> 용어의 제목 </dt> <dd> 용어의 설명 </dd> </dl> 다음은 용어 리스트를 사용한 예제이며, 실행 결과는 [그림 1.22]에서 볼 수 있다. 예제 dl.html <html> <head> <title> 용어 리스트 </title> </head> <body> <dl> <dt> HTML </dt> <dd> HyperText Markup Language </dd> <dt> CSS </dt> <dd> Cascading Style Sheets </dd> </dl> </body> </html> [그림 1.22] 용어 리스트 연결 태그 HTML에서는 하이퍼링크(hyperlink) 기능을 이용하여, 인터넷 상의 다른 웹 사이트 혹은 자신의 웹 사이트에 있는 다른 페이지에 연결할 수가 있다. 이러한 링크 기능은 HTML의 주된 장점 중의 하나라고 할 수 있으며, 웹 상에서 마우스로 링크를 눌러 이 동하면서 사용자가 원하는 정보를 쉽게 얻을 수 있다. 51

52 웹 프로그래밍 형 식 : <a> 링크를 설정할 텍스트 </a> <a> 태그에는 다음과 같은 속성들이 있다. href = "url" name = "앵커" title = "설명" target = "프레임 이름 예약어" : 절대 url 또는 상대 url 또는 앵커 url : 앵커 설정 : 링크에 마우스를 가져가면 나타나는 설명 : 링크된 페이지를 나타낼 곳 앞의 속성 중 target에 대한 자세한 내용은 앞으로 프레임 작성 부분에서 소개한다. HTML에서 페이지를 링크로 연결하기 위해서 href의 속성값으로 url을 지정한다. url(uniform resource locator)은 인터넷 상에서 자원의 주소를 나타내며, 절대(absolute) url, 상대 (relative) url, 앵커(anchor) url 중에서 하나를 href의 속성값으로 사용한다. 절대 url은 인터넷 상에서 유일하며 일반적으로 url이라고 하면 절대 url을 의미하고, 인터넷 상의 어느 웹 사이트의 어떤 페이지라도 링크로 연결하는데 사용할 수 있다. 절대 url은 절대 경로(path)라고도 한다. 상대 url은 기준(default) url에 대한 상대적인 주소이며, 기준 url은 <base> 태그를 이용하여 설정할 수 있다. 기준 url이 설정되지 않으면 현재의 디렉토리(폴더)(즉./ )가 기준이 된다. 상대 url은 웹 사이트 내의 파일을 링크로 연결하 는데 사용한다. 상대 url은 상대 경로라고도 한다. 그리고 앵커 url은 HTML 페이지 내의 앵커(특정 위치)를 가리키므로 페이지 내에서의 링크 연결에 사용된다. 앞으로 이들을 이용한 링크 연결 방법에 대하여 자세히 살펴본다 같은 문서 내에서의 연결 앵커 url을 이용하여 같은 문서 내에서 이동할 곳을 링크로 연결한다. 이를 위해 <a> 태그를 사용하며, 그 결과 동일한 문서 내의 특정 위치인 앵커로 이동할 수 있게 된다. href 속성에 의해 설정된 링크는 보통 브라우저에서 밑줄로 표시되며 이 부분을 클릭 하면 name 속성에 의해 지정된 앵커 위치로 이동하게 된다. 이러한 방법은 html 문서 가 매우 길 경우에 사용하면 효과적이다. 앵커 설정 형식은 다음과 같다. 형 식 : <a href = "#앵커"> ~ </a> : 링크가 설정된 텍스트 <a name = "앵커"> ~ </a> : 문서 내 이동할 곳 다음 예제에서는 <a> 태그를 이용하여 같은 문서 내의 지정된 부분으로 이동하는 52

53 HTML Chapter 01 것을 보여주고 있다. 즉, href 속성에서 #앵커1 로 지정된 링크를 누르면 name 속성에 서 앵커1 로 설정된 곳으로 이동하게 된다. [그림 1.23]은 위쪽의 익스플로러 화면에 서 앵커1 링크를 눌렀을 때 문서 내에서 이동하는 것을 아래 화면에서 보여주고 있다. 예제 anchor.html <html> <head> <title> HTML 문서 내에서의 연결 </title> </head> <body> <a href="#앵커1"> 첫 번째 부분으로 이동 </a> <br> <a href="#앵커2"> 두 번째 부분으로 이동 </a> <br> <br><br> <hr> <a name="앵커1"> 이곳은 첫 번째 부분이다. </a> <br><br><br><br> <a name="앵커2"> 이곳은 두 번째 부분이다. </a> </body> </html> [그림 1.23] 앵커 활용 웹 상의 문서 연결 절대 url을 이용하여 다른 웹 사이트의 문서를 연결한다. 가장 일반적인 연결 방법으 로 <a> 태그에서 이동하고자 하는 곳의 절대 url을 지정하여 인터넷 상의 웹 문서로 이동할 수가 있다. 형식은 다음과 같으며, href 속성 부분에 이동하고자 하는 곳의 절 대 url을 지정한다. 절대 url은 자원에 접근하기 위한 프로토콜과 자원의 위치와 이름으 로 구성된다. 53

54 웹 프로그래밍 형 식 : <a href = "절대 url"> 링크가 설정된 텍스트 </a> 다음 예제는 절대 url을 통하여 외부 사이트의 특정 웹 페이지로 이동하는 것을 나 타내고 있으며, 그 결과는 [그림 1.24]에서 확인할 수 있다. 예제 url.html <html> <head> <title> url을 통한 링크 </title> </head> <body> <a href=" title="위키피디아">위키피디아 홈페이지로 이동</a> <br><br> <a href=" 한국어판 페이지로 이동</a> </body> </html> [그림 1.24] url을 이용한 문서 연결 54

55 HTML Chapter 웹 사이트 내의 문서 연결 상대 url을 이용하여 같은 웹 사이트 내의 문서를 연결한다. 이 때 이용되는 상대 url 의 예는 다음과 같다. href="mypage.html" - 홈 디렉토리의 mypage.html 파일 href="myfolder/friends.html" - 홈 디렉토리의 myfolder 디렉토리 내의 friends.html 파일 예에서 보는 것처럼 홈 디렉토리(폴더)에 존재하는 파일의 상대 url은 그대로 파일 이름이 되는 것을 알 수 있다. HTML에서 이와 같은 상대 url을 이용하여 같은 웹 사이트 내의 다른 문서로 이동 할 수 있다. 다음은 상대 url을 지정하는 형식이다. 형 식 : <a href = "상대 url"> 링크가 설정된 텍스트 </a> 메일 프로그램 연결 HTML 문서에서 주소를 기록하기 위해서 <address> 태그를 사용한다. 웹 페이지에서 전자우편( ) 서비스를 이용할 때는 <a> 태그를 사용한다. <a> 태그의 href 속성에 mailto 명령(command)을 이용하여 전자우편 주소를 지정하면, 브라우저에서 지정된 주 소로 편지를 보낼 수 있게 된다. 메일 프로그램을 연결하는 형식은 다음과 같다. 형 식 : <a href = "mailto:메일주소"> 메일 프로그램으로 링크가 설정되는 텍스트 </a> 다음은 <address> 태그와 <a> 태그를 함께 사용하는 예제이다. 예제 mailto.html <html> <head> <title> 주소 지정 </title> </head> <body> <center> <h3> 방문을 환영합니다! </h3> </center> <address> 작성자 : 김동일 <br> 메일은 <a href="mailto:[email protected]">[email protected]</a> 로 보내시면 됩니다. </address> </body> </html> 55

56 웹 프로그래밍 예제의 <a> 태그 내에서 mailto 명령을 이용하여 전자우편 주소를 지정한다. 예제의 실행 결과인 [그림 1.25]에서 링크가 설정된 을 누를 경우 [그 림 1.26]처럼 익스플로러에 기본으로 설정된 전자우편 프로그램을 통하여 편지를 작성 하여 보낼 수 있다. [그림 1.25] 주소 지정 태그 활용 [그림 1.26] 전자우편 주소를 클릭한 결과 1.3 이미지 삽입 HTML에서는 문서에 삽입된 이미지를 웹 브라우저에서 보여줄 수가 있다. 이 절에 서는 웹 문서에 이미지를 삽입하는 방법을 비롯하여 이미지를 다루는 방법에 대하여 살펴보도록 한다. 56

57 HTML Chapter 이미지 태그 HTML에서 이미지를 삽입하기 위해서는 <img> 태그를 사용한다. <img> 태그의 형 식은 다음과 같다. 형 식 : src : alt : <img src = "이미지 파일의 url" alt = "이미지 파일 설명"> 이 속성은 필수이고, 이미지 파일을 연결함 이미지에 마우스를 가져가면 파일에 대한 설명이 나타남 src 속성에서 url은 절대 url 또는 상대 url을 사용하며 이에 대한 설명은 연결 태그 부분을 참고하기 바란다. 다음 예제는 <img> 태그의 src 속성을 이용하여 이미지를 삽입하고 이에 대한 설명 을 추가한 것이다. 이 예제에서 이미지 파일은 fish.jpg이며, 상대 url을 사용하였다. 이 예제의 결과는 [그림 1.27]에서 확인할 수 있다. 예제 image.html <html> <head> <title> 이미지 삽입하기 </title> </head> <body> <center> <h2> 이미지 삽입 </h2> <img src="fish.jpg" alt="물고기입니다."> </center> </body> </html> [그림 1.27] 이미지를 삽입한 결과 57

58 웹 프로그래밍 이미지 태그의 속성 HTML에서는 이미지 삽입뿐만 아니라, 이미지를 세밀하게 제어하기 위한 다양한 속 성들을 제공하고 있다. 즉, 이미지를 삽입하려는 위치, 이미지의 크기, 여백 등을 조정 할 수가 있다. 이러한 이미지 관련 속성들은 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다. 이제 이미지 다루는 방법들에 대하여 살펴보도록 한다. 이미지와 문자의 정렬 HTML 문서에서 이미지와 텍스트를 함께 사용할 경우, 서로에 대한 정렬 방법을 선 택할 수 있다. 이때에는 align 속성을 사용하며, 이미지의 특정 위치에 텍스트를 어떻 게 위치시킬 것인가를 결정하게 된다. align 속성의 형식은 다음과 같다. align = "top" align = "middle" align = "bottom" align = "left" align = "right" : 이미지의 윗부분에 텍스트 출력 : 이미지의 가운데 부분에 텍스트 출력 : 이미지의 아랫부분에 텍스트 출력 : 이미지를 왼쪽에 위치시킴 : 이미지를 오른쪽에 위치시킴 다음 예제에서는 align 속성을 통하여 이미지와 텍스트를 [그림 1.28]처럼 상하로 정 렬하는 방법을 보여주고 있다. 예제 image-align-tmb.html <html> <head> <title> 이미지와 문자의 위치 </title> </head> <body> <p> <img src="fish.jpg" align="top"> 이미지의 위쪽 </p> <p> <img src="fish.jpg" align="middle"> 이미지의 가운데 </p> <p> <img src="fish.jpg" align="bottom"> 이미지의 아래쪽 </p> </body> </html> [그림 1.28] 이미지와 텍스트를 상하로 정렬 58

59 HTML Chapter 01 다음 예제는 이미지와 텍스트를 좌우로 정렬하는 것으로 결과는 [그림 1.29]와 같다. 예제 image-align-lr.html <html> <head> <title> 이미지와 텍스트의 위치 </title> </head> <body> <img src="fish.jpg" align="left"> 이미지는 왼쪽 <br> 텍스트는 오른쪽 <br><br><br><br> <img src="fish.jpg" align="right"> 이미지는 오른쪽 <br> 텍스트는 왼쪽 </body> </html> [그림 1.29] 이미지와 텍스트를 좌우로 정렬 이미지의 크기 조절 삽입한 이미지의 크기는 width와 height 속성을 이용하여 조절한다. 이때에 이미지 크기는 픽셀 수 또는 브라우저의 너비나 높이에 대한 비율(%)로 지정하며, 그 형식은 다음과 같다. 형 식 : <img src = "이미지 파일의 url" width = "픽셀 수 비율(%)" height = "픽셀 수 비율(%)"> width height : 이미지의 가로 크기 : 이미지의 세로 크기 이미지의 여백 조절 삽입한 이미지의 여백은 vspace 속성과 hspace 속성을 통하여 크기를 조절할 수 있 으며, 형식은 다음과 같다. 59

60 웹 프로그래밍 형 식 : <img src = "이미지 파일의 url" vspace = "픽셀 수 비율(%)" hspace = "픽셀 수 비율(%)"> vspace hspace : 이미지 상하의 여백 : 이미지 좌우의 여백 다음 예제에서는 [그림 1.30]과 같이 이미지의 상하와 좌우에 여백을 지정한 것을 보 여주고 있다. 예제 image-space.html <html> <head> <title> 이미지의 여백 주기 </title> </head> <body> 이미지의 상하에 <br> <img src="fish.jpg" border="1" vspace="50" align="left"> 여백을 <br> 50픽셀 주었다. <br><br><br><br><br><br><br><br><br><br><br><br> 이미지의 좌우에 <br> <img src="fish.jpg" border="1" hspace="50" align="left"> 여백을 <br> 50픽셀 주었다. </body> </html> [그림 1.30] 이미지의 여백 주기 여기서 border 속성은 이미지의 테두리를 나타내므로 이미지의 여백 크기를 확인하 기 위해서 사용하였다. 60

61 HTML Chapter 이미지로 문서 연결 앞에서도 살펴보았듯이 HTML에서는 하이퍼링크 기능을 통하여 문서 내부의 특정 위치나 외부의 문서로 이동하게 된다. HTML에서는 텍스트를 통한 링크 방법 이외에 도, 이미지를 이용하여 링크를 설정할 수가 있다. 다음은 이미지를 통하여 링크를 설정 하는 형식이다. border 속성은 테두리 선의 굵기를 픽셀 수로 지정하는 것으로, 이를 0 으로 설정하면 테두리 선이 보이지 않는다. 형 식 : <a href = "링크할 파일의 url"> <img src = "이미지 파일의 url" [border = "픽셀 수"]> </a> 다음 예제에서는 [그림 1.31]과 같이 이미지로 문서를 연결하는 방법을 보여주고 있다. 예제 image-link.html <html> <head> <title> 이미지로 문서 연결하기 </title> </head> <body> <center> <h2> 이미지로 문서 연결하기 </h2> <p> 물고기 그림을 누르면 해당 페이지로 이동합니다. </p> <a href="image-link-result.html"> <img src="fish.jpg" border="5" alt="물고기입니다."> </a> </center> </body> </html> 예제 image-link-result.html <html> <head> <title> 이미지로 연결된 문서 </title> </head> <body> <center> <h2> 이미지로 연결된 문서 </h2> 물고기 그림을 눌러서 이동한 페이지입니다. </center> </body> </html> 61

62 웹 프로그래밍 [그림 1.31] 이미지로 문서 연결 1.4 테이블 작성 테이블은 정보를 이차원적으로 표현하기 위하여 사용된다. 웹 문서에서도 테이블을 이용하여 정보를 효과적으로 전달하는 경우가 많다. 본 절에서는 테이블에 관한 기본 적인 내용과 함께 테이블을 세밀하게 제어하기 위한 방법들에 대해서 살펴보자 테이블 기본 태그 테이블을 작성하기 위한 기본적인 태그의 종류와 기능은 다음과 같다. <table> <tr> <td> <th> <caption> : 테이블 생성 : table row, 하나의 행 생성 : table data, 하나의 셀 생성 : table header, 제목으로 표시되는 셀 생성 : 테이블의 제목 테이블 선언 태그 <table> 태그는 테이블을 생성하기 위하여 사용하는 태그로, 반드시 종료 태그 </table> 62

63 HTML Chapter 01 을 함께 사용하여야 한다. 형 식 : <table> ~ </table> <td> 태그는 셀의 데이터를 지정하기 때문에, 데이터를 세밀하게 제어하기 위한 여 러 가지 속성들을 제공하고 있다. <td> 태그에서 사용하는 속성들은 다음과 같다. <td align = "left(기본) right center justify char"> : 셀의 데이터에 대한 좌우 정렬 방법 <td valign = "top middle bottom baseline"> : 셀의 데이터에 대한 상하 정렬 방법 <td rowspan = "수"> : 행의 셀들을 합침 <td colspan = "수"> : 열의 셀들을 합침 <td width = "픽셀 수 비율(%)"> : 셀의 너비 (픽셀 수) <td height = "픽셀 수 비율(%)"> : 셀의 높이 (픽셀 수) <td bgcolor = "색상명 rgb 값"> : 셀의 배경 색상 속성들 중 width, height, bgcolor는 HTML4.01에서 권장하지 않으나 주요 브라우저들 은 지원한다. 먼저 간단한 테이블을 작성하여 보자. 다음의 예제에서는 테이블을 작성하기 위한 <table> 태그를 비롯하여, 테이블의 행을 표현하는 <tr> 태그와 행을 구성하는 셀을 만 드는 <td> 태그를 살펴볼 수 있다. 예제의 실행 결과 [그림 1.32]와 같이 2행 1열의 테이블이 생성된다. 테이블의 모양 을 확인하기 위해서 border 속성을 이용하여 테이블의 테두리를 표시하였다. 예제 table-row.html <html> <head> <title> 테이블 </title> </head> <body> <center> <br> <table border="1"> <tr> <td>첫 번째 셀</td> </tr> <tr> <td>두 번째 셀</td> </tr> </table> </center> </body> </html> 63

64 웹 프로그래밍 [그림 1.32] 테이블의 행 다음 예제는 앞의 예제의 테이블에 <td> 태그를 이용하여 하나의 열을 추가한 것으 로 결과는 [그림 1.33]과 같다. 예제 table-column.html <html> <head> <title> 테이블 </title> </head> <body> <center> <br> <table border="1"> <tr> <td>첫 번째 셀</td> <td>두 번째 셀</td> </tr> <tr> <td>세 번째 셀</td> <td>네 번째 셀</td> </tr> </table> </center> </body> </html> [그림 1.33] 테이블의 열 64

65 HTML Chapter 01 테이블 제목 태그 테이블의 제목은 <caption> 태그를 사용하여 작성한다. 또한 테이블의 제목을 align 속성을 이용하여 정렬할 수 있다. align 속성은 주요 브라우저들은 지원하지만 HTML4.01에서는 권장하지 않는다. 다음은 <caption> 태그의 형식이다. 형 식 : <caption align = "left right top(기본) bottom"> 테이블의 제목 </caption> 다음 예제는 <caption> 태그를 이용하여 테이블 상단에 제목을 표시한 것이며, 결과 는 [그림 1.34]와 같다. 예제 table-caption.html <html> <head> <title> 테이블 </title> </head> <body> <center> <br> <table border="1"> <caption align="top"> 테이블 작성 </caption> <tr> <td>첫 번째 셀</td> <td>두 번째 셀</td> </tr> <tr> <td>세 번째 셀</td> <td>네 번째 셀</td> </tr> </table> </center> </body> </html> [그림 1.34] 테이블의 제목 65

66 웹 프로그래밍 셀 합치기 태그 테이블의 셀을 가로 또는 세로로 확장시켜 셀들이 합쳐진 효과를 거둘 수가 있다. 이때에는 <td>나 <th> 태그의 rowspan이나 colspan 속성을 이용한다. 세로로 셀을 합치 는 방법과 가로로 셀을 합치는 방법에 대하여 살펴보자. 세로로 셀 합치기 테이블의 한 열의 셀들을 합치기 위한 것으로, 세로로 여러 개의 행들을 하나의 셀 로 합치게 된다. 즉 rowspan = "3" 이라 지정하면 세로 방향으로 세 개의 셀을 합쳐 하나의 셀을 만든다. 다음의 형식에서 <th> 태그는 <td>와 같은 역할을 수행하지만, <th> 태그에서는 수평과 수직 정렬이 가운데로 자동으로 설정되며, 폰트 또한 굵은 글 씨체로 지정된다. 형 식 : <td rowspan = "n"> ~ </td> : n은 합칠 셀의 수 <th rowspan = "n"> ~ </th> : n은 합칠 셀의 수 가로로 셀 합치기 테이블의 한 행에서 셀들을 합치기 위한 것으로, 여러 개의 셀들을 가로로 합쳐 하 나의 셀로 만든다. 형식은 다음과 같다. 형 식 : <td colspan = "n"> ~ </td> : n은 합칠 셀의 수 <th colspan = "n"> ~ </th> : n은 합칠 셀의 수 다음 예제를 통하여 셀들을 합치는 방법을 살펴보자. 첫 번째 테이블은 rowspan을 통하여 세로로 두 개의 셀들을 합친 것이며, 두 번째 테이블은 colspan을 통하여 가로 로 2개의 셀들을 합친 것이다. [그림 1.35]에서 그 결과를 보여주고 있다. 66

67 HTML Chapter 01 예제 table-span.html <html> <head> <title> 테이블 </title> </head> <body> <center> <br> <table border="1"> <tr> <th rowspan="2">수도</th> <th>한국</th> <th>영국</th> </tr> <tr> <td>서울</td> <td>런던</td> </tr> </table> <br><br> <table border="1"> <tr> <th colspan="2">수도</th> </tr> <tr> <th>한국</th> <th>영국</th> </tr> <tr> <td>서울</td> <td>런던</td> </tr> </table> </center> </body> </html> [그림 1.35] 테이블의 셀 합치기 67

68 웹 프로그래밍 테이블 서식 테이블을 보기 좋게 꾸미기 위한 스타일 지정 방법에 대하여 공부하여 보자. 테이블의 외곽선 지정 테이블에서도 테두리를 표시하고 그 굵기를 다음의 형식에 따라 지정할 수가 있다. 이때에는 픽셀 수 크기의 테두리 선을 만들게 되며, 픽셀 수의 값이 클수록 테두리 선 은 굵게 된다. 이를 0 으로 설정하면 테두리 선이 보이지 않는다. 형 식 : <table border = "픽셀 수"> ~ </table> 다음 예제는 테이블의 border 속성을 이용하여 테두리 굵기를 여러 가지로 변경한 것으로, 그 결과는 [그림 1.36]과 같다. 예제 table-border.html <html> <head> <title> 테이블 </title> </head> <body> <center> <br> <table border="5"> <tr> <td>테두리 선의 두께 : 5</td> </tr> </table> <br><br> <table border="10"> <tr> <td>테두리 선의 두께 : 10</td> </tr> </table> <br><br> <table border="15"> <tr> <td>테두리 선의 두께 : 15</td> </tr> </table> </center> </body> </html> [그림 1.36] 테이블의 두께 조절 68

69 HTML Chapter 01 테이블의 크기 조절 테이블의 크기를 조절하기 위해서는 <table> 태그의 width(너비)와 height(높이) 속성 을 이용한다. 이 경우에는 세밀한 제어를 위하여 픽셀 단위의 크기 또는 브라우저 크 기에 대한 비율을 사용하게 된다. 테이블의 너비 조절 테이블의 너비를 조절하기 위하여, width 속성의 값을 픽셀 수로 설정한다. 이외에도 너비를 비율(%)로 지정하면 브라우저의 너비에 대한 상대적 비율로 설정된다. 형 식 : <table width = "픽셀 수 너비에 대한 비율(%)"> ~ </table> 테이블의 높이 조절 height 속성의 값을 픽셀 수로 지정하거나 브라우저의 높이에 대한 상대적 비율(%) 로 지정할 수 있다. 형 식 : <table height = "픽셀 수 높이에 대한 비율(%)"> ~ </table> 다음 예제의 첫 번째 테이블은 너비를 100%로 설정하였고, 두 번째 테이블은 높이 를 150픽셀로 지정하였다. [그림 1.37]의 결과를 살펴보도록 하자. 예제 table-size.html <html> <head> <title> 테이블 </title> </head> <body> <center><br> <table border="1" width="100%"> <tr> <th width="33%">한국</th> <th width="33%">미국</th> <th width="33%">영국</th> </tr> <tr> <td>서울</td> <td>워싱턴 D.C.</td> <td>런던</td> 69

70 웹 프로그래밍 </tr> </table> <br><br> <table border="1" height="150"> <tr> <th width="33%">한국</th> <th width="33%">미국</th> <th width="33%">영국</th> </tr> <tr> <td>서울</td> <td>워싱턴 D.C.</td> <td>런던</td> </tr> </table> </center> </body> </html> [그림 1.37] 테이블의 크기 조절 셀 간격과 여백 조절 테이블의 cellspacing 속성을 이용하여 셀과 셀 사이의 간격을 조절하고, cellpadding 속성을 이용하여 셀 경계와 셀 내부 텍스트 사이의 여백을 조절할 수 있다. 셀의 간격 과 여백을 조절하기 위한 형식은 다음과 같다. 70

71 HTML Chapter 01 형 식 : <table cellspacing = "픽셀 수"> : 셀과 셀 사이의 간격 <table cellpadding = "픽셀 수"> : 셀 내부의 여백 다음 예제는 셀과 셀 사이의 간격과 셀 내부의 여백을 조절한 것으로, 그 결과는 [그림 1.38]에서 확인할 수가 있다. 예제 table-space.html <html> <head> <title> 테이블의 여백 </title> </head> <body> <center> <br> <table border="1" cellspacing="10"> <tr> <td>첫 번째 셀</td> <td>두 번째 셀</td> </tr> </table> <br><br> <table border="1" cellpadding="10"> <tr> <td>첫 번째 셀</td> <td>두 번째 셀</td> </tr> </table> </center> </body> </html> [그림 1.38] 테이블의 여백 조절 테이블의 색 지정 테이블에서도 색을 지정할 수 있다. 테이블에서의 색 지정은 <table>, <td>, <tr> 태 71

72 웹 프로그래밍 그에서 각각 bgcolor 속성을 이용해서 하며, 형식은 다음과 같다. 참고로 bgcolor 속성 은 주요 브라우저에서는 지원하나 HTML4.01에서는 권장하지 않는다. 형 식 : <table bgcolor = "색상명 rgb 값"> ~ </table> <tr bgcolor = "색상명 rgb 값"> ~ </tr> <td bgcolor = "색상명 rgb 값"> ~ </td> 테이블 정렬 테이블의 정렬을 위해서는 다른 태그에서의 정렬 방법과 마찬가지로 align 속성을 이 용한다. align 속성은 HTML4.01에서는 권장하지 않으나 주요 브라우저들은 지원한다. 테이블 정렬을 위한 방법을 살펴보자. 테이블의 정렬 작성한 테이블을 원하는 곳에 배치하기 위해서 align 속성을 이용한 정렬 방법이 사 용된다. 다음은 테이블을 정렬하기 위한 형식이다. 형 식 : <table align = "left right center"> ~ </table> 다음 예제는 테이블을 정렬한 것이며 그 결과는 [그림 1.39]에서 확인할 수 있다. 예제 table-align.html <html> <head> <title> 테이블 </title> </head> <body> <br> <table align="left" border="1"> <tr> <td>첫 번째 테이블</td> </tr> <tr> <td>왼쪽 정렬</td> </tr> </table> <table align="right" border="1"> <tr> <td>두 번째 테이블</td> </tr> <tr> <td>오른쪽 정렬</td> </tr> </table> <table align="center" border="1"> <tr> <td>세 번째 테이블</td> </tr> <tr> <td>가운데 정렬</td> </tr> </table> </body> </html> 72

73 HTML Chapter 01 [그림 1.39] 테이블 정렬 셀 내부의 텍스트 정렬 테이블의 셀 내부에 위치한 텍스트를 상하 또는 좌우로 정렬할 수 있다. 셀 내부의 텍스트를 정렬하는 방법은 다음과 같다. 형 식 (좌우 정렬) : <tr align = "left(기본) right center justify char"> ~ </tr> <td align = "left(기본) right center justify char"> ~ </td> <th align = "left right center(기본) justify char"> ~ </th> 형 식 (상하 정렬) : <tr valign = "top middle bottom baseline"> ~ </tr> <td valign = "top middle bottom baseline"> ~ </td> <th valign = "top middle bottom baseline"> ~ </th> 1.5 프레임 작성 웹 사이트를 방문하다 보면 프레임을 이용하여 웹 페이지를 구성한 경우를 흔히 볼 수 있다. 프레임은 브라우저의 화면을 여러 개로 분할할 수 있는 기능을 제공한다. 이 러한 기능을 이용하여 각 프레임마다 특정 역할을 수행하는 페이지를 작성함으로써 효 과적인 웹 사이트의 제작이 가능해진다 프레임 정의 프레임의 기본 구조는 다음과 같다. 먼저 <frameset> 태그는 프레임을 사용하기 위한 선언이며, <frame> 태그는 실제로 프레임을 정의하는 기능을 담당한다. 73

74 웹 프로그래밍 <html> <head> <title> 프레임의 기본 구조 </title> </head> <frameset> <frame> <frame> </frameset> </html> 프레임을 정의하기 위한 태그들을 자세히 살펴보자. <frameset> 태그는 프레임을 선 언하는 동시에 프레임의 수와 크기를 설정하는 기능을 갖고 있다. 또한 가로 분할 (rows), 세로 분할(cols)의 기능을 제공하고 있으며, <frame> 태그의 src 속성을 통하여 프레임에 표시할 HTML 문서를 지정하게 된다. 프레임의 기본 형식은 다음과 같다. 형 식 : <frameset rows 또는 cols = "프레임 수와 크기"> <frame src = "프레임에 표시할 파일의 url"> </frameset> 프레임의 크기를 설정하는 방법은 다음과 같다. 픽셀 수로 설정 브라우저의 크기에 대한 비율(%)로 설정 나머지 전부를 *로 설정 가로 분할 프레임을 이용하여 화면을 가로로 분할하여 보자. 다음 예제는 rows 속성을 이용하여 화면을 가로로 세 개의 창으로 분할하며, 크기는 각각 전체의 30%, 50%, 20%의 비율로 설정하였다. 결과는 [그림 1.40]과 같다. 여기서 frame1.html과 frame2.html, 그리고 frame3.html 은 각각 프레임 1, 프레임 2, 프레임 3이라는 간단한 텍스트를 출력하는 것이다. 예제 frame-rows.html <html> <head> <title> 가로 분할 </title> </head> <frameset rows="30%, 50%, 20%"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </html> 74

75 HTML Chapter 01 예제 frame1.html <html> <head> <title> 프레임 예제 </title> </head> <body> <center> <h2> 프레임 1 </h2> <center> </body> </html> 예제 frame2.html <html> <head> <title> 프레임 예제 </title> </head> <body> <center> <h2> 프레임 2 </h2> <center> </body> </html> 예제 frame3.html <html> <head> <title> 프레임 예제 </title> </head> <body> <center> <h2> 프레임 3 </h2> <center> </body> </html> [그림 1.40] 가로 분할 프레임 75

76 웹 프로그래밍 세로 분할 <frameset> 태그의 속성 cols를 이용하여 화면을 세로로 분할할 수 있다. 다음 예제 에서는 화면을 세로로 두 개로 분할하며 크기를 각각 300픽셀과 500픽셀로 설정하고 있다. 그리고 좌측에는 frame1.html을, 우측에는 frame2.html을 출력하고 있으며, 실행 결과는 [그림 1.41]과 같다. 예제 frame-cols.html <html> <head> <title> 세로 분할 </title> </head> <frameset cols="300, 500"> <frame src="frame1.html"> <frame src="frame2.html"> </frameset> </html> [그림 1.41] 세로 분할 프레임 가로와 세로 복합 분할 앞에서 살펴본 가로, 세로 분할 방법을 함께 이용하여 한 화면을 복합적으로 여러 프레임으로 분할할 수가 있다. 이 경우에는 frameset의 cols와 rows 속성을 함께 사용한 다. 다음 예제에서는 먼저 cols 속성을 이용하여 세로 분할된 두 개의 프레임을 생성하 고, 다음으로 rows 속성을 사용하여 오른쪽 프레임을 두 개로 가로 분할한 것이다. 처 음 세로 분할할 때 프레임 두 개의 크기를 각각 150픽셀과 *(화면의 나머지 전부)로 설정하였으며, 다음 가로 분할할 때는 똑같은 크기로 설정하였다. 결과는 [그림 1.42]에 서 보는 바와 같다. 76

77 HTML Chapter 01 예제 frame-rows-cols.html <html> <head> <title> 복합 분할 </title> </head> <frameset cols="150, *"> <frame src="frame1.html"> <frameset rows="50%, 50%"> <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </frameset> </html> [그림 1.42] 가로와 세로 복합 분할한 프레임 프레임 서식 프레임의 모양 및 테두리 선, 여백 등을 조절할 수가 있다. 프레임의 서식을 설정하 는 방법에 대하여 살펴보자. 프레임의 테두리 선 설정 프레임의 테두리 선을 없애거나, 두께를 조절할 수가 있다. 프레임의 테두리 선을 설 정하기 위한 형식은 다음과 같다. 이를 0 으로 지정하면 테두리 선이 보이지 않는다. 형 식 : <frameset border = "픽셀 수"> 77

78 웹 프로그래밍 프레임의 여백 설정 프레임의 좌우 및 상하 여백을 <frame> 태그의 marginwidth와 marginheight 속성을 이용하여 조절할 수 있다. 프레임의 좌우와 상하 여백을 조절하기 위한 형식은 다음과 같다. 형 식 : <frame marginwidth = "픽셀 수" marginheight = "픽셀 수"> 다음 예제는 오른쪽 프레임의 좌우 및 상하 여백을 설정한 것이며, 그 결과는 [그림 1.43]과 같다. frame-margin1.html과 frame-margin2.html은 그림에서 보는 바와 같은 텍스 트를 출력하는 것으로 이들에 대한 설명은 생략한다. 예제 frame-margin.html <html> <head> <title> 프레임의 여백 조절 </title> </head> <frameset cols="300, 500"> <frame src="frame-margin1.html"> <frame src="frame-margin2.html" marginheight="50" marginwidth="50"> </frameset> </html> [그림 1.43] 프레임의 여백 조절 프레임의 크기 변경 금지 앞에서 살펴본 프레임은 브라우저에서 사용자가 마우스로 크기를 변경할 수 있다. 78

79 HTML Chapter 01 그러나 프레임을 변경할 경우 모양새가 좋지 않을 경우가 있는데, 이러한 것을 방지하 기 위하여 <frame> 태그의 noresize 속성을 이용한다. noresize 속성을 이용하면 사용자 가 브라우저에서 프레임의 크기를 변경할 수 없게 되며, 그 형식은 다음과 같다. 형 식 : <frame noresize> 프레임의 스크롤 바 설정 프레임으로 구성된 HTML 문서는 브라우저에서 문서의 크기에 따라 자동으로 스크 롤 바가 나타나거나 또는 나타나지 않는다. 그러나 프레임마다 스크롤 바의 생성 여부 를 설정할 수 있으며, <frame> 태그의 scrolling 속성을 이용한다. scrolling 속성을 yes 로 지정하면 내용의 많고 적음에 관계없이 스크롤 바가 나타나며, no로 지정하면 아무 리 내용이 많아도 스크롤 바가 생기지 않는다. 속성을 auto로 지정하면 프레임의 크기 보다 내용이 많을 때만 스크롤 바가 생긴다. 프레임에서 스크롤 바의 표시 여부를 정 하는 형식은 다음과 같다. 형 식 : <frame scrolling = "auto(기본) yes no"> 타겟 프레임 설정 앞에서 살펴본 프레임 예제들은 브라우저 화면에서 창들을 분할하는 기능을 갖고 있 다. 이러한 기능 외에 프레임에서 타겟을 지정하는 방법을 통하여 원하는 프레임으로 링크를 설정할 수가 있다. 타겟 설정 시 사용되는 속성에 대하여 살펴보자. 형 식 : <frame name = "프레임 이름"> <a href = "파일의 url" target = "파일을 출력할 프레임의 이름"> 브라우저에 나타나는 텍스트 </a> 이제 타겟을 이용하는 실제 예제를 작성하여 보자. 본 예제에서는 target.html, target-left.html, target-right.html, target-content1.html, target-content2.html, 총 5개의 파 일을 사용한다. 각 파일의 내용과 기능에 대하여 살펴보자. target-content1.html과 target-content2.html은 간단한 텍스트를 출력하는 것으로 이들에 대한 설명은 생략한다. 79

80 웹 프로그래밍 예제 target.html <html> <head> <title> 타겟 프레임 설정 </title> </head> <frameset cols="200, *"> <frame src="target-left.html" name="left"> <frame src="target-right.html" name="right"> </frameset> </html> 예제 target-left.html <html> <head> <title> 타겟 설정하기 </title> </head> <body> <center> <h2> 메뉴 </h2> <a href="target-content1.html" target="right"> content1 </a> <br><br> <a href="target-content2.html" target="right"> content2 </a> </center> </body> </html> 예제 target-right.html <html> <head> <title> 타겟 설정하기 </title> </head> <body> <center> <h2> 왼쪽의 메뉴를 선택하세요. </h2> </center> </body> </html> target.html에서는 프레임을 좌우 두 개로 분할하고, name 속성을 이용하여 왼쪽 프레 임의 이름을 left로 오른쪽 프레임의 이름을 right로 부여하였다. 사용자가 브라우저에서 target.html을 실행하게 되면, [그림 1.44]와 같은 결과를 볼 수가 있게 된다. 즉 target.html에서는 왼쪽 프레임에 target-left.html의 내용을 출력하고, 오른쪽 프레임에 target-right.html의 내용을 나타내게 된다. 80

81 HTML Chapter 01 [그림 1.44] 타겟 프레임 지정 target-left.html 파일은 왼쪽 프레임을 구성하는 파일이다. 즉, 왼쪽 프레임의 링크 텍스트인 content1과 content2를 사용자가 클릭할 경우 각각 target-content1.html과 target-content2.html 파일이 실행된다. 여기서 중요한 점은 target 속성에 right라고 설정하 였기 때문에, content1이나 content2를 클릭하면, 항상 오른쪽 프레임에 target-content1.html 이나 target-content2.html이 출력된다는 사실이다. 따라서 사용자들은 왼쪽 프레임의 메 뉴를 통하여 오른쪽 프레임에서 그 내용을 살펴볼 수 있게 된다. [그림 1.45]는 메뉴에서 content2 링크를 클릭한 경우 오른쪽 프레임에 target-content2.html 파일이 출력되는 것을 보여주고 있다. [그림 1.45] 왼쪽 프레임에서 content2를 클릭한 결과 81

82 웹 프로그래밍 앞에서 살펴본 타겟 기능 외에도 다음과 같은 특수한 기능들을 사용할 수 있다. target = "_blank" target = "_self" target = "_top" target = "_parent" : 새로운 윈도우를 생성한 후, 연결된 문서를 표시 : 연결된 문서를 링크가 있는 현재 프레임에 표시 (기본) : 프레임이 없어지고 윈도우 전체에 연결된 문서를 표시 : 현재 프레임을 없애고 현재 프레임의 부모 프레임에 연결된 문서를 표시 여기서 부모 프레임(parent frame)은 자신의 프레임을 생성한 프레임을 의미한다 내부 프레임 생성 앞에서 살펴본 프레임들은 한 화면을 분할하여 사용한다. 이와는 달리 내부 프레임 은 화면의 원하는 곳에 프레임을 삽입할 수 있도록 한다. 이를 위해서 <iframe> 태그 를 사용한다. <iframe> 태그의 형식은 다음과 같다. 형 식 : <iframe> ~ </iframe> <iframe> 태그에는 다음과 같은 속성들이 있다. src = "파일의 url" name = "프레임 이름" width = "픽셀 수" height = "픽셀 수" align = "left right center" align = "top middle bottom" frameborder = "픽셀 수" scrolling = "auto(기본) yes no" marginwidth = "픽셀 수" marginheight = "픽셀 수" : 내부 프레임에 출력되는 파일의 url : 내부 프레임의 이름 : 내부 프레임의 너비 : 내부 프레임의 높이 : 내부 프레임의 좌우 위치 : 내부 프레임의 상하 위치 : 내부 프레임 테두리의 굵기 : 내부 프레임에서 스크롤 바의 사용 여부 : 내부 프레임의 좌우 여백 : 내부 프레임의 상하 여백 src 속성의 url에 대한 상세한 설명은 연결 태그 부분을 참고하기 바란다. 그리고 align 속성은 앞에서 설명한 대로 HTML4.01에서는 권장하지 않으나 주요 브라우저들 은 지원한다. 다음은 <iframe> 태그를 사용한 예제이다. 예제와 같이 src 속성에 about:blank를 지 82

83 HTML Chapter 01 정하면 빈 화면이 나타난다. 내부 프레임의 name을 window라고 정하였으므로 target 속성에 window라고 설정한다. 이제 프레임 1, 프레임 2, 또는 프레임 3 링크를 클릭하 면, 각각의 링크에 연결된 iframe1.html, iframe2.html, 또는 iframe3.html이 내부 프레임 에 출력된다. 예제의 실행 결과는 [그림 1.46]과 [그림 1.47]에서 보는 바와 같다. 예제 iframe.html <html> <head> <title> 내부 프레임 예제 </title> </head> <body> <h2> <center> 내부 프레임 </center> </h2> <iframe src="about:blank" name="window" width="500" height="200" align="center" frameborder="1"> </iframe> <br><br> <center> <a href="iframe1.html" target="window"> 프레임 1 </a> <a href="iframe2.html" target="window"> 프레임 2 </a> <a href="iframe3.html" target="window"> 프레임 3 </a> </center> </body> </html> [그림 1.46] 내부 프레임 사용 83

84 웹 프로그래밍 [그림 1.47] 프레임 1을 클릭한 결과 1.6 폼 작성 웹에서는 사용자에 대한 웹 서버의 일방적인 정보 전달뿐만 아니라 사용자와 웹 서 버 간에 정보를 주고받을 수도 있다. 이와 같은 양방향 정보 교환은 인터넷 게시판이 나 방명록 그리고 사용자의 정보 입력에 따라 업무를 처리하는 수많은 웹 서비스에서 그 예를 찾아볼 수가 있다. 이러한 서비스를 위해서는 사용자로부터 정보를 입력받을 수 있는 폼(입력 양식)이 필요하며 이 경우 <form> 태그를 사용한다 폼 정의 폼(form)을 정의하기 위한 태그와 속성들에 대하여 알아보자. 폼 태그 HTML 문서에서는 폼을 통하여 사용자의 입력 데이터를 웹 서버로 전송한다. <form> 태그 안에서 또 다른 <form> 태그를 포함하는 것은 불가능하며, 다음과 같은 속성들을 설정하여야 한다. 84

85 HTML Chapter 01 형 식 : <form action = "url" method = "get post"> ~ </form> action : 데이터를 처리할 프로그램의 url method : 데이터를 서버에 전달하는 방법 * get - 데이터를 질의 문자열(query string) 형태로 서버에게 전달 (기본) - 데이터의 양이 제한되며, 데이터가 노출됨 * post - 데이터를 메시지 바디(message body)에 포함시켜 서버에게 전달 - 데이터의 양에 제한이 없으며, 데이터가 노출되지 않음 enctype = "application/x-www-form-urlencoded(기본) multipart/form-data text/plain" : post 방식에서 데이터의 전송 인코딩 형식 target = "_self(기본) _blank _parent _top" : 데이터 처리 결과를 표시할 장소 accept-charset = "문자 셋" : 데이터의 문자 인코딩 방식 name = "이름" : 폼 이름 형식에서 action 속성에는 폼에 입력한 데이터를 처리할 프로그램의 url을 기술한다. 이 프로그램은 주로 JSP, ASP, PHP 등의 서버 사이드 스크립트 언어 또는 Perl 등의 CGI 언어로 작성된다. 데이터 전달 및 처리 방법에 대해서는 앞으로 JSP 부분에서 자 세히 공부한다. 입력 태그 <form> 태그 내에서 사용자가 입력할 수 있는 입력 요소(input element)를 정의하기 위하여 <input> 태그가 사용된다. <input> 태그는 다양한 속성들을 갖고 있으며 각 속 성마다 수행하는 기능 또한 다양하다. <input> 태그의 속성들에 대하여 살펴보자. 형 식 : <input type = "형식" : 입력 요소의 형식 name = "이름" : 입력 요소의 이름 value = "값" : 입력 요소의 값 size = "문자 수" : 입력 요소의 크기 checked = "checked" : 미리 선택 표시 maxlength = "문자 수"> : 입력 요소의 최대 문자 수 <input> 태그의 속성들은 다음과 같다. 85

86 웹 프로그래밍 type - text : 텍스트 입력 필드 (기본) - password : 패스워드 입력 필드 ( 으로 표시) - checkbox : 체크박스 - radio : 여러 개 중 하나를 선택하는 라디오 버튼 - hidden : 숨겨진 입력 필드 - image : 이미지를 submit 버튼으로 정의 - file : 파일 업로드 - button : 클릭할 수 있는 버튼 - submit : 데이터 전송 버튼 - reset : 입력 내용 취소 버튼 name - 입력 요소의 이름 - submit과 reset을 제외한 모든 type의 필수 속성 value - text, password : 입력 요소의 기본값 - checkbox, radio : 버튼이 선택되었을 때 전송되는 값 - submit, reset : 버튼에 표시될 내용 checked - checkbox, radio의 기본값 (페이지가 로드될 때 기본으로 선택됨) size - text, password 입력 필드의 크기 (기본 영문자 20) maxlength - text, password에서 입력 받을 수 있는 최대 문자 수 선택 태그 드롭다운 리스트(drop-down list)를 생성하기 위해서는 <form> 태그 안에서 <select> 태그를 사용한다. 다음은 선택 태그의 형식이다. 만일 여러 개의 항목들을 동시에 선택 할 경우는 multiple 속성을 추가한다. 형 식 : <select name = "이름" size = "목록 창에 보이는 항목의 수" [multiple]> <option> 항목 </option> </select> 텍스트 영역 태그 텍스트 영역은 여러 줄의 텍스트를 입력하여 전송할 경우 사용되며, <form> 요소 내 에서 <textarea> 태그를 사용한다. 이 태그는 다음과 같은 속성들을 가지고 있다. 86

87 HTML Chapter 01 형 식 : <textarea [속성]> ~ </textarea> name = "이름" : 텍스트 영역의 이름 rows = "행의 수" : 브라우저에 표시되는 행의 수 (기본 2) cols = "열의 수" : 브라우저에 표시되는 열의 수 (기본 영문자 20) 폼 작성 예제 앞에서 살펴본 속성들을 사용하여 다양한 형식의 폼을 작성하는 방법을 공부하도록 하자. 텍스트 입력 필드 한 줄의 문자열을 입력받는 경우 사용한다. 다음의 예제에서는 text 타입을 이용하여 한 줄의 문자열을 입력받을 수 있는 텍스트 입력 필드들을 생성한다. 마지막 입력 필 드는 value 속성을 이용하여 라는 문자열을 초기값으로 보여준다. 예제에 대한 실행 결과는 [그림 1.48]과 같다 예제 input-text.html <html> <head> <title> 텍스트 입력 필드 </title> </head> <body> <form> name : <input type="text" name="text"> <br><br> age : <input type="text" name="age" size="5"> <br><br> address : <input type="text" name="address" size="40"> <br><br> url : <input type="text" name="url" value=" </form> </body> </html> [그림 1.48] 텍스트 입력 필드 87

88 웹 프로그래밍 패스워드 입력 필드 비밀번호를 입력할 때 사용하는 패스워드 입력 필드를 생성하며, 입력되는 데이터가 으로 표시된다. 다음 예제는 암호를 입력받기 위해 password 타입을 이용하며, 그 결과는 [그림 1.49]에서 확인할 수 있다. 예제 input-password.html <html> <head> <title> 패스워드 입력 필드 </title> </head> <body> <form> your password : <input type="password" name="pw"> </form> </body> </html> [그림 1.49] 패스워드 입력 필드 체크박스 여러 가지 항목들 중에서 한 개 이상을 선택할 경우 사용하며, name의 값은 동일한 반면 value는 항목별로 고유한 값을 가져야 한다. 다음 예제는 checkbox 타입을 이용하 여 사과, 귤, 바나나라는 항목을 작성하였으며, 그 중 귤을 checked라는 속성을 이용하 여 기본 항목으로 설정하였다. 본 예제의 결과는 [그림 1.50]에서 확인할 수 있다. 예제 input-checkbox.html <html> <head> <title> 체크박스 </title> </head> <body> <form> <input type="checkbox" name="fruit1" value="a"> 사과 <input type="checkbox" name="fruit2" value="o" checked> 귤 <input type="checkbox" name="fruit3" value="b"> 바나나 </form> </body> </html> 88

89 HTML Chapter 01 [그림 1.50] 체크박스 라디오 버튼 작성 방법은 checkbox와 동일하며, 단지 여러 개의 항목들 중 하나만을 선택하는 것 이 다른 점이다. 다음 예제는 radio 타입을 이용하여 한 개의 항목만을 선택할 수 있도 록 하였으며, name의 값은 fruit로 동일하게 설정하였다. 그리고 checkbox와 마찬가지로 귤을 기본으로 설정하였다. 본 예제의 결과는 [그림 1.51]과 같다. 예제 input-radio.html <html> <head> <title> 라디오 버튼 </title> </head> <body> <form> <input type="radio" name="fruit" value="a"> 사과 <input type="radio" name="fruit" value="o" checked> 귤 <input type="radio" name="fruit" value="b"> 바나나 </form> </body> </html> [그림 1.51] 라디오 버튼 89

90 웹 프로그래밍 드롭다운 리스트 여러 개의 항목들 중에서 하나 이상을 선택할 수 있는 드롭다운 리스트(drop-down list)를 만들기 위해 <form> 요소 내에서 <select> 태그를 사용하며, 각각의 항목은 <option> 태그로 생성한다. 다음은 목록을 이용하여 과일 항목들을 보이고 그 중에서 선택하기 위한 예제이다. 예제의 실행 결과가 [그림 1.52]에 나타나 있다. 창의 크기를 3으로 정했으므로 선택 항목 5개 중 3개만이 선택 창에 보이며, 나머지 항목들을 선택 하려면 스크롤 바를 사용하여야 한다. 예제 select.html <html> <head> <title> 드롭다운 리스트 </title> </head> <body> <form> <select name="fruit" size="3"> <option> 바나나 </option> <option> 딸기 </option> <option> 복숭아 </option> <option> 포도 </option> <option> 사과 </option> </select> </form> </body> </html> [그림 1.52] 드롭다운 리스트 텍스트 영역 텍스트 영역을 생성하기 위해서는 <form> 태그 안에서 <textarea> 태그를 사용한다. 다음은 5행 30열의 텍스트 영역을 생성하는 예제이다. type 속성의 submit 값은 입력한 텍스트를 전송하기 위한 버튼을 생성하며, reset 값은 입력한 내용을 모두 지우고 취소 하기 위한 버튼을 생성한다. 그리고 value 속성을 이용하여 submit 버튼과 reset 버튼에 90

91 HTML Chapter 01 표시할 텍스트를 지정한다. 예제의 실행 결과는 [그림 1.53]에서 확인할 수 있다. 예제 textarea.html <html> <head> <title> 텍스트 영역 </title> </head> <body> <form> <textarea name="memo" rows="5" cols="30"></textarea> <br><br> <input type="submit" value="보내기"> <input type="reset" value="취소"> </form> </body> </html> [그림 1.53] 텍스트 영역 1.7 멀티미디어 활용 각종 사운드나 동영상을 이용하여 웹 페이지를 꾸밀 수 있다. 본 절에서는 HTML에 서 사운드와 동영상을 지원하는 방법에 대해 소개하기로 한다 사운드 삽입 인터넷에 존재하는 수많은 웹 페이지들을 방문하다 보면 웹 페이지의 첫 화면이 나 타나면서 음악 소리가 들리거나, 링크를 눌렀을 때 벨 소리 또는 다른 음향 효과를 접 할 기회가 종종 있을 것이다. 이와 같이 웹 페이지 안에는 그림뿐만 아니라 사운드를 포함시킬 수 있다. 91

92 웹 프로그래밍 인터넷에서 사용되는 사운드 파일 인터넷에서 사용되는 대부분의 사운드 파일은 압축된 형태의 것들이다. 사운드 파일 은 주로 aif, mid, mp3, mpa, ra, wav, wma 형식을 사용하며 각각.aif,.mid,.mp3,.mpa,.ra,.wav,.wma의 확장자를 가진다. 사운드 넣기 HTML 문서에 사운드 파일을 삽입하는 방법은 간단하다. 이를 위해 다음과 같은 형 식을 이용한다. 형 식 : <a href = "사운드 파일의 url"> 링크를 설정할 텍스트 </a> <a href = "사운드 파일의 url"> <img src = "이미지 파일의 url"> 링크를 설정할 텍스트 </a> 다음 예제에서 다른 부분들은 모두 일반적인 HTML 문서를 작성하는 것과 동일하 다. 단지 링크의 대상을 웹 페이지의 주소가 아닌 재생될 사운드 파일이 존재하는 url 이나 파일명을 지정해 주어야 한다는 것에 차이가 있을 뿐이다. 이 예제는 hello.wav라 는 wav 형식의 사운드 파일을 삽입한 것이다. <img> 태그의 src 속성으로 지정한 speaker.jpg는 스피커 이미지 파일이다. 웹 브라우저에서 이 예제를 실행하면 [그림 1.54]와 같은 내용이 나타난다. 예제 sound.html <html> <head> <title> 사운드 넣기 </title> </head> <body> <center> <br> <h2> 웹 페이지에 사운드 넣기 </h2> <br><br> <a href="hello.wav"> <img src="speaker.jpg" border="0"> <br> 인사말 </a> </center> </body> </html> 92

93 HTML Chapter 01 [그림 1.54] 사운드 넣기 실행 [그림 1.54]에서 인사말이라는 링크 부분 또는 스피커 이미지를 누르면, 다음의 [그 림 1.55]와 같이 사운드를 재생시켜 주는 기본 플레이어가 나타나서 자동으로 사운드 파일을 불러와 재생하게 된다. [그림 1.55] 사운드 재생 플레이어 배경 음악 넣기 배경 음악은 웹 페이지의 내용이 화면에 나타남과 동시에 재생을 시작한다. 배경 음 악을 사용함으로써 웹 페이지의 방문자들에게 내용을 더 효과적으로 전달할 수 있다. 예를 들어 영화를 소개하는 웹 페이지에 배경 음악으로 그 영화의 주제가를 넣는다면, 아마도 단순히 글과 그림으로 소개하는 것보다 큰 효과가 있을 것이다. 배경 음악을 삽입하기 위해서는 <embed> 태그와 <bgsound> 태그를 이용하며 주요 브라우저들이 지원한다. <embed> 태그는 HTML5에 새롭게 추가되었고, <bgsound> 태 그는 HTML4.01에서 권장하지 않는다. 다음은 각 태그의 사용 형식이다. 93

94 웹 프로그래밍 <embed> 태그 형 식 : <embed src = "사운드 파일의 url" autostart = "true(기본) false" : 페이지 접속과 동시에 재생 hidden = "true false(기본)" : 플레이어 숨김 여부 loop = "true false" : 무한 반복 여부 (기본 1) volume = "수"> : 볼륨 0(최소) ~ 100(최대, 기본) <bgsound> 태그 형 식 : <bgsound src = "사운드 파일의 url" loop = "수 infinite(-1)" : 반복 횟수 또는 무한 반복 (기본 1) volume = "수"> : 볼륨 -6000(최소) ~ 0(최대, 기본) 앞에서 살펴본 바와 같이 웹 페이지에 사운드를 삽입하는 방법은 간단하며, 이러한 태그를 사용한 다음 예제를 살펴보자. 예제 sound-embed.html <html> <head> <title> 배경 음악 넣기 </title> </head> <body> <center> <br> <h2> 웹 페이지에 배경 음악 삽입 </h2> <br><br> <embed src="music.wav" autostart="true" hidden="true" loop="true"> <br> 음악 소리가 들립니까? </center> </body> </html> <embed> 태그를 사용하여 사운드 파일을 재생시키는 이 예제를 브라우저에서 실행하 면 예제의 내용이 브라우저에 표시됨과 동시에 사운드 파일이 재생된다. loop 속성을 true 로 설정하였으므로 사운드 파일이 반복적으로 재생되며, 결과 화면은 [그림 1.56]과 같다. [그림 1.56] 배경 음악 삽입 94

95 HTML Chapter 01 <bgsound> 태그를 사용하여 사운드 파일을 재생시키는 다음 예제를 웹 브라우저에 서 실행시키면 앞에서처럼 예제의 내용이 브라우저에 표시됨과 동시에 사운드 파일이 재생된다. 앞의 예제와 다르게 loop 속성을 3 으로 설정하였으므로 사운드 파일이 세 번만 반복해서 재생되며, volume 속성을 -500 으로 설정하였으므로 소리가 기본 크기 보다 작게 재생된다. 이에 대한 결과 화면은 [그림 1.57]과 같다. 예제 sound-bgsound.html <html> <head> <title> 배경 음악 넣기 </title> </head> <body> <center> <br> <h2> 웹 페이지에 배경 음악 삽입 </h2> <br><br> <bgsound src="music.wav" loop="3" volume="-500"> <br> 음악 소리가 들립니까? </center> </body> </html> [그림 1.57] 배경 음악 삽입 동영상 삽입 이미지나 사운드와 마찬가지로 웹 페이지에 동영상을 삽입할 수 있다. 일반적으로 영화를 홍보하기 위한 웹 페이지들을 방문해 보면 영화에 대한 간단한 예고편을 볼 수 가 있다. 개인의 웹 페이지에서도 필요에 따라 동영상을 추가함으로써 방문자들의 관 심을 높일 수 있을 것이다. HTML 문서에 동영상을 삽입하는 방법에 대해 소개하기로 한다. 인터넷에서 사용되는 동영상 파일 인터넷에서 사용되는 동영상 파일은 주로 quicktime, avi, mpeg, windows media video, 95

96 웹 프로그래밍 advanced streaming format, realmedia, vdolive, vivoactive 형식을 사용하고 있으며 파일 의 확장자로 각각.mov,.avi,.mpeg(또는.mpg),.wmv,.asf,.rm,.vdo,.viv를 사용한다. 동영상 넣기 HTML 문서에 동영상 파일을 삽입하는 방법은 파일 포맷에 상관없이 동일하다. <embed> 태그와 <img> 태그를 사용하여 동영상을 삽입할 수 있다. 다음은 <embed> 태그를 사용하여 동영상 파일을 재생시키는 형식이다. <embed> 태그 형 식 : <embed src = "동영상 파일의 url" autostart = "true(기본) false" width = "픽셀 수" height = "픽셀 수"> : 재생할 동영상 파일 : 자동 실행 여부 : 동영상의 너비 : 동영상의 높이 다음 예제에서 src 속성에는 재생할 동영상 파일을 지정한다. 또 웹 페이지가 실행될 때 자동으로 동영상을 재생하기 위해 autostart 속성을 true로 설정하고, 재생되는 동영 상의 가로와 세로의 크기를 설정하기 위해 width와 height 속성을 사용한다. 따라서 다 음의 HTML 문서를 브라우저에서 실행하면 test.wmv이라는 동영상 파일이 [그림 1.58] 과 같이 가로 160픽셀, 세로 120픽셀의 크기로 재생된다. 예제 movie-embed.html <html> <head> <title> 동영상 넣기 </title> </head> <body> <center> <br> <h2> 웹 페이지에 동영상 넣기 </h2> <br><br> <embed src="test.wmv" autostart="true" width="160" height="120"> </center> </body> </html> 96

97 HTML Chapter 01 [그림 1.58] 동영상 넣기 실행 다음은 <img> 태그를 사용하여 동영상 파일을 재생시키는 형식이다. <img> 태그 형 식 : <img src = "이미지 파일의 url" dynsrc = "동영상 파일의 url" width = "픽셀 수" height = "픽셀 수"> : dynsrc 속성을 지원하지 않는 브라우저에서 보여줄 이미지 : 재생할 동영상 파일 : 동영상의 너비 : 동영상의 높이 동영상을 삽입하기 위해서는 <img> 태그 안에서 dynsrc 속성을 사용해야 한다. 다음 예제에서 test.avi 파일은 재생할 동영상 파일이며, movie.gif 파일은 dynsrc 속성을 지원 하지 않는 브라우저에서 동영상을 대신해서 보여줄 이미지이다. 브라우저에서 실행한 결과가 [그림 1.59]에 나타나 있다. 예제 movie-img.html <html> <head> <title> 동영상 넣기 </title> </head> <body> <center> <br> <h2> 웹 페이지에 동영상 넣기 </h2> <br><br> <img src="movie.gif" dynsrc="test.avi" width="160" height="120"> </center> </body> </html> 97

98 웹 프로그래밍 [그림 1.59] 동영상 넣기 실행 결과 기타 다른 확장자를 갖는 동영상 파일에 대해서도 동일한 방법으로 dynsrc 속성에 해당 동영상 파일을 지정하면 웹 브라우저에서 동영상을 재생할 수 있다. 98

99 HTML Chapter 01 연습문제 복습문제 01. 팀 버너스-리에 의해 1994년에 설립된 웹과 관련된 표준을 제정하는 국제기구는 ( )이다. 02. HTML은 (HyperText Markup Language)의 약자로 파일의 확장자는 ( ) 혹은 ( )이다. 03. ( )은 새로운 언어를 정의할 수 있는 메타언어로서 DTD에 의해 문서의 유형을 정의할 수 있다. 즉 DTD를 이용하면 문서에서 사용할 수 있는 태그의 집합을 지정할 수 있으며, 지정된 태그들을 이용하여 문서를 작성할 수 있다. HTML은 ( )의 이러한 기능을 활용하여 DTD로 정의되었다. 04. ( )은 사용법이 복잡한 SGML의 단점과 표현력이 부족한 HTML의 단점을 극복하고 SGML의 표현력과 HTML의 단순성 등 양자의 장점만을 취한 언어이다. 05. XML이 표준화됨에 따라 HTML을 XML에 의해 다시 정의하려는 노력이 진행되 었으며, 2000년에 ( )1.0을 표준화하였다. 06. 인터넷 익스플로러(Internet Explorer), 파이어폭스(Firefox), 크롬(Chrome), 사파리 (Safari), 오페라(Opera)와 같이 웹 문서를 볼 때 사용되는 프로그램을 통상 ( )라고 한다. 07. HTML 문서의 시작을 나타내는 태그는 ( )이며, HTML 문서의 끝을 나타 내는 태그는 ( )이다. 08. 웹 문서의 제목을 나타낼 때 사용하는 태그는 ( )이며, 해당 태그의 시 작과 끝 사이에 놓인 문구가 브라우저의 제목 표시줄에 표시된다. 99

100 웹 프로그래밍 09. ( ) 태그는 HTML 문서에 대하여 설명하는 메타데이터를 포함한다. 주로 사용하는 속성은 http-equiv, name, content이다. 10. 웹 문서의 주석(comment)을 나타내는 태그는 ( ) 기호로 시작하여 ( ) 기호로 끝나며, 그 사이에 포함된 내용이 주석으로 처리된다. 11. 웹 문서의 내용 중 제목 부분을 표시하는 <h1>~<h6>태그는, 숫자가 ( ) 수록 상위의 제목임을 표시하고, 브라우저에서 크게 나타나게 된다. 12. <font> 태그의 속성 중 문자의 크기를 지정하는 size 속성은 1부터 7까지의 숫자 를 지정할 수 있으며, 숫자가 ( 게 나타나게 된다. ) 수록 문자의 크기가 브라우저에서 크 13. HTML 문서에서 <, >, &, ʻʻ, 공백과 같은 문자를 나타내기 위해서 별도의 지정어 를 사용하기도 하는데 각각 <, >, &, ", ( 사용한다. )를 지정어로 14. 문단을 나누기 위해서는 ( ) 태그를 사용하며, 줄바꿈 효과를 얻기 위 해서는 ( ) 태그를 사용한다. ( ) 태그는 줄바꿈을 하고 한 줄을 더 띄운다. 즉, ( ) 태그를 두 번 사용한 것과 같은 효과를 나타낸다. 15. 입력한 것을 그대로 브라우저에 표시하게 하는 ( ) 태그는 사용자가 연속 으로 입력한 공백도 그대로 출력하는 효과를 얻을 수 있다. 16. 태그조차도 그대로 브라우저에 표시하게 하는 ( ) 태그는 HTML 강좌에 서 태그 설명을 해야 하는 경우 사용하면 효과적이다. 17. HTML 문서에서 텍스트나 그림을 설정된 방향과 시간에 맞추어 움직이기 위해서 ( ) 태그를 사용한다. 100

101 HTML Chapter 목록 태그 중 순서가 없는 리스트를 작성할 때 사용되는 태그는 ( )이며, 순서가 있는 리스트를 작성할 때 사용되는 태그는 ( )이다. 19. ( )은 인터넷 상에서 유일한 주소이므로 인터넷 상의 어느 웹 사이트 의 어떤 페이지라도 링크로 연결하는데 사용할 수 있다. ( )은 기준 url 에 대한 상대적인 주소이며, 웹 사이트 내의 파일을 링크로 연결하는데 사용한 다. 그리고 ( )은 HTML 페이지 내의 앵커를 가리키므로 페이지 내에 서의 링크 연결에 사용된다. 20. HTML에서 이미지를 삽입하기 위해서는 ( ) 태그를 사용한다. 21. ( ) 태그는 테이블을 생성하기 위하여 사용하는 태그로, 반드시 종료 태그 ( 내는 태그는 ( )를 함께 사용하여야 한다. 테이블 태그 중 테이블 제목을 나타 )이다. 22. 테이블 속성 중 셀을 합치는 효과를 주는 속성이 있는데, 가로로 셀을 합치는 경우 사용되는 속성은 ( 은 ( )이다. )이며, 세로로 셀을 합치는데 사용되는 속성 23. 프레임을 선언하는 동시에 프레임의 수와 크기를 설정하는 기능을 가지고 있는 태그는 ( )이다. 24. 내부 프레임은 화면의 원하는 곳에 프레임을 삽입할 수 있다. 이를 위해서는 ( ) 태그를 사용한다. 25. HTML에는 사용자와 웹 서버 간에 양방향 정보 교류를 위하여 사용자로부터 정보를 입력받아 처리할 수 있는 입력 양식이 필요한데, 이때 사용하는 태그가 ( )이다. 26. 웹 문서에 멀티미디어(동영상, 오디오)를 삽입할 때 해당 멀티미디어의 위치(url), 자동 재생, 반복 여부, 크기 등을 지정할 수 있도록 속성을 제공하는 태그는 ( )이다. 101

102 웹 프로그래밍 실습문제 01. 다음은 <body> 태그와 bgcolor 속성을 사용하여 바탕색을 하늘색으로 나타낸 것 이다. HTML 문서를 작성하시오. 02. 다음 화면은 <h1> ~ <h6> 태그를 이용하여 나타낸 것이다. HTML 문서를 작성 하시오. 03. 실행 결과가 다음 화면과 같은 HTML 문서를 <font> 태그와 size 속성을 사용하 여 작성하시오. 102

103 HTML Chapter 다음은 <font> 태그와 color 속성을 사용하여 나타낸 것이다. HTML 문서를 작성 하시오. 글자의 의미대로 색상을 표현한다. (예) 빨 빨간색으로 표시 05. 다음 화면과 같이 출력되도록 HTML 문서를 <hr> 태그와 size, width, color 속성 을 사용하여 작성하시오. 색상은 임의대로 설정하시오. 103

104 웹 프로그래밍 06. 다음은 <a> 태그와 href, title, target 속성을 사용하여 나타낸 것이다. W3C 사이 트를 새 창으로 연결하는 HTML 문서를 작성하시오. 07. 다음과 같은 화면에서 스킵 내비게이션(Skip Navigation) 선택 시 메인 콘텐츠 영역 으로 연결되는 HTML 문서를 작성하시오. <a> 태그와 href, name 속성을 사용한다. 104

105 HTML Chapter 다음은 <img> 태그와 src, alt 속성을 사용하여 나타낸 것이다. 각 그림을 클릭하 면 해당 브라우저 홈페이지로 연결되도록 HTML 문서를 작성하시오. 09. 다음과 같이 나타나도록 HTML 문서를 <table> 태그와 width, rowspan 속성을 사용하여 작성하시오. 10. 다음은 <frame> 태그를 사용하여 나타낸 것이다. HTML 문서를 작성하시오. 105

106 웹 프로그래밍 11. 다음은 <form>, <input> 태그 및 <table> 태그를 이용하여 나타낸 것이다. HTML 문서를 작성하시오. (<table> 태그는 화면 배치를 위해 사용) 12. 다음과 같이 실행되는 HTML 문서를 작성하시오. <iframe> 태그를 사용하여 아래 의 단어를 누르면 사진을 내부 프레임에서 볼 수 있도록 하고, <marquee> 태그 를 사용하여 갤러리 글씨가 좌우로 움직이도록 한다. 106

107 HTML Chapter 다음과 같이 출력되는 HTML 문서를 작성하시오. <h3>, <hr>, <blockquote> 태그 를 사용하며, 문서의 내용 중 태그의 이름인 <html>은 blue, <head>는 red, <title> 은 green, <meta>는 orange, <body>는 black 색상으로 출력한다. 14. 순서 없는 리스트와 순서 있는 리스트를 사용하여 다음 화면을 출력하는 HTML 문서를 작성하시오. 107

108 웹 프로그래밍 15. 이미지를 삽입하기 위한 <img> 태그와 링크 태그를 사용하여 다음과 같이 실행 되는 HTML 문서를 작성하시오. 이미지는 본인이 선택하여 사용한다. 16. 다음은 홈페이지에서 자신을 소개하는 부분이다. 이와 같이 텍스트와 이미지의 링크를 이용하여 다른 문서로 이동할 수 있는 HTML 문서를 작성하시오. 내용은 자신을 소개하는 것으로 하며, 이미지는 본인이 선택하여 사용한다. 108

109 HTML Chapter <table> 태그의 colspan과 rowspan을 이용하여 다음과 같이 자신의 시간표를 HTML 문서로 작성하시오. 단 셀의 색상은 자신이 원하는 것으로 지정한다. 18. <table> 태그의 colspan과 rowspan을 이용하여 다음과 같이 자신의 이력서를 HTML 문서로 작성하시오. 단 셀의 색상은 자신이 원하는 것으로 지정한다. 109

110 웹 프로그래밍 19. 프레임과 이미지를 사용하여 HTML 문서를 작성하시오. 화면의 왼쪽에 있는 프레 임에서 링크를 누르면 관련 HTML 문서가 오른쪽 프레임에 나타나도록 한다. 각 프레임 내용과 아이콘, 그림들은 사용자가 선택하여 작성한다. 20. 폼과 입력 태그를 이용하여 다음과 같이 출력되는 HTML 문서를 작성하시오. 21. 문서가 브라우저에 로드됨과 동시에 배경 음악을 반복해서 재생하는 HTML 문서 를 작성하시오. 플레이어가 보이지 않도록 속성값을 설정하고, 음악 파일은 자신 이 가지고 있는 것을 이용한다. 110

111 HTML Chapter 01 참고 문헌 01. 오세만, 이용규, 인터넷 프로그래밍 입문, 개정판, 생능출판사, developer.mozilla.org/en-us/docs/html 03. en.wikipedia.org/wiki/html 04. en.wikipedia.org/wiki/sgml 05. en.wikipedia.org/wiki/xml 06. en.wikipedia.org/wiki/xhtml

112

113 찾아보기 찾아보기 & & 39 > 39 < " moz moz-linear-gradient 169 -moz-radial-gradient 169 -moz-repeating-linear-gradient 169 -moz-repeating-radial-gradient 169 -ms o webkit webkit-gradient 169 blank 82 _parent 82 _self 82 _top 82 < <!DOCTYPE html> 354 <!DOCTYPE> 354 <address> 55 <article> 354, 355 <aside> 354, 356 <audio> 398 <b> 35 <base> 26 <bdi> 361 <bgsound> 94 <big> 35 <blockquote> 44 <body> 24, 31, 354 <br> 39 <canvas> 403 <caption> 62, 65 <center> 42 <command> 368 <datalist> 387 <dd> 48, 51 <details> 365 <div> 43, 329 <dl> 48, 51 <dt> 48, 51 <embed> 94, 96, 402 <fieldset> 396 <figcaption> 369 <figure> 369 <font> 36, 37, 38 <footer> 354, 356 <form> 84, 372 <frame> 74 <frameset> 74 <head> 24, 26, 354 <header> 354 <hgroup> 355 <hr> 41 <html> 24, 26, 354 <i> 35 <iframe>

114 INDEX <img> 57, 97 <input> 85, 373 <jsp:forward> 556 <jsp:getproperty> 557 <jsp:include> 555 <jsp:param> 556 <jsp:plug-in> 556 <jsp:setproperty> 557 <jsp:usebean> 557 <keygen> 393 <legend> 396 <li> 48, 50 <link> 26, 120, 144, 147 <mark> 362 <marquee> 46 <meta> 24, 27 <meter> 362 <nav> 354, 355 <noscript> 26 <ol> 49 <option> 86, 90 <output> 394 <p> 40 <pre> 45 <progress> 364 <q> 44 <rp> 360 <rt> 360 <ruby> 360 <s> 35 <script> 26, 252, 465 <section> 354, 355 <select> 86, 90 <small> 35 <source> 398 <span> 329 <strike> 35 <style> 119 <sub> 35 <summary> 365 <sup> 35 <table> 62 <td> 62 <textarea> 86, 90 <th> 62 <time> 370 <title> 24, 27, 354 <tr> 62 <tt> 35 <u> 35 <ul> 48 <video> 400 <wbr> , 144, 144, 147 A abort 459 absolute url 52 accept-charset 85, 372 accesskey 25, 486 action 85, 372 action tag 554 active 134 addcolorstop 415 adjacent sibling combinator 129 after 131 alert 282 align 34, 40, 41, 63 alink 31 alt

115 찾아보기 alternate 47 ancestor element 24 anchor url 52 Android Emulator 220 animation 217 animation-delay 217 animation-direction 217 animation-duration 216 animation-iteration-count 217 animation-name 216 animation-play-state 217 animation-timing-function 216 Apache Tomcat 231, 489, 647 application 603 application cache 438, 468 application/x-www-form-urlencoded 85, 372 applicationcache 474 arc 406 arcto 406 argument 289 Array 295 as 520 attribute selector 129, 137 autocomplete 372, 374, 385 autofocus 386, 393 autoplay 399, 400 autostart 94 B backface-visibility 206 background 31, 166, 453, 454 background-attachment 166 background-clip 169 background-color 166 background-image 166 background-origin 169 background-position 166 background-repeat 166 background-size 169 before 131 beginpath 406 behavior 47 beziercurveto 406 bgcolor 31, 47, 72 bgproperties 31 body 21 Boolean 297 border 60, 183, 184 border-bottom 184 border-bottom-color 184 border-bottom-left-radius 195 border-bottom-right-radius 195 border-bottom-style 184 border-bottom-width 184 border-collapse 200 border-color 184 border-image 195 border-image-outset 195 border-image-repeat 195 border-image-slice 195 border-image-source 195 border-image-width 195 border-left 184 border-left-color 184 border-left-style 184 border-left-width 184 border-radius 195 border-right 184 border-right-color 184 border-right-style 184 border-right-width 184 border-spacing 200 border-style 184 border-top 184 border-top-color 184 border-top-left-radius 195 border-top-right-radius

116 INDEX border-top-style 184 border-top-width 184 border-right-width 184 border-width 184 bottom 58, 177 box-align 190 box-direction 190 box-flex 190 box-ordinal-group 190 box-orient 190 box-pack 190 box-shadow 190 box-sizing 190 built-in function 281 built-in object 294 button 86 byte code 545 C CACHE 471 candidate key 509 caption-side 200 cascade 517 Cascading Style Sheets 115 case 270, 575 catch 587 cellpadding 71 cellspacing 71 center 40, 466 CGI 545, 547 challenge 393 checkbox 86, 88 checked 86 child combinator 129 child element 24 Chrome 22 circle 48 class 25, 31 class selector 126 clear 184, 446 cleardata 440 clearrect 406 clip 177, 406 close 478 closepath 406 code 463 color 37, 41, 166, 374 cols 87 colspan 63, 66 column 508 column-count 162 column-gap 162 column-rule 162 column-rule-color 162 column-rule-style 162 column-rule-width 162 column-span 162 column-width 162 columns 162 combinator 129 comment 33, 257, 562 Common Gateway Interface 545, 547 component 546 confirm 283 Connection 605 content 27, 131, 183 Content-Type:text/event-stream 478 controls 399 cookie 445 coords 462 core attribute 25 create 문 512 createimagedata 429 createlineargradient 415 createpattern 415 createradialgradient 415 CSS

117 찾아보기 CSS 레벨 CSS 레벨 CSS 레벨 CSS 레벨 CSS 속성 153 CSS1 116 CSS2 116 CSS CSS3 116 cubic-bezier 214 D data 429, 479 Data Control Language 510 Data Definition Language 510 Data Manipulation Language 510 data type 255, 563 Database Management System 507 datatransfer 440 Date 298, 582 date 375 datetime 371, 376 datetime-local 377 DBMS 507 DCL 510 DDL 510 declaration 552 default 270, 575 definition list 48 delete 문 528 desc 515 descendant combinator 129 descendant element 24 dir 25 direction 47 directive 548 disc 48 display 200 distinct 520 division 43 DML 510 do while 문 279, 579 document 316 drag and drop 438 drag object 438 draggable 439 drawimage 429 drop 문 516 drop location 438 drop-down list 86, 90 dropeffect 440 dynamic pseudo-class 134 dynamic web page 546 dynsrc 97 E E-R model 507 effectallowed 440 element 19 element type embedded style 118 empty 139 empty-cells 200 enablehighaccuracy 463 enctype 85, 372 entity 508 Entity-Relationship model 507 error 459 error_callback 461 eval 287 event 324, 479 event handler 324 EventSource 478 exception 558, 586 Explorer

118 INDEX expression 264, 554 expression tag 560 extensible HyperText Markup Language 17 extensible Markup Language 17 external style sheet 118 F face 38 FALLBACK 471 File 86, 459, 582 file API 438, 458 FileReader 459 fill 406 fillrec 406 fillstyle 415 filltext 426 finally 587 Firefox 22 first-child 133 first-letter 131 first-line 131 first-of-type 139 float 184 flow chart 268 focus 134 font 153, 425 font-family 153 font-size 153 font-size-adjust 156 font-stretch 156 font-style 153 font-variant 153 font-weight 153 for 문 272, 576 for-in 문 274 foreground 454 foreign key 509, 515 form 84 formaction 391 formenctype 391 formmethod 391 formnovalidate 391 formtarget 391 frameborder 82 function 281, 584 G general sibling combinator 137 geolocation 438, 461 get 85, 372, 590 getcurrentposition 461 getdata 440 getelementbyid 424 getimagedata 429 getitem 446 global variable 258 globalalpha 435 globalcompositeoperation 435 GMT 376 google.maps.latlng 465 google.maps.map 466 gradient 169, 414, 422 gradient-side 170 Greenwich Mean Time 376 group by 519, 523 H head 21 height 59, 177, 184 hidden 94 history 309 hover 134 href 52 hsl 170 hsla

119 찾아보기 hspace 60 HTML wrapper 305 HTML 문서의 구조 19 HTML 15 HTML HTML HTML HTML5 17, 351 HTML5 그래픽 403 HTML5 문서의 구조 352 HTML5 API 438 HTML Document Object Model 315 HTML DOM 315, 316 http-equiv 27 hue saturation lightness 170 hue saturation lightness alpha 170 hyperlink 51 hypertext 15 HyperText Markup Language 15 I icon 368 id 25, 31, 479 id selector 128 identifier 255, 563 if 문 266, 572 implict object 558 include 지시문 550 indexed database 438 inline style 118 input element 85 insert 문 525 Integer 581 International Standard Organization 17 interpret 251, 545 interpreter 251 ISO 17 ispointinpath 406 J Java Database Connectivity 605 Java Developement Kit 639 java compiler 547 Java Server Pages 545 Java Virtual Machine 545, 547 JavaScript 251 JDBC 605 JDK 639 JSP 545 justify 40 JVM 545, 547 K key 446 keyboard attribute 25 keytype 393 keyword 255 L lang 25, 26, 136 language attribute 25 language pseudo-class 136 last-child 124, 139 last-of-type 124, 139 lastmodifieddate 459 layer 328 left 34, 177 leftmargin 31 length 446, 583 letter-spacing 159 line-height 159 linecap 415 linejoin 415 lineto 406 linewidth

120 INDEX link 31, 134, 316 link pseudo-class 134 list 387 list-style 180 list-style-image 180 list-style-position 180 list-style-type 180 local variable 258 localstorage 445 location 307, 311 logical expression 262, 568 loop 47, 94, 272, 399, 576 M manifest 471 maptypeld 466 margin 183, 184 margin-bottom 184 margin-left 184 margin-right 184 margin-top 184 marginheight 78 marginwidth 78 markup 15, 19 Math 301, 582 matrix 207 matrix3d 207 max-height 184 max-width 184 maximumage 463 maxlength 85, 86, 373 measuretext 426 media query 143 message 463 metalanguage 18 method 85, 281, 372 middle 58 min-height 184 min-width 184 miterlimit 415 month 379 moveto 406 multi thread 454 multipart/form-data 85, 372, 391 multiple 86, 374, 389 muted 400 MySQL 510 N name 27, 86 NaN 303 natural language 25 navigator 307, 313 negation pseudo-class 142 NETWORK 471 new 295 noresize 79 noshade 41 not 124, 142 Not-a-Number 303 novalidate 372 nth-child 124, 139 nth-last-child 124, 139 nth-last-of-type 124, 139 nth-of-type 124, 139 Number 294, 303 number 380 O object code 545 ondrag 440 ondragend 440 ondragenter 440 ondragleave 440 ondragover

121 찾아보기 ondragstart 440 ondrop 440 onerror 454, 459, 478 onload 459 only-child 139 only-of-type 139 onmessage 454, 478 onopen 478 onprogress 459 opacity 169 Opera 22 operator 259 operator precedence 264 optimum 363 options 461 order by 519 order by asc 524 order by desc 524 ordered list 48, 49 out 597 outline 183, 184 outline-color 184 outline-offset 184 outline-style 184 outline-width 184 overflow 184 overflow-x 195 overflow-y 195 P padding 183, 184 padding-bottom 184 padding-left 184 padding-right 184 padding-top 184 page 지시문 548 parameter 289, 585 parent element 24 parsefloat 287 parseint 287 password 88 pattern 389 perspective 206, 207 perspective-origin 206 position 177, 329, 462 PositionError 463 PositionOptions 463 post 85, 372, 592 poster 400 postmessage 454 predefined function 281 predefined object 294 preload 399 preventdefault 439 primary key 509, 515 process 454 prompt 285 property 117, 153 pseudo-element 131 pubdate 371 putimagedata 429 Q quadraticcurveto 406 R radian 412 radio 89 radiogroup 368 range 381 readasarraybuffer 459 readasbinarystring 459 readasdataurl 459 readastext 459 readystate

122 INDEX rect 406 recursive call 292 recursive function 292 red green blue 170 red green blue alpha 170 rel 120 relation 508 relational data model 508 relational expression 261, 568 relative url 52 removeitem 446 request 589 required 389 reserved identifier 255 reserved word 255 reset 90 resize 190 response 594 restrict 517 result 459 ResultSet 606 retry 479 return 문 289, 585 rgb 170 rgba 170 right 40, 177 root 139 root element 26 rotate 207, 431 rotate3d 207 rotatex 207 rotatey 207 rotatez 207 row 508 rows 87 rowspan 63, 66 S Safari 22 scale 207, 431 scale3d 207 scalex 207 scaley 207 scalez 207 screen 314 script language 251, 547 scripting element 552 scripting language 251 scriptlet 553 scriptlet tag 561 scroll 31, 47 scrollamount 47 scrolldelay 47 scrolling 79 search 382 section 43 select 문 518 selector 122, 123, 124 semantic web 352 server-sent events 438, 477 server side 547 servlet 547 servlet container 547 session 599 sessionstorage 445 setdata 440 setitem 446 settransform 432 SGML 16, 17 shadowblur 415 shadowcolor 415 shadowoffsetx 415 shadowoffsety 415 show 512 size 36, 41,

123 찾아보기 skew 207 skewx 207 skewy 207 slice 459 slide 47 SQL 509 square 48 src 57 standard attribute 25 Standard Generalized Markup Language 16, 17 start 50 Statement 605 status 307, 474, 513 step 374, 389 String 581 stroke 406 strokerect 406 strokestyle 415 stroketext 426 structural pseudo-classes 133, 139 Structured Query Language 509 style 25, 31 style sheet 115 submit 90, 373 subprogram 281 subroutine 281 success_callback 461 super key 509 swapcache 474 switch 문 269, 574 T tabindex 25, 486 table 508 table-layout 200 tag 19 target 52, 82, 85, 124, 141, 372 target pseudo-class 141 terminate 454 text 31, 87 text/cache-manifest 471 text/plain 85, 372, 391, 441 text/uri-list 441 text-align 159 text-decoration 159 text-indent 159 text-justify 162 text-overflow 162 text-shadow 162 text-transform 159 textalign 425 textbaseline 425 thread 453, 545 Tim Berners-Lee 18 time 374, 383 time zone 376 timeout 463 timestamp 462 title 25, 52 top 58, 177 topmargin 31 transform 206, 432 transform-origin 206 transform-style 206 transition 213 transition-delay 213 transition-duration 213 transition-property 213 transition-timing-function 213 translate 207, 431 translate3d 207 translatex 207 translatey 207 translatez 207 try 587 try-catch-finally 문 586 type 50, 86,

124 INDEX type selector 125 U UI element states pseudo-classes 141 UI 요소 상태 의사 클래스 124, 141 uniform resource locator 52 universal selector 124 unique key 515 unordered list 48 update 474 update 문 527 url 52, 384, 478 use 513 V valign 63 value 50, 86 var 255, 256 variable 255 vertical-align 159 visibility 177 visited 123, 134 vlink 31 volume 94 vspace 60 W W3C 15, 18 Web Hypertext Application Technology Working Group 17, 351 web socket 438, 481 web storage 438, 445 web worker 438, 453 WebSocket 481 week 374, 385 WHATWG 17, 351 where 절 521 while 문 276, 577 white-space 159 width 41, 59, 177, 184, 314 wildcard 524 window 307 word-break 162 word-spacing 159 word-wrap 162 World Wide Web Consortium 15, 18 write 254 writeln 254 ws: 481 wss: 481 X XHTML 17, 18 XML 17, 18 Z z-index 177 zoom 466 ᄀ 가로 분할 74 가로와 세로 복합 분할 76 가운데 정렬 42 개체 508 개체 관계 모델 507 객체 294 게시글 목록 보기 623 게시글 삭제 635 게시글 수정 628 게시글 작성 618 게시판 617 결합자 129 경고 대화상자 282 계산 결과 태그

125 찾아보기 곡선 그리기 411 관계 508 관계 연산자 261, 522, 568 관계식 261, 568 관계형 데이터 모델 508 관계형 데이터베이스 507 괘선 태그 41 구역 43 구조 의사 클래스 123, 124, 133, 139 권장하지 않는 속성 488 권장하지 않는 태그 488 그라디언트 169, 414, 422 그래픽 메소드 405 그룹 태그 396 그림 변형 431 그림 합성 434 그림자 생성 420 글꼴 지정 38 글꼴 파일 형식 157 글로벌 속성 485, 486 기본 키 509, 515 기본 태그 560 기준선 그리기 427 ᄂ 나머지 260, 567 내부 여백 183 내부 프레임 생성 82 내용 20, 183 내장 객체 294, 558 내장 함수 281 논리 연산자 261, 522, 568 논리식 262, 568 ᄃ 단락 서식 태그 39 단락 태그 40 대입 연산자 263, 570 데이터 모델 507 데이터 전송 440 데이터 정의어 510 데이터 제어어 510 데이터 조작어 510 데이터베이스 507 데이터베이스 관리 시스템 507 데이터베이스 모델 507 도형 그리기 405 동영상 넣기 96 동영상 삽입 95 동영상 파일 95 동적 웹 페이지 546 동적 의사 클래스 123, 134 드래그 대상 439 드래그 앤 드롭 438 드롭 장소 439 드롭다운 리스트 86, 90 ᄅ 라디안 412 라디오 버튼 89 레이어 328 로컬 스토리지 445 루트 요소 26 루프 272, 576 리스트 항목 48 링크 의사 클래스 123, 134 ᄆ 마우스 관련 선택자 134 마크업 15, 19 매개변수 289, 585 머리 21 멀티 스레드 454 멀티미디어 활용

126 INDEX 메소드 281 메타언어 18 목록 속성 180 목록 태그 48 목적 코드 545 몸통 21 문자 서식 태그 35 문자 크기 지정 36 문자색 지정 37 문자열 연산자 262, 570 문장 572 미디어 속성 146 미디어 질의 143 미디어 질의 작성 145 미디어 타입 145 미디어 태그 398 ᄇ 바이트 코드 545 박스 속성 183, 184, 190 반복 형식 그라디언트 169 반복문 272, 576 배경 음악 넣기 93 배열 295, 565 배정 연산자 263, 570 백그라운드 453, 454 변수 255, 563 변형 205, 206 부모 요소 24 부정 의사 클래스 124, 142 브라우저 22 브라우저 객체 306 브라우저별 접두어 143 ᄉ 사각형 그리기 407 사용자 정의 객체 319 사용자 정의 함수 289 사운드 넣기 92 사운드 삽입 91 사운드 파일 92 사파리 22 산술 연산자 260, 566 상대 url 52 색과 배경 속성 165 색상표 32 서버 사이드 547 서버 전송 이벤트 438, 477 서브루틴 281 서브프로그램 281 서블릿 547 서블릿 컨테이너 547 선 그리기 408 선 스타일 417 선언문 552 선택 태그 86 선택자 122, 123, 124 선형 형식 그라디언트 169 세로 분할 76 섹션 43 섹션 스토리지 445 섹션의 정렬 43 셀 간격과 여백 조절 70 셀 내부의 텍스트 정렬 73 셀 합치기 태그 66 속성 117, 153 속성 선택자 123, 124, 129, 137 수퍼 키 509 순서 없는 리스트 48 순서 의사 요소 123, 131 순서 있는 리스트 48, 49 순서도 268 스레드 453, 545 스크립트 언어 251, 547 스크립트릿 553 스크립트릿 태그

127 찾아보기 스크립팅 언어 251 스크립팅 요소 552 스타일 시트 115 스타일 유형 118 스타일 정의 방법 122 스타일 지정 414 시맨틱 웹 352 식 264, 554 식 태그 560 식별자 255, 563 ᄋ 아이디 선택자 123, 128 안드로이드 에뮬레이터 150, 220 암호화 키 생성 태그 393 애니메이션 216 애플리케이션 캐시 438, 468 애플리케이션 캐시 업데이트 474 액션 태그 554 앵커 url 52 언어 속성 25 언어 의사 클래스 123, 136 여론조사 611 연결 태그 51 연산 260 연산자 259, 566 연산자 우선순위 264 열 508 예약어 255 예외 처리 558, 586, 607 오페라 22 와일드카드 524 외곽선 183 외부 스타일 시트 120 외부 여백 183 외부 키 509, 515 외래 키 515 요소 19 요소의 타입 125 용어 리스트 48, 51 용어의 설명 51 용어의 제목 51 원형 형식 그라디언트 169 웹 소켓 438, 481 웹 스토리지 438, 445 웹 워커 438, 453 웹 표준 기구 18 위치 속성 176 유니크 키 515 의견 입력 화면 613 이미지 삽입 56, 428 이미지 태그 57 이미지로 문서 연결 61 이미지와 문자의 정렬 58 이미지의 여백 조절 59 이미지의 크기 조절 59 이벤트 324 이벤트 처리기 324 익스플로러 22 인덱스드 데이터베이스 438 인라인 스타일 118 인용 태그 44 인접 형제 결합자 123, 129 인터프리터 251 인터프리트 251, 545 일반 형제 결합자 124, 137 임베디드 스타일 119 입력 요소 85 입력 태그 85, 372 ᄌ 자료형 255, 563 자바 컴파일러 547 자손 결합자 123, 129 자손 요소 24 자식 결합자 123,

128 INDEX 자식 요소 24 자연 언어 25 재귀 함수 292 재귀 호출 292 전역 변수 258 전체 선택자 123, 124 전환 213 절대 url 52 접두어 143 정렬 태그 42 제목 태그 33 제외된 속성 486, 487 조건 연산자 263 조건문 266, 572 조건식 272, 576 조상 요소 24 주석 33, 257, 562 주석 태그 33 주 키 515 줄바꿈 태그 39 증감 연산자 260, 567 증감식 272, 576 지시문 548 지역 변수 258 지오로케이션 438, 461 집계 함수 522 ᄎ 체크박스 86, 88 초기화식 272, 576 추가된 속성 484 ᄏ 캔버스 태그 403 컨테이너 403 컴포넌트 546 쿠키 445 크롬 22 클라이언트 사이드 251 클래스 581 클래스 선택자 123, 126 클립 활용 409 키보드 속성 25 키워드 255 ᄐ 타겟 의사 클래스 124, 141 타임존 376 타입 선택자 123, 125 태그 19 테두리 183, 195 테이블 508 테이블 서식 68 테이블 선언 태그 62 테이블 속성 200 테이블 정렬 72 테이블 제목 태그 65 테이블의 너비 조절 69 테이블의 높이 조절 69 테이블의 색 지정 71 테이블의 외곽선 지정 68 테이블의 크기 조절 69 텍스트 그리기 425 텍스트 속성 159 텍스트 영역 90 텍스트 영역 태그 86 텍스트 입력 필드 87 특수 문자 39 팀 버너스-리 18 ᄑ 파이어폭스 22 파일 API 438, 458 파일 유형

129 찾아보기 패스워드 입력 필드 88 패턴 424 포그라운드 454 폰트 속성 153 폰트 스타일 태그 35 폼 84 폼 속성 설정 391 폼 작성 84, 372 폼 태그 84, 372 표준 속성 25 표현식 554 표현식 태그 560 프레임 73 프레임 서식 77 프레임 작성 73 프레임의 스크롤 바 설정 79 프레임의 여백 설정 78 프레임의 크기 변경 금지 78 프레임의 테두리 선 설정 77 프로세스 454 프롬프트 대화상자 285 ᄒ 하이퍼링크 51 하이퍼텍스트 15 할당 연산자 263, 570 함수 281, 584 핵심 속성 25 행 508 형제 선택자 137 호 그리기 412 확인 대화상자 283 후보 키

130 저자 약력 이용규 미국 시라큐스대학교 전산학박사 현 동국대학교 컴퓨터공학과 교수 김신우 동국대학교 컴퓨터공학과 공학박사 현 동국대학교 컴퓨터공학과 강사 박성은 동국대학교 컴퓨터공학과 공학박사 현 윕스 책임컨설턴트 저자와의 협의에 의해 인지를 생략합니다. 웹 프로그래밍 이용규 김신우 박성은 지음 초판인쇄 : 초판발행 : 발 행 인 : 발 행 처 : 신고번호 : 신고일자 : I S B N : 김 승 기 생능출판사 제 호 (93000) - 경기도 파주시 문발동 파주출판도시 대표전화 : (031) FAX : (031) 홈페이지 : 파본 및 잘못된 책은 바꾸어 드립니다. 정가 27,000원

131