<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:dongilkim@dongguk.edu">dongilkim@dongguk.edu</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