웹 프로그래밍 및 실습 (web programming & practice) html 개요 최 미정...

웹 프로그래밍 및 실습(Web Programming & Practice)

HTML 개요

최 미정강원대학교 IT 대학 컴퓨터과학전공

Web Programming & Prac-tice

강의 내용HTML 개요

HTML 의 개요

HTML 문서의 기본 구조

HTML 의 구성요소

HTML 편집기

기본적인 HTML 태그

컬러와 그래픽 이미지

하이퍼텍스트 링크

리스트와 테이블

프레임

사운드 ( 오디오 ) 및 동영상


웹 페이지 제작 단계 및 환경HTML 개요

주제와 내용선정주제와 내용선정

디자인디자인

웹 페이지 구조 웹 페이지 구조

저작권 확인저작권 확인

웹 페이지 등록웹 페이지 등록

웹 페이지 홍보웹 페이지 홍보

어떤 내용을 담을 것인지 , 어떤 단계로 제작할 것인지 결정어떤 내용을 담을 것인지 , 어떤 단계로 제작할 것인지 결정

로고 , 아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성로고 , 아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성

웹 페이지 내용을 분류 / 정리 후 구조적으로 구성하여 흐름도나 사이트 맵을 종이에 그려본다 .

웹 페이지 내용을 분류 / 정리 후 구조적으로 구성하여 흐름도나 사이트 맵을 종이에 그려본다 .

자바 스크립트나 그림 등을 사용할 때 , 저작권에 대한 내용에 주의자바 스크립트나 그림 등을 사용할 때 , 저작권에 대한 내용에 주의

인터넷 서비스 제공업체인 ISP 의 웹 서버에 등록인터넷 서비스 제공업체인 ISP 의 웹 서버에 등록

검색엔진에 등록하여 모든 사용자에게 홍보검색엔진에 등록하여 모든 사용자에게 홍보


웹 페이지 제작 시 고려사항HTML 개요

웹 페이지 로딩 시간이 10 초 이하로 한다 ( 너무 복잡하지 않게… )

웹 페이지의 제목을 의미 있게 붙인다 .

혼동을 일으키기 쉬운 링크를 만들지 않는다 .

방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성한다 .

좌우 / 상하로 길게 스크롤되는 문서를 만들지 않는다 .

각 페이지마다 이전 / 상위 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 한다 .

사이트내의 링크는 상대 경로를 사용한다 (Portable)

지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않는다

특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아니다 .

웹사이트의 내용이 계속 업데이트 (update) 되어야 한다 .


HTML 개요

HTML: HyperText Markup Language

WWW 상의 문서를 기술하기 위한 언어로서 플랫폼에 관계없이 사용

가능한 하이퍼텍스트 문서를 만들 수 있는 마크업 (markup) 언어

Markup 언어란 ?

• 일반 텍스트 문서에 < > 로 둘러 쌓인 약속된 태그 (tag) 를 붙여 줌으로써 , 특수한

기능을 웹 브라우저로 하여금 인식하여 실행할 수 있도록 지시 해주는 기능을 하는 언어

• 예 : <B> 이것은 굵은 글씨체이다 .</B>

이것은 굵은 글씨체이다 .

HTML 개요


HTML 문서의 기본 구조 (1/2)

HTML 문서는 일반적으로 머리말 (header) 과 본문 (body) 의 두

부분으로 나누어진다 .

<HTML> <head> 머리말 ( 제목 ) (1) HTML 문서의 머리말 부분 </head> <body> 웹 페이지의 본문 (2) HTML 문서의 본문 부분 </body>

</HTML>

HTML 개요


HTML 문서의 기본 구조 (2/2)

HTML 문서 예제

HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


HTML 의 구성 요소

텍스트 (text)

• 웹 문서의 본문에 해당 ( 실제 표현하고자 하는 내용 )

• 사용자가 웹 문서를 읽을 때 , 화면에 나타나는 텍스트 그 자체

태그 (tag)

• 텍스트에 속성 / 기능을 부여하기 위해 문서의 중간 중간에 붙여주는 일종의 꼬리표

• 일반적으로 , ‘<‘ 와 ‘ >’ 로 둘러 쌓아서 표기함 ( 예 : <html>, <table>)

스크립트 (script)

• 간단한 명령어들의 집합

• 동적인 웹 문서 작성이 가능하게 함

• Javascript, Visual Basic Script 등이 있음

텍스트 ( 내용 )텍스트 ( 내용 )

태그태그

스크립트스크립트

HTML 개요


태그의 속성과 종류 (1/2)

HTML 의 이해는 태그의 종류 , 의미 , 속성을 이해하는 것이다 .

태그는 속성 (attribute) 을 가질 수 있다 .

속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하

여 , 웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는

명령의 일부

태그 분류 1: 복합 태그 vs. 단독 태그

• 복합 태그 : 항시 쌍으로 사용되는 태그

• 복합 태그의 예 : <title> ... </title>, <p> ... </p>, <html> ... </html> 등

• 단독 태그 : 쌍으로 사용되지 않고 , 단독으로 사용되는 태그

• 단독 태그의 예 : <br>, <hr> 등

