정보 보안학과
HTML의 개요 HTML 기본 HTML 응용
HTML을 이해하고 HTML 전용 에디터를 사용할 수 있다. 테이블, 프레임, 링크 등의 태그에 대해 설명할 수 있다. <input> 태그로 텍스트, 비밀번호, 체크박스 등의 사용자 입력을 받을 수 있다. 풀다운 및 리스트 메뉴 등의 콤보 박스 형태로 사용자 입력을 받을 수 있다. <embed> 태그로 멀티미디어를 구성하는 음악과 동영상을 재생시킬 수 있다.
01. HTML의 개요 HTML의 개요 HTML의 구성요소 웹을 구성하는 서버 프로그램을 구축할 때 HTML이 사용 태그(Tags) : 문서 중간에 들어가는 일종의 꼬리표로, ‘< ’ 기호와 ‘ >’ 기호로 둘러싸여 있는 코드 속성(Attributes) : 태그의 내부에서 그 태그의 형태를 구체적으로 나타냄 변수(Arguments) : 태그를 구성하는 속성의 실제 값 [표11-1] 주요 태그
01. HTML의 개요 HTML 문서의 구조 주요 태그 <html> <head> 프레임(html), 머리글(head), 본문(body)으로 구성 HTML 문서는 <html> 태그로 시작하고 </html> 태그로 종료되며, 그 사이에 머리글 태그인 <head>와 </head>, 본문을 알려주는 <body>와 </body>가 들어감 <html> <head> 이 사이에 머리글이 들어간다. <title>김경신의 홈페이지</title> </head> <body> 이 사이에 본문이 들어간다. </body> </html> 주요 태그 title 브라우저창의 제목을 설정하는 태그 <hr> 화면에 수평선을 삽입하는 태그
01. HTML의 개요 웹 에디터 콤포저 [Normal], [HTML Tags], [Source], [Preview]라는 4개의 탭(Tab)으로 구성 [Normal]과 [Source]는 홈페이지를 만드는 작업용 탭 [HTML Tags]와 [Source]는 작업한 코드를 보여주는 탭 [그림 11-1] 콤포저 실행모습
02. HTML 기본 문자 서식 관련 태그 font <font size="5" color="red" face="굴림" >사이즈가 5인 붉은 텍스트</font> [그림 11-4] 문자 서식
02. HTML 기본 폰트 태그 문서 내의 글자 크기와 색깔, 폰트 모양을 지정해 주는 태그로 사용 형식은 다음과 같다. 많이 쓰이는 색상 16가지의 이름과 전체 색상 값
02. HTML 기본 color 속성 color 속성은 폰트의 색깔을 나타내는 것으로 영문 색상 명이나 색상 코드로 입력 가능
02. HTML 기본 문서배경 꾸미기 태그 색깔이나 그림 등이 있는 편지지와 마찬가지로 HTML 문서의 배경을 자유롭게 나타낼 수 있는 태그
<BODY> 태그 배경색 및 글자 색상 지정하기 형식 : <BODY BGCOLOR=“색상" TEXT=“글자색“ > </BODY> <BODY BGCOLOR=“파일" TEXT=“글자색“ > </BODY? 예제 : <BODY BGCOLOR="yellow" TEXT="blue“ > BODY 태그의 속성 </BODY> HTML 자기소개서 작성하기 Chapter02
02. HTML 기본 글자 관련 태그 글자 크기 지정 웹 문서에서 사용하는 글자의 크기를 지정 할 때 H[n](n은 1~6의 숫자) 태그를 이용(n이 클수록 글자가 작아짐)
02. HTML 기본 문자 형태 관련 태그 문자의 형태는 굵기, 밑줄, 이탤릭 체 등과 같은 문자의 모양을 표현하는 데 사용 [표 11-3] 문자 형태 태그
02. HTML 기본 실습 11-1 문자 형태 관련 태그 알아보기 태그 입력하기 콤포저의 [Source] 탭에서 다음과 같이 HTML 태그를 입력 각 문장의 끝에 있는 <br>은 칸을 바꾸는 태그 이것은 <b>굵은 문자</b>를 표시합니다.<br> 이것은 <i>이탤릭체 문자</i>를 표시합니다.<br> 이것은 <u>밑줄 문자</u>를 표시합니다.<br> 이것은 <strike>취소선</strike>를 표시합니다.<br> 이것은 <big>큰 문자</big>를 표시합니다.<br> 이것은 <small>작은 문자</small>를 표시합니다.<br> 이것은 <sup>윗첨자</sup>를 표시합니다.<br> 이것은 <sub>아래첨자</sub>를 표시합니다.<br> 이것은 <tt>타자체 문자</tt>를 표시합니다.<br>
02. HTML 기본 실행 결과 확인 [그림 11-5] 실행 결과
02. HTML 기본 문서 레이아웃 관련 태그 레이아웃 디자인이나 광고 혹은 편집 단계에서 문자. 그림, 기호, 사진 등의 각 구성요소를 제한된 공간 안에 효과적으 로 배열하는 것을 의미 HTML에도 레이아웃과 관련한 다음과 같은 태그가 존재. 줄을 바꾸거나 문장의 글을 가운데나 오른쪽으로 정렬하는 등의 문서의 형태를 바꾸는 레이아웃 관련 태그는 다음과 같음 [표 11-4] 레이아웃 태그
02. HTML 기본 실습 11-2 문자 레이아웃 관련 태그 알아보기 br : 줄바꿈 p : 문단 바꿈 center : 글이나 그림을 중앙에 위치시킴 설명문 처리 바람이 분다.<br>구름이 몰려온다.<br>비가 내린다.<br> 아내가 돌아온다.<p>저녁을 먹는다.</p>아내가 돌아온 것이다. <center>문장을 가운데 위치시키세요</center> <!-- 아래 라인은 글씨체를 설정하는 부분입니다. 참고하세요. -->
02. HTML 기본 <body> 문장정렬방식의 하나입니다. <pre>PRE태그는 입력한 대로 나 타 나는 아주 편리한 태그입니다. </pre> <br><br><br> Pre태그를 사용해서 편리하게 입력합니다. </body> [그림 11-9] pre 실행 결과
02. HTML 기본 HR태그는 수평선을 긋습니다.<hr>여기는 수평선 아래쪽입니다
02. HTML 기본 문서 목록 관련 태그 홈페이지에 정보가 보기 좋게 목록화되어 있거나 나열되어 있으면 가독성이 좋아짐 문서 목록 태그란 특정 단어나 문장을 목록화하여 화면에 뿌려주는 태그. 각각의 문장이나 단어를 숫자로 목록화하거나 글머리 기호로 표시 [표 11-5] 문서 목록 태그 [표 11-6] 문서 목록 속성
02. HTML 기본 <ul type=disc> <li>첫째 <li>둘째
02. HTML 기본 <ol> <li>모닝 <li>런치 <li>이브닝
02. HTML 기본 <dl> <dt>제1조<dd>남자는 여자를 사랑한다.
하이퍼링크 태그 알아보기 (1) 하이퍼링크 태그
02. HTML 기본 하이퍼링크 a 태그 <a name="건너뛰기"> … </a> 하이퍼텍스트는 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서를 의미하는 것으로, 브라우저에서 특정 링크를 클릭하면 해당 사이트로 이동 하이퍼링크는 웹이 성공하기 위한 가장 중요한 태그중의 하나였음 a태그의 속성 [표 11-7] a 태그 속성 <a name="건너뛰기"> … </a> <a herf="#건너뛰기"> … </a> <a herf="http://my.room.com/mykorea">my HOME</a> <a herf="new.html" target="window_name">새로운 창</a>
02. HTML 기본 실습 11-3 하이퍼링크 태그 알아보기 교재 367페이지의 HTML코드를 작성한 후, jump.html로 저장 웹 브라우저에서 jump.html을 실행시켜 아래 그림처럼 나오는지 확인 [그림 11-15] 실행 결과
02. HTML 기본 책갈피 태그 <A> 태그를 이용한 책갈피 설정하기 하이퍼 링크에 책갈피 설정하기
02. HTML 기본 배경 태그 배경 태그는 웹 페이지의 배경화면을 지정하는 태그 본문 태그인 <body> 내에 background, bgcolor 등의 다양한 속성을 이용하여 문서를 작성 가능 아래 표는 배경과 관련한 <body>의 속성값 [표 11-8] body 태그 속성
02. HTML 기본 실습 11-4 화면의 배경 속성 넣기 속성 설정하기 배경 화면을 노란색, 활성화 링크는 녹색, 이미 방문했던 링크는 빨간색으로 나타나도록 배경을 설정 <body bgcolor="#ffff00" alink="yellow" link="green" vlink="blue"> <a href=" http://www.daum.net=">다음으로 이동하세요....</a><br> </body> [그림 11-16] 배경 속성 결과
03. HTML 응용 멀티미디어 관련 태그 멀티미디어(Multimedia)란 여러 종류의 미디어 요소를 동시에 사용하는 것을 의미 웹 페이지에서 사용하는 미디어로는 텍스트나 이미지 이외에 사운드, 동영상 등이 있음 다양한 미디어를 동시에 사용하여 구성 [표 11-9] 멀티미디어 태그
03. HTML 응용 음악 및 동영상 삽입 <embed> : 사운드 파일뿐 아니라 동영상 파일까지 재생이 가능한 태그 <bgsound> : 사운드 파일인 wav나 미디 음악인 mid와 같은 순수 배경 음악용으로 사용되는 파일을 구동할 때 주로 사용하는 태그 [표 11-10] 멀티미디어 속성
03. HTML 응용 <html> <head> <embed> 다음과 같이 HTML 코드를 입력하면 문서를 열었을 때 poly.mp3 파일이 자동으로 1회만 재생되고 정지 음악 재생 도구는 나타나지 않음 만약 링크를 사용하여 파일을 재생하려면 <a> 태그를 이용 다음과 같이 HTML 코드를 입력하면 “여기를 누르면 음악이 재생됩니다.”를 클릭했을 때 해당 음악이 출력 <html> <head> <title>멀티미디어 테스트</title> </head> <embed src="poly.mp3" autostart="true" hidden="false" loop="1"> </html> <html> <head> <title>멀티미디어 테스트</title> </head> <a href="poly.mp3" autostart="true" HIDDEN="false" LOOP="1">여기를 누르면 음악이 재생됩니다.</a> </html>
03. HTML 응용 <html> <head> <bgsound> 다음과 같이 HTML 코드를 입력하면 poly.mp3 파일이 배경 음악으로 수행되고, 무한으로 반복 재생 <html> <head> <title>배경음악 테스트</title> </head> <br> 지금 배경음악이 흐르고 있습니다. <bgsound src="poly.mp3" loop="infinite"> </html>
03. HTML 응용 이미지 삽입 이미지를 HTML 문서에 삽입할 때는 <img> 태그를 사용
그림 삽입 태그 문장의 위치 정렬하기 문장 위치를 정렬하기 위해서는 align 속성을 이용
03. HTML 응용 실습 11-5 이미지 넣기 <img src="apple.jpg"> 이미지 삽입 이미지에 테두리 만들기 이미지에 링크 걸기 이미지 링크옆에 글을 삽입하기 이미지 설명글 나타내기 <img src="apple.jpg"> <img src="apple.jpg" border="1"> <a href="http://www.earth.com"><img src="apple.jpg"></a> <img src="global.jpg" align="top">지구사이트로 이동합니다. <img src="global.jpg" alt="지구를 보호합시다.">
미디어 삽입 태그 플래시 파일을 삽입하는 태그는 동영상 및 사운드 파일에서처럼 <EMBED> 사용 보다 많은 옵션을 사용하려면 <object>태그 사용
03. HTML 응용 표(Cell) 표에는 행과 열이 존재 행(Row)은 ‘줄’이라고 하며 글이나 그림이 들어갈 수 있는 위에서 아래로 연결된 사각형 공간을 말함 열(Column)은 ‘칸’이라고 하며 왼쪽에서 오른쪽으로 연결되는 공간을 말함 표를 생성하는 태그는 <table>을 비롯하여 <tr>, <td>, <th>가 있음 [표 11-12] 표 태그 [표 11-13] table 태그 속성
03. HTML 응용 실습 11-6 표 만들기 <table bgcolor="yellow" border="1" height="100" width="300"> <tr> <td>이름</td> <td>성별</td> </tr> <td>김경신</td> <td>남</td> </table> [그림 11-24] 실행 결과
03. HTML 응용 실습 11-8 표 정렬하고 병합하기 <table border=1 height=100 width=300> <tr> <td ROWSpan=3 align="center">11</td><td>12</td><td align="center">13</td> </tr> <td COLSpan=2 align="center">22</td> <td>32</td><td>33</td> </table> [그림 11-26] 실행 결과
03. HTML 응용 프레임 웹 브라우저 전체 화면을 수직이나 수평 영역으로 분리하여 각 영역에 글이나 이미지가 나타나도록 구성. 이렇 게 나누어진 각각의 영역을 가리킴 프레임의 전체 구조를 정의하여 놓은 것은 프레임셋(frameset) Cols 화면을 세로로 나눌 때 왼쪽과 오른쪽의 폭을 쉼표로 구분하여 지정. 픽셀 혹은 %로 표현 (%는 화면의 상대적 비율로 전체는 100) rows 화면을 가로로 나눌 때 위쪽과 아래쪽의 높이를 쉼표로 구분 <frameset> 태그에서 rows 속성을 200과 그 나머지로 분할하도록 지정하면 프레임을 수평으로 분할 FRAMEBORDER 프레임 경계선의 두께를 지정. 속성값이 no일때는 경계선을 표시하지 않고, 특정 숫자를 지정이 선의 두께. [표 11-14] frame 태그 속성
03. HTML 응용 프레임 태그 프레임은 하나의 창 또는 처리 단위로써 하나의 화면에 여러 개가 존재 가능 프레임태그는 브라우저 화면을 제작자가 원하는 형태로 갈라서 각각 서로 다르게 동작하게 만들어주는 태그 프레임이 있는 홈페이지를 작성할 때는 프레임의 내용이 담긴 파일을 하나 만들어야 함
03. HTML 응용 실습 11-9 프레임 분할하기 <html> <head><title>수직/수평으로 나누기</title> </head> <frameset rows="100,*"> <frame> <frameset cols="50%,*"> </frameset> </html> [그림 11-29] 실행 결과
03. HTML 응용 실습 11-11 다중 프레임 문서 만들기 교재 384페이지를 참조하여 다음과 같은 기능을 가진 HTML 문서를 작성 4개의 프레임으로 구성되는 화면, 왼쪽과 오른쪽으로 나누어지고 다시 오른쪽 프레임이 위아래로 나누어진 구성 이때 왼쪽 프레임에는 네이버와 패스파인더로 이동하는 2개의 하이퍼링크. 네이버 링크를 클릭하면 오른쪽 위 프레임에 네이버 사이트가 나타나고, 패스파인더 링크를 클릭하면 오른쪽 아래 프레임에 패스파인더 사이트가 나타나도록 구성. [그림 11-31] 다중 프레임 실습
03. HTML 응용 플로팅 프레임 플로팅 프레임은 현재 조회하고 있는 웹 브라우저 속에서 또 다른 웹 브라우저가 실행되는 것 다른 말로 아이프레임(iframe). <iframe> 태그는 src, width, height 속성이 있음. src : 프레임 내에 새로운 프레임으로 들어가는 플로팅 프레임의 문서 주소를 값으로 가짐. Daum 웹사이트가 현재의 웹 브라우저 내에서 나타나도록 하는 코드 width : 플로팅 프레임의 폭의 길이를 설정. Daum 웹사이트가 현재의 웹 브라우저 내에서 폭 600, 높이 300 픽셀 값으로 나타나도록 하는 코드 <iframe SRC="http://www.daum.net"></iframe> <iframe SRC="http://www.daum.net" width=600 height=300> </iframe>
03. HTML 응용 실습 11-12 플로팅 프레임 문서 만들기 <html> <head> <title>iframe이란?</title> </head> 여기는 iframe태그를 이용한 새로운 프레임입니다.<br> <iframe SRC="http://www.daum.net" width=600 height=300> </iframe> <br>여기까지가 iframe영역입니다. </html> [그림 11-32] 플로팅 프레임
03. HTML 응용 입력 양식(Form) 정의 아이디와 패스워드를 입력하는 화면처럼, 사용자에게 무엇인가를 입력하게 하는 것을 입력 양식, 혹은 폼 (Form)이라고 부름 속성 폼 태그는 <input> 태그를 기본으로 일반 텍스트, 비밀번호, 체크박스, 라디오 버튼 등의 입력 방법을 속성으 로 지정 가능 [표 11-15] form 태그 속성
03. HTML 응용 실습 11-13 type의 여러 가지 속성값 알아보기 텍스트 입력 양식 : text 사용자의 문자 입력을 받아들이는 속성값. size를 이용하여 글자의 크기를 지정할 수 있고, value를 이용 하여 초깃값을 지정 가능 비밀번호 입력 양식 : password 비밀번호를 입력하게 만드는 속성값. 이 속성을 넣으면 화면에 입력 시 글자가 표시되지 않음 [그림 11-33] 텍스트 입력 양식 [그림 11-34] 비밀번호 입력양식
HTML 폼 태그 3.1 입력 양식 태그 만들기 3.2 폼 태그 만들기
3.1 입력 양식 태그 만들기 입력 양식에서 사용하는 태그 버튼, 텍스트박스, 텍스트 상자, 체크상자, 선택 라디오버튼, 옵션 선택 상자, 숨김(hidden) 입력 태그 버튼 태그 어떠한 내용에 대한 의견만을 참고하기 위해서 사용 텍스트 박스 태그 1줄 또는 몇 글자를 입력하기 위한 입력 양식
3.1 입력 양식 태그 만들기 여러 줄 텍스트 상자 태그 데이터 입력 시 한 줄 이상을 입력하고자 할 때 사용 체크 상자 태그 어떤 항목의 값에 대해 체크 하는 폼으로 <INPUT> 태그 내에 TYPE을 checkbox로 지정
3.1 입력 양식 태그 만들기 여러 개 중에서 1개의 값을 선택할 때 사용하는 태그 옵션 상자 태그 라디오 버튼 태그 여러 개 중에서 1개의 값을 선택할 때 사용하는 태그 옵션 상자 태그 라디오 버튼과 같은 기능으로 선택을 하는 태그이며 옵션에 따라서 값을 선택 SELECT 태그를 사용하며, 옵션 값으로 OPTION 태그를 사용
3.1 입력 양식 태그 만들기 전송 버튼을 이미지를 사용하여 표현함 숨김 입력 태그 홈페이지에 나타나지 않는 태그로서 숨겨진 상태로 값을 전송할 때 사용 이미지 전송 버튼 전송 버튼을 이미지를 사용하여 표현함
03. HTML 응용 실습 11-13 type의 여러 가지 속성값 알아보기 텍스트 입력 양식 : text 사용자의 문자 입력을 받아들이는 속성값. size를 이용하여 글자의 크기를 지정할 수 있고, value를 이용 하여 초깃값을 지정 가능 비밀번호 입력 양식 : password 비밀번호를 입력하게 만드는 속성값. 이 속성을 넣으면 화면에 입력 시 글자가 표시되지 않음 [그림 11-33] 텍스트 입력 양식 [그림 11-34] 비밀번호 입력양식
03. HTML 응용 실습 11-13 type의 여러 가지 속성값 알아보기 텍스트 입력 양식 : text 사용자의 문자 입력을 받아들이는 속성값. size를 이용하여 글자의 크기를 지정할 수 있고, value를 이용 하여 초깃값을 지정 가능 비밀번호 입력 양식 : password 비밀번호를 입력하게 만드는 속성값. 이 속성을 넣으면 화면에 입력 시 글자가 표시되지 않음 [그림 11-33] 텍스트 입력 양식 [그림 11-34] 비밀번호 입력양식
03. HTML 응용 체크박스 입력 양식 checkbox는 사용자에게 여러 개의 체크를 입력하는 화면을 제공하는 속성 type 속성에 checkbox가 설정되면 사용자가 체크한 결과가 value로 지정된 변수에 저장되고, 이 변수 값 은 프로그램에서 사용 라디오 버튼 입력 양식 radiobutton은 제공되는 여러 개의 선택 사항 중 오직 1개의 체크만을 받아들일 때 사용되는 속성 [그림 11-35] 체크박스 [그림 11-36] 라디오 버튼
03. HTML 응용 SELECT/OPTION 태그(풀다운 메뉴) <select name="list1"> 풀다운 방식과 리스트 방식은 화면에 여러 개의 항목을 포함하는 콤보박스가 나타나고, 그 나타난 내용 중에 원 하는 것을 마우스로 선택하여 입력하는 방식 풀다운 방식은 <input> 태그가 아닌 <select> 태그와 <option>태그를 이용하여 구현 <select name="list1"> <option> 강남고 </option> <option selected> 강동구 </option> <option> 송파구 </option> <option> 은평구 </option> <option> 노원구 </option> </select> [그림 11-37] 풀다운 메뉴
03. HTML 응용 SELECT/OPTION 태그(리스트 메뉴) 리스트 방식은 풀다운 방식에서 왼쪽 스크롤바가 나타난 형태 구현 방식은 아래 왼쪽 코드 <select name="list1" size=5> <option> 강남구 </option> <option selected> 강동구 </option> <option> 송파구 </option> <option> 은평구 </option> <option> 노원구 </option> <option> 영등포구 </option> <option> 금천구 </option> </select> [그림 11-38] 리스트 메뉴
03. HTML 응용 실습 11-14 메모 입력 상자 만들기 <html> <head> 메모를 입력할 수 있는 메모장과 <확인> 버튼이 있는 화면을 실습 <html> <head> <title>메모 입력 상자 : 독후감</title> </head> 독후감 입력란<p> <textarea name ="memo" rows=12 cols=50> 최근 읽은 책의 독후감을 여기에 적습니다. </textarea> <p> <input type="submit" value="저장"> </html> [그림 11-39] 메모 입력 상자
3.2 폼 태그 만들기 폼(form)은 사용자와 상호작용을 하기 위해서 사용 데이터를 입력 받아 전송해주는 양식을 의미