HTML 개요


태그의 속성과 종류 (2/2)

태그 분류 2: 속성을 갖는 태그 vs. 속성을 갖지 않는 태그

• 속성을 꼭 필요로 하는 태그

<a href=“http://www.naver.com"> 네이버 </a> 로 연결

<img src=“./images/mypicture.jpg">

• 속성이 옵션으로 사용되는 태그 : <hr noshade> 등

• 속성을 가지지 않는 태그 : <em> ... </em> 등

HTML 개요


태그의 특성

대 / 소문자 구별이 없다 . 즉 , <BR>, <Br>, <br> 은 모두 같은

태그로 인식

복합 태그들은 엇갈려서 사용할 수 없다 .

• 잘못 사용한 예 : <big><blink> 엇갈린 예제 </big></blink>

• 바르게 사용한 예 : <big><blink> 올바른 예제 </blink></big>

포함할 수 없는 태그는 포함시켜서는 안 된다 .

• 잘못 사용한 예 : <h1><h2> 틀렸어요 ! </h2></h1>

• 바르게 사용한 예 : <h1> 옳아요 ! </h1> 또는 <h2> 또 옳아요 ! </h2>

• Why? <hn> 태그는 글자 크기를 조정하는데 , 포함해서 쓰면 의미가 혼동됨

HTML 개요


스크립트 (script)

웹 브라우저가 이해하는 간단한 명령어들의 집합

HTML 문서 내에 포함시켜 동적인 웹 문서 작성이 가능

자바 스크립트와 비쥬얼베이직 스크립트 사용가능

HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


HTML 편집기 (1/3)

텍스트 기반 편집기

• 메모장 , 아래아한글 , MS 워드 , editplus

HTML 개요



텍스트 기반 편집기 ( 계속 )

HTML 개요



WYSIWYG 방식 편집기

• 드림위버 (매크로미디어社 ), 나모 웹 에디터 , 프론트페이지 (MS)

HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


텍스트 기반 에디터 사용 ?

WYSIWYG 편집기를 사용하지 않는 이유

• HTML 태그를 익힐 수 없다 . ( 태그를 몰라도 HTML 문서 작성이 가능하기 때문 )

• WYSIWYG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다 .

• WYSIWYG 으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다 .

제안하는 바는…

• 여러분은 텍스트 기반 에디터 ( 메모장 , editplus) 로 HTML 태그를 익히시기 바랍니다 .

• 태그가 익숙해졌다면 , 추후에는 WYSIWYG 편집기로 HTML 문서를 만드세요 .

• HTML 태그를 잘 알고 있다면 , WYSIWYG 편집기로 만든 문서도 , 에디터로 수정하여 ,

보다 간결하고 보기 좋게 만들 수 있습니다 .

HTML 개요


첫 번째 HTML 문서

메모장을 열고 다음과 같이 입력하고 first.html 로 저장

<html>

<head>

<title> 간단한 실습 </title>

</head>

<body>

안녕하세요 ? <br>

첫 번째 실습입니다 .

</body>

</html>

HTML 개요


문서 구조 태그 (1/5)

<html> …. </html>

• HTML 문서 형식으로 작성되었음을 나타냄

• 모든 HTML 문서는 <HTML> 로 시작하여 </HTML> 로 끝남

<head> …. </head>

• HTML 문서의 머리말 (header) 영역

• HEAD 에 사용되는 전용태그 : <TITLE>, <BASE HREF="...">, <LINK>, <NEX-

TID>, <META>, <RANGE>, <STYLE>, <ISINDEX>

<title> …. </title>

• 문서의 제목을 브라우저 화면의 타이틀 바에 표시

• 통상 <head> 와 </head> 사이에 위치함

• 브라우저에서 북마크 (bookmark)했을 때 , 북마크 제목으로 사용됨

HTML 개요



<title> …. </title> 사용 예

HTML 개요



<body> …. </body>

• HTML 문서의 주가 되는 본문 영역 ( 문서의 실제 내용 부분 )

<body> 의 속성 (attribute)

태그 기능 De-fault

background = “ 그림파일” 이미지 ( 그림 ) 파일을 지정해 주면 그 이미지가 웹

문서의 배경이 된다 . 없음

bgcolor = “# 색상” 웹 페이지의 배경 색을 지정한다 흰색

text = “# 색상” 웹 페이지에 포함된 일반 글자의 색을 지정 검은색

link = “# 색상” 접속된 적이 없는 하이퍼링크된 글자 부분의 색을 지정 파란색

vlink = “# 색상” 과거에 접속해 본적이 있는 하이퍼링크된 글자 부분의

색을 지정보라색

alink = “# 색상” 하이퍼링크된 글자를 마우스 버튼으로 누르고 있을

때의 색을 지정빨간색

HTML 개요



<body> 의 속성 사용 예

HTML 개요

: 주석

• 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음

• 여러 줄에 걸쳐서 사용할 수 없음에 주의

HTML 개요


환경 정보 전달을 위한 태그

<base href = “… path …”>

• 규정되는 HTML 문서의 기본 주소 ( 상대 주소 ) 를 알려준다 .

• 해당 HTML 문서가 읽혀질 URL 을 지정해 주는데 사용

• <BASE HREF="...."> 태그를 지정하면 HTML 문서 안에 있는 모든 URL 은

<BASE HREF="...."> 태그에서 지정된 URL 로부터 상대적인 경로를 가지게 됨

HTML 개요


문단 설정을 위한 태그 (1/7)

<p>

• 단락이 시작되는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분

• 중복 사용해도 한번만 적용

• 속성 : align = left | right | center

<p> 태그 내부에 들어간 단락의 내용을 정해진 위치로 정렬

<br>

• Break 의 약어

• 문장에서 줄 바꾸기 기능

HTML 개요



<p>, <br> 의 사용 예제

HTML 개요



<pre>

• 입력한 내용 그대로를 웹 브라우저 화면에 출력 ( 공백 유지 , html 태그 무시 )

HTML 개요



<hr>: horizontal ruler

• 웹 페이지 안에 선을 그리거나 경계선을 나타낼 때 사용

• 문단을 구분하는 가로선 ( 수평선 ) 으로 많이 사용

• 종료 태그가 없는 단독 태그

• <hr size = pixel width = pixel 또는 %>

속 성 기능

SIZE = n 가로선의 두께를 n 개의 픽셀 단위로 지정

WIDTH = n | % 가로선의 길이를 n 개 혹은 % 의 픽셀 단위로 지정

ALIGN = LEFT 가로선의 정렬 방식을 지정하여 정렬

NOSHADE 가로선의 음영효과를 없애 준다 .

HTML 개요



<hr> 사용 예제

HTML 개요



<center> … </center>

• 태그 안에 포함되는 모든 내용을 브라우저 화면의 중앙으로 정렬

<nobr> … </nobr>

• No line break 의 약어

• 웹 브라우저에 의해서 임으로 줄 바꿈이 일어나지 않도록 함

HTML 개요



<nobr> … </nobr> 의 예제

HTML 개요


특별한 텍스트를 규정하기 위한 태그 (1/2)

<blockquote> … </blockquote>

• 웹 페이지에 인용한 단락을 표시할 때 사용

• 인용할 내용을 좌우에 적당한 여백을 주어 본문과 구분

HTML 개요


특별한 텍스트를 규정하기 위한 태그 (2/2)

<address> … </address>

• 웹 페이지 안에서 전자우편 (e-mail) 주소를 표기할 때 사용

HTML 개요


글자의 크기 지정을 위한 태그 (1/4)

<Hn> … </Hn>

• 주로 제목이나 머리글 글자의 크기를 지정할 때 사용

• n = 1(큰글자 ) ∼ 6( 작은글자 )

• 줄 바꿈 기능제공 자동적으로 라인 브레이크 적용됨

HTML 개요



<basefont size=“n”>

• 기본 폰트 크기 ( 기본 값이 3) 를 적용

• n = 1∼7

HTML 개요



<font> … </font>: 폰트를 지정 /변경하는 태그

<font> 의 속성

• SIZE = n ( 예 : < font size = 5>)

일반 HTML 문서의 폰트 ( 글꼴 ) 의 크기를 지정할 때 사용

N = 1∼7 (default = 3)

기본 폰트는 숫자 앞에 + 또는 - 를 붙여서 폰트의 크기를 상대적으로 지정도 가능

• COLOR = “color” ( 예 : <font color=“red”>)

폰트 ( 글꼴 ) 의 컬러를 지정하는데 사용

색깔 이름을 주거나 , 컬러 코드를 줄 수 있음 ( 컬러 코드는 다음에 설명 )

• FACE = “face” ( 예 : <font face=“굴림체”>)

텍스트를 표시하는데 사용할 글꼴을 지정하는데 사용

“ 굴림” , “돋움” , “궁서” , “ 바탕”

HTML 개요



<font> 이용 예제

HTML 개요


문자열의 물리적 스타일 지정 태그 (1/2)

글자를 표현할 때 , 글자체를 직접적으로 지정하여 출력

<i> … </i> 글자를 이탤릭 (italic) 체로 지정

<b> … </b> 글자를 볼드 (bold) 체로 지정

<u> … </u> 글자를 밑줄 (underline) 문자로 지정

<tt> … </tt> 글자를 통신문 (teletype) 체로 지정 ( 타자기

체 )

<sup> … </sup> 글자를 위 첨자 (superscript) 로 지정

<sub> … </sub> 글자를 아래 첨자 (subscript) 로 지정

<s> … </s> 글자를 삭제문자 (strike through) 체로 지정

HTML 개요


문자열의 물리적 스타일 지정 태그 (2/2)HTML 개요


문자열의 논리적 스타일 지정 태그 (1/3)

글자로 표현된 문장의 내용에 따라 , 글자를 특징지어 구분하여 출력

<em> … </em> 문자를 강조 (emphasis), 이탤릭체

<strong> … </strong> 문자를 강하게 표현 , 볼드체

<dfn> … </dfn> 정의 (definition) 에 해당 , 이탤릭체

<cite> … </cite> 책 , 논문 등을 인용 , 이탤릭체

<samp> … </samp> 상태 메시지 / 예제 , 고정폭 일반글씨체

<code> … </code> 프로그램 코드 , 고정폭 일반글씨체

<kbd> … </kbd> 키보드 입력 문구 , 고정폭 일반글씨체

HTML 개요


문자열의 논리적 스타일 지정 태그 (2/3)

<var> … </var> 변수 (variable) 이름을 표현 , 이탤릭체

<au> … </au> 저자 (author) 이름을 표현 , 보통 글자체

HTML 개요


문자열의 논리적 스타일 지정 태그 (3/3)HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


컬러코드와 RGB (1/4)

컬러 ( 색깔 ) 를 지정하는 두 가지 방법

• 컬러의 이름을 직접 지정 ( 예 : red, black, yellow)

• 컬러 코드를 이용

RGB (Red, Green, Blue) 빛의 삼원색

• 각 원색은 0(00)~255(FF) 의 256 단계의 컬러를 제공

• 0 은 컬러 요소가 전혀 없으며 , 255 는 가장 짙은 요소를 나타냄

• 예 ) 000000: black, FF0000: red, 00FF00: green, 0000FF: blue, FFFFFF: white

컬러 코드 알아내기 1: 컬러 차트 (color chart) 이용

• 컬러 챠트에는 다양한 컬러들의 견본과 각 컬러들의

코드가 나와 있음

• 검색 엔진을 통해 인터넷에서 쉽게 구할 수 있음

HTML 개요



http://www.tbi.univie.ac.at/TBI/

hex_color_chart.png

HTML 개요


컬러코드와 RGB (3/4)HTML 개요



컬러 코드 알아내기 2: 색깔을 컬러 코드로 변환하는 도구 이용

• 색깔을 선택하면 컬러 코드를 알려주는 웹 사이트 이용

• 대표적 사이트 : http://www.zspc.com/color

HTML 개요


이미지 파일의 종류 및 특성 (1/5)

이미지는 텍스트에 비해 용량이 크기 때문에 , 웹 문서의 로딩 시 시간이

걸릴 수 있음

이미지 저장 방식

• 비트맵 (bitmap) 그래픽 파일

• 벡터 (vector) 그래픽 파일

HTML 개요



비트맵 (bitmap) 그래픽 파일

• 모니터에 나타나는 개개의 점 ( 화소 , pixel) 에 대응하는 칼라 값을 저장한 파일

• 이미지의 크기와 사용된 컬러가 파일을 저장할 때 고정

• 처리 속도는 빠르나 , 기억공간을 많이 차지하고 이미지의 크기나 칼라를 변경하기

힘든 단점이 있음 ( 아래 확대 예제 참조 )

• 대표적인 포맷으로는 GIF, PCX, JPEG, BMP 등이 있음

• 관련 프로그램 : 포토샵 또는 페인트샵 프로

원본

확대

HTML 개요

http://www.google.co.kr/search?source=kwh&ct=rcp&cs=4&q=%EA%B9%80%EC%97%B0%EC%95%84%EB%8A%94+%EC%84%B1%EC%9D%B8%EA%B5%B0%EC%9E%90

http://www.google.co.kr/search?source=kwh&ct=rcp&cs=4&q=%EA%B9%80%EC%97%B0%EC%95%84%EB%8A%94+%EC%84%B1%EC%9D%B8%EA%B5%B0%EC%9E%90



Adobe Photoshop

HTML 개요



벡터 (vector) 그래픽 파일

• 이미지를 그리는 방법과 순서를 저장한 파일 ( 이미지를 벡터로 표시 ) 임

• 수정이 용이함

• 수학적인 계산에 의해 만들어지기 때문에 , 컴퓨터를 이용한 디자인과 CAD 설계

분야에서 폭넓게 사용

• 웹 페이지에는 비트맵 파일만 사용가능

• 코렐드로우 (coreldraw) 또는 일러스트레이터 (illustrator)

원본

확대

HTML 개요



Coreldraw

Illustrator

HTML 개요


그래픽 파일 포맷 (1/4)

GIF (Graphics Interchange Format)

• ( 원래 목적 ) 인터넷에서 그래픽 교환 표준으로 사용

• Compuserve 라는 온라인 정보 서비스 회사에서 개발

• 8 비트 색상 (256 color) 과 투명한 이미지 지원

• 사진이나 그림 등 많은 컬러를 필요로 하는 이미지에는 부적합

• 텍스트와 어울려 본문을 꾸미는 이미지에는 GIF 파일이 적당

• ( 인터레이싱 (interlacing) 기술을 사용하여 ) 간단한 애니메이션도 가능

• GIF 사용이 좋은 경우

아이콘이나 로고 같은 색상이 적은 이미지

사진 이미지라도 크기가 작은 이미지

설계도나 다이어그램 , 벡터 그래픽을 변환한 이미지

배경을 투명하게 처리하는 능력이 있으므로 , 투명 속성이 필요한 이미지

HTML 개요



GIF 이미지 예제

HTML 개요



JPG, JPEG (Joint Photographic Expert Group)

• 파일의 크기를 최소화하기 위해 만들어진 것으로 , GIF 와 달리 항상 트루컬러로

되어있는 이미지만을 저장

• 24 비트 컬러를 모두 표현할 수 있으며 압축 기술이 뛰어남

• 부드러운 컬러 변환을 가진 이미지 , 즉 손으로 그린 그림이나 사진과 같은 이미지

• JPEG 사용이 좋은 경우

많은 컬러를 필요로 하는 이미지

부드러운 컬러 변환을 가진 이미지

브라우저 화면을 가득 채울 정도로 큰 이미지 ( 용량이 적고 전송속도가 빠름 )

HTML 개요



JPEG 이미지 예제

HTML 개요


HTML 문서에 이미지 삽입 (1/4)

<img src = “… image path …”> ( 대개 </img> 는 생략 )

속성 내용

SRC = “ 이미지 파일” • 이미지 태그에 꼭 있어야 할 속성이며 출력할 이미지 파일명을 지원

ALIGN = “TOP” | “BOT-TOM” | “MIDDLE” | “LEFT” | “RIGHT”

• 이미지와 이웃한 텍스트를 정렬하는 방식을 지정

ALT = “ 문자열”• 이미지를 볼 수 없는 텍스트 기반 웹브라우저를 사용하여 접속한 사람들을

위하여 이미지 대신에 보여줄 메시지를 지정해 주는 것

• 이미지 대신에 나타날 문자열을 지정한다 .

WIDTH = n ( 또는 n%) • 이미지의 가로 방향의 크기를 임의로 지정

HEIGHT = n ( 또는 n%) • 이미지의 세로 방향의 크기를 임의로 지정

HSPACE = n, VSPACE = n • 이미지와 주위의 다른 요소와의 수평간격과 수직간격을 픽셀 단위로 지정

BORDER = n

• 이미지 테두리선의 굵기를 픽셀 단위로 지정

• 0 으로 지정하면 이미지가 링크되어 있어도 테두리 선이 나타나지 않으며 ,

BORDER 의 속성을 지정하지 않고 생략하면 링크가 되어 있지 않은

이미지는 테두리 선 없이 이미지만을 출력

HTML 개요



이미지 태그 사용 예제

HTML 개요



애니메이션 GIF (Animated GIF)

• “ 움직이는 GIF” 또는 “움직이는 이미지”

• 만화를 만들 때 여러 종이를 조금씩 넘겨가면서 움직이는 원리

• 한 개의 파일에 여러 개의 이미지를 담는 기능

HTML 개요



애니메이션 GIF 사용 예제

HTML 개요


이미지 맵 (1/4)

한 개의 이미지 파일에 여러 개의 링크를 ( 영역 별로 ) 할당하는 기술

그림에 하나의 링크만을 연결한 것이 아니라 , 그림의 부분들이 각각

다른 링크로 연결하는 기술

링크와 연결된 이미지의 영역을 핫스팟 (hotspot) 이라 함

정의하고자 하는 영역의 모양에 따라 사각형 (rectangle), 원 (circle),

다각형 (polygon) 의 세 가지 종류를 사용

HTML 개요


이미지 맵 (2/4)

<map name=“ 맵 레이블”> … </map>

• 이미지 맵을 사용하기 위한 이미지 맵 정보를 정의

• “맵 레이블”은 이미지 맵을 여러 이미지에서 해당 이미지 맵을 식별

• “맵 레이블”은 <img> 태그 내에 속성으로 정의

<img src=“…” usemap = “# 맵 레이블”>

HTML 개요


이미지 맵 (3/4)

<area>

• SHAPE = “RECT” | “CIRCLE” | “POLYGON”

이미지에서 링크 시키고자 하는 영역의 모양을 지정

• HREF = “.…”

정의된 영역을 마우스로 클릭했을 때 연결될 문서의 URL 을 지정

• COORDS = “.…”

SHAPE 에 따른 영역의 실제 좌표를 정의

실제 이미지에서 왼쪽 위의 좌표를 (0, 0) 으로 잡았을 때의 상대좌표

RECT 인 경우 : x1, y1, x2, y2 (x1, y1: 왼쪽 위 꼭지점 , x2, y2: 오른쪽 아래

꼭지점 )

CIRCLE 인 경우 : x, y, r

POLYGON 인 경우 : x1, y1, x2, y2, …, xN, yN, x1, y1

HTML 개요


이미지 맵 (4/4)

이미지 맵 사용 예

HTML 개요


Homework #2 ( 실습 #1)HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


하이퍼텍스트 링크 (1/3)

다른 문서 (혹은 문서 내 다른 위치 ) 와의 연결 기능 제공

하이퍼텍스트 링크를 이용해 할 수 있는 일

• 사용자를 다른 웹 페이지로 이동시킨다 .

• 사용자를 현 웹 페이지의 특정한 위치로 이동시켜 준다 .

• 파일을 다운로드 받을 수 있게 하거나 이미지 파일을 보여준다 .

• 전자우편을 보낼 수 있도록 한다 .

• ftp 서버에 접속하거나 뉴스그룹으로 연결시킨다 .

HTML 개요



앵커 (anchor) 태그 : <a> … </a>

• <A HREF = “ 연결하고자 하는 곳의 ( 주소 또는 문서의 ) URL”> 텍스트 내용 </a>

• HREF: hypertext reference 의 약어

HTML 개요



문서 내 연결

• <A HREF = “# 문서 내에서 찾아가야 할 지점의 레이블”> 텍스트 내용 </a>

• <A NAME = “ 지점의 레이블”> 텍스트 내용 </a>

HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


리스트 ( 목록 ) 태그

리스트 태그의 종류

• 불릿 (bullet) 리스트

• 번호 (number) 리스트

• 정의 (definition) 리스트

불릿 리스트

• 첫 번째 항목

• 두 번째 항복

• 세 번째 항목

번호 리스트

1. 첫 번째 항목

2. 두 번째 항복

3. 세 번째 항목

정의 리스트

축구 11 명이 경기한다 .

야구 9 명이 경기한다 .

농구 5 명이 경기한다 .

HTML 개요


불릿 리스트 (1/3)

가장 일반적인 형태의 리스트 (불릿문자 )

각 항목의 끝 부분에는 자동으로 라인이 나누어짐

불릿 리스트 시작 /끝 태그 : <ul> … </ul> (ul: unordered list)

• 목록 앞에 숫자 대신에 기호를 붙여서 순서 없는 목록을 만들 때 사용

• 블릿 리스트의 내부에 또 다른 블릿 리스트를 넣는 것이 가능 ( 중첩된 블릿 리스트 )

<ul> 의 속성

• <UL type = circle | square | disc> .... </UL>

• Circle = ○, square = ■, disc = ●

HTML 개요


불릿 리스트 (2/3)

각 항목 (list item) 의 시작 /끝 태그 : <li> … </li>

(불릿 리스트에서 ) <li> 의 속성

• <LI type = circle | square | disc> .... </LI>

• Circle = ○, square = ■, disc = ●

참고 : 속성이 영향을 미치는 범위

• <ul>(혹은 <ol>) 에서의 속성은 목록 전체에 영향을 주는 반면에 ,

• <li> 에서의 속성은 해당 항목에만 영향을 준다 .

HTML 개요


불릿 리스트 (3/3)HTML 개요


번호 리스트 (1/3)

목록 앞에 숫자가 붙어서 그 순서를 가지는 목록을 만들 때 사용

번호 리스트 시작 /끝 태그 : <ol> … </ol> (ol: ordered list)

• 목록 앞에 숫자를 붙여서 순서를 갖는 목록을 만들 때 사용

• 리스트의 내부에 또 다른 리스트를 넣는 것이 가능 ( 중첩된 불릿 /번호 리스트 )

<ol> 의 속성

• <OL type = “A” | “a” | “I” | “I” | “1”> .... </OL>

• “A” 대문자 알파벳 (A, B, C, …)

• “a” 소문자 알파벳 (a, b, c, …)

• “I” 대문자 로마 숫자 (I, II, III, …)

• “i”소문자 로마 숫자 (i, ii, iii, …)

• “1” 아라비아 숫자 (1, 2, 3)

HTML 개요


번호 리스트 (2/3)

<ol> 의 속성 ( 계속 )

• <OL start=n> .... </OL>

• 리스트의 시작 번호를 명시

각 항목 (list item) 의 시작 /끝 태그 : <li> … </li> (<ul> 과 동일한

내용 )

(번호 리스트에서 ) <li> 의 속성

• <LI type = “A” | “a” | “I” | “I” | “1”> .... </LI>

• <LI value = n>: 번호를 임의로 부여하고 싶을 경우

참고 : 속성이 영향을 미치는 범위 (<ul> 과 동일한 내용 )

• <ol>(혹은 <ul>) 에서의 속성은 목록 전체에 영향을 주는 반면에 ,

• <li> 에서의 속성은 해당 항목에만 영향을 준다 .

HTML 개요


번호 리스트 (3/3)HTML 개요


정의 리스트 (1/2)

태그 내에서 리스트 항목을 정의하는 태그 (<dt>) 와 이 항목을

설명하는 태그 (<dd>) 를 가지고 있음

정의 리스트 시작 /끝 태그 : <dl> … </dl> (dl: definition list)

• <dl> 태그는 내부에서 <dt> 와 <dd> 태그를 사용함

• <dt> 와 <dd> 태그는 반드시 짝을 이루어 사용되어야 함

<dt> … </dt> (dt: definition term)

• 리스트의 정의 항목을 나타냄

<dd> … </dd> (dd: definition description)

• 리스트의 정의 항목에 대한 설명을 나타냄

HTML 개요


정의 리스트 (2/2)HTML 개요


테이블 (1/6)

<table> … </table>

• 테이블의 시작과 끝을 알림

• 테두리를 지정하지 않고 사용하면 문서를 보기 좋게 정렬하는 용도로도 사용

속성 내용

BORDER = n (default = 0)• 테이블 바깥쪽 테두리의 굵기는 픽셀 단위로 지정• 투명한 도표 (border = 0) 는 문장을 정렬할 때 또는 다단으로 편집

WIDTH = n | n% • 테이블 안에 있는 셀의 너비를 픽셀 또는 % 단위로 지정

HEIGHT = n | n% • 테이블 안에 있는 셀의 세로 길이 (폭 ) 를 픽셀 % 단위로 지정

CELLSPACING = n (default = 1) • 테이블 전체의 선의 굵기를 픽셀 단위로 지정

CELLPADDING = n (default = 2) • 셀 안에 입력된 데이터 사이의 간격을 픽셀 단위로 지정

BGCOLOR=“color” • 테이블 전체의 배경 컬러를 지정

HTML 개요


테이블 (2/6)

<caption> … </caption>

• 캡션이란 ? 테이블에 대한 간단한 설명 ( 제목 )

• 테이블의 위 또는 아래에 캡션을 설정

• ALIGN = TOP | BOTTOM (TOP: 테이블 위 , BOTTOM: 테이블 아래 )

<tr> … </tr>

• Table Row 의 약어로서 테이블의 새로운 행 (줄 ) 이 시작

• 새로운 행 (줄 ) 이 시작될 때마다 <TR> 태그를 반드시 지정

• ALIGN = LEFT | RIGHT | CENTER

Table 내에서 데이터를 각각 좌측 , 우측 , 중앙 정렬을 지정

• VALIGN = TOP | BOTTOM | MIDDLE

<TR> 태그가 만들어낸 열에 포함되어 있는 셀들의 데이터를 수직 정렬 방법

HTML 개요


테이블 (3/6)

<td> … </td>

• 테이블의 셀을 정의하는 태그 (셀에 들어갈 내용의 앞뒤에 사용되는 태그 )

속성 내용

ALIGN = LEFT | RIGHT | CENTER(default = LEFT)

셀 내에서 데이터를 정렬하는 방법을 결정

VALIGN = TOP | BOTTOM | MID-DLE (default = MIDDLE)

셀 내에서 데이터를 수직 정렬하는 방법을 결정

COLSPAN = n (default = 1) 현재의 셀이 다른 행의 셀과 오른쪽으로 병합

ROWSPAN = n (default = 1) 현재의 셀이 다른 열의 셀과 아래쪽으로 병합

NOWRAP셀 내의 내용이 길면 웹 브라우저가 자동으로 줄 바꿈을 하여 출력하게 되는데 이러한 줄 바꿈 현상이 일어나지 않도록 함

BGCOLOR 셀의 배경 컬러를 지정

WIDTH (or HEIGHT) = n | n% 셀의 높이나 너비를 지정

HTML 개요


테이블 (4/6)

<th> … </th>

• Table Heading 을 의미

• (<td> 와 기능이 같으나 ) 테이블의 헤더의 셀을 나타내기 위해 사용

• <td> 대신 <th> 로 지정해 주면 , 글자체가 볼드 (bold) 로 나타나고 ,

기본적으로 중앙 정렬로 화면에 나타남

HTML 개요


테이블 (5/6)

테이블 관련 태그 정리

<TABLE>

<TR>

<TH>

<TD>

[ 표 1] 강원대학교 컴퓨터과학전공 성적 분포

<CAP-TION>

HTML 개요


테이블 (6/6)HTML 개요


테이블의 다양한 활용

테이블을 이용하여 독특한 제목 (heading) 을 만들 수 있음

테이블을 이용하여 간단히 3차원 음영이 추가된 이미지의 테두리를

만들 수 있음

테이블을 이용해 본문의 너비를 사용자가 원하는 대로 지정할 수 있음

본문의 너비가 긴 경우에 테이블을 응용하여 본문의 단을 나누어 다단

편집을 하는 것이 좋음

HTML 개요


강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


프레임 (1/5)

프레임

사용

예제

프레임 A 프레임 B 프레임 C

HTML 개요


프레임 (2/5)

프레임이란 ? 웹 브라우저의 윈도우를 여러 개로 나누어 각 윈도우에서

다른 웹 페이지를 보여주는 역할을 함

일반 HTML 문서와의 차이

• 일반 HTML 문서에서는 <body> 태그를 포함함

• 프레임 문서에서는 <frameset> 이 대신 사용됨

<html>

<head><title>...</title></head>

<body>

... 웹 페이지 본문 ...

</body>

</html>

<html>

<head><title>...</title></head>

<frameset>

... 프레임 선언 ...

</frameset>

</html>

일반 웹 페이지 구조 프레임 문서 구조

HTML 개요


프레임 (3/5)

<FRAMESET ROWS = "...." | COLS = "...."> ....</FRAMESET>

• <BODY> 태그 대신 사용하기 때문에 <BODY> 가 없는 특징을 가짐

• 화면 분할에 대한 정보를 정의할 뿐 , 실제로 화면에 출력되는 내용을 담고 있지는 않음

• 속성 (ROWS, COLS) 을 사용하여 화면을 분할하여 프레임을 만듦

• % 비율을 이용한 분할 예

ROWS="50%, 50%" : 화면을 가로로 50:50 비율로 분할

COLS="20%, 50%, 30%" : 화면을 세로로 20:50:30 비율로 분할

• 픽셀 수를 이용한 분할 예

ROWS="100,200,*" : 화면을 가로로 100 픽셀 , 200 픽셀 , 그리고 나머지 영역으로

분할

• * 를 이용한 분할 예

ROWS = "2*, *" : 화면을 가로로 2/3 크기와 1/3 크기로 분할

COLS = "*, *, 2*" : 화면을 세로로 1:1:2 의 비율로 분할

HTML 개요


프레임 (4/5)

<FRAME>

• 실제로 지정된 프레임 들어갈 정보를 정의

• <FRAMESET> 태그에 의해 화면이 분할되어 여러 개의 프레임이 생성되면 ,

각 프레임마다 출력할 실제적인 HTML 문서들을 하나씩 지정할 때 사용

속성 내용SRC = "....“ 지정된 프레임에서 보여줄 HTML 문서의 URL 을 지정

MARGINWIDTH = n 해당 프레임의 좌우 여백을 픽셀 단위로 지정

MARGINHEIGHT = n 해당 프레임의 상하 여백을 픽셀 단위로 지정

SCROLLING = AUTO | YES | NO

프레임의 우측과 하단에 스크롤 바를 만들 것인지 아닌지를 결정

NORESIZE이 속성을 지정하면 사용자가 프레임의 크기를 임의로 변경할 수 없음

HTML 개요

Web Programming & Prac-ticePage

100

프레임 (5/5)HTML 개요


101

프레임 (5/5)HTML 개요


102

강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요


103

사운드 ( 오디오 ) (1/5)

샘플링 : 아날로그 사운드를 디지털 데이터로 바꾸는 작업

사운드 에디터 : Cool Edit, GoldWave

HTML 개요


104

사운드 ( 오디오 ) (2/5)

사운드 파일의 종류

• WAVE

마이크로소프트에서 개발한 윈도우즈의 기본 샘플링 파일 , 확장자는 “ .wav”

윈도우 시작 및 종료 시 들리는 효과음

• MIDI (Musical Instrument Digital Interface)

연주에 필요한 정보 ( 음표와 지속시간 ) 만 담고 있음 , 확장자는 “ .mid”

샘플링 사운드에 비해 크기가 작음

• RealAudio

다운로드 받으면서 사운드를 들을 수 있음 ( 스트리밍 ), 확장자는 “ .ra”

• MP3 (MPEG Audio Layer 3)

오디오 데이터의 압축 기술로서 , 고음질의 오디오 압축 기술

압축을 통해 용량이 작아져 , 인터넷을 통해 고품질 음악을 쉽게 주고받을 수 있다 .

HTML 개요


105

사운드 ( 오디오 ) (3/5)

사운드 파일 다운로드 받기

<a href=“ 사운드 파일 이름”> 파일 이름 등 </a>

HTML 개요


106

사운드 ( 오디오 ) (4/5)

음악 들려주기 ( 음악 파일을 play 하기 ): <embed> 태그 사용

• SRC = “ 파일의 URL”

미디파일 (MID) 이나 샘플링 사운드 파일 (WAV, MP3) 의 URL 을 지정

• HIDDEN = TRUE | FALSE (default)

재생기의 인터페이스를 감출지를 결정

• AUTOSTART = TRUE | FALSE (default)

사운드 파일을 자동으로 재생할지를 결정함 (TRUE = 자동 재생 )

• LOOP = n( 반복 횟수 ) | INFINITE

몇 차례나 사운드 파일을 반복 재생할지를 결정

• WIDTH = n, HEIGHT = n

재생기 인터페이스의 너비와 높이를 지정

• 사용 예 : <embed src=“music/song3.mp3” autostart=true, loop=2>

HTML 개요


107

사운드 ( 오디오 ) (5/5)HTML 개요


108

동영상 ( 비디오 ) (1/2)

동영상 파일의 종류

• MPEG (Motion Picture Expert Group) [.mpg]

압축률이 매우 뛰어나고 거의 모든 종류의 컴퓨터에서 지원

압축률을 지정할 수가 있어서 화질의 상태를 선택가능

• QuickTime [.mov]

애플사의 동영상 압축 기술

압축방식의 다양함

• AVI (Audio Video Interleaved)

마이크로소프트의 동영상 파일 포맷

압축률이 낮기 때문에 파일의 크기가 큼

• ASF

마이크로소프트의 스트리밍 (streaming) 미디어 형식

비디오 , 비디오 , 슬라이드 쇼 , 동기화된 이벤트 등을 지원

HTML 개요


109

동영상 ( 비디오 ) (2/2)

동영상 파일 다운로드 : <a href=“ 동영상 파일 이름”> 파일 이름 </

a>

동영상 플레이하기 : <embed src=“ 동영상 파일 이름” … >

HTML 개요


110

동영상 ( 비디오 ) (2/2)

동영상 파일 다운로드 : <a href=“ 동영상 파일 이름”> 파일 이름 </

a>

동영상 플레이하기 : <embed src=“ 동영상 파일 이름” … >

HTML 개요


111

강의 내용

HTML 의 개요



HTML 편집기





프레임


HTML 개요

웹 프로그래밍 및 실습 (web programming & practice) html 개요 최 미정...

Documents