(Web Programming & Practice) 웹 프로그래밍 및 실습 (Web Programming & Practice) HTML 개요 문양세 강원대학교 IT대학 컴퓨터과학전공
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
웹 페이지 제작 단계 및 환경 주제와 내용선정 디자인 웹 페이지 구조 저작권 확인 웹 페이지 등록 웹 페이지 홍보 HTML 개요 주제와 내용선정 어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정 디자인 로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성 웹 페이지 구조 웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을 종이에 그려본다. 저작권 확인 자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의 웹 페이지 등록 인터넷 서비스 제공업체인 ISP의 웹 서버에 등록 웹 페이지 홍보 검색엔진에 등록하여 모든 사용자에게 홍보
웹 페이지 제작 시 고려사항 웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…) HTML 개요 웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…) 웹 페이지의 제목을 의미 있게 붙인다. 혼동을 일으키기 쉬운 링크를 만들지 않는다. 방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성한다. 좌우/상하로 길게 스크롤되는 문서를 만들지 않는다. 각 페이지마다 이전/상위 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 한다. 사이트내의 링크는 상대 경로를 사용한다(Portable) 지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않는다 특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아니다. 웹사이트의 내용이 계속 업데이트(update) 되어야 한다.
HTML 개요 HTML: HyperText Markup Language WWW 상의 문서를 기술하기 위한 언어로서 플랫폼에 관계없이 사용 가 능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어 Markup 언어란? 일반 텍스트 문서에 < >로 둘러 쌓인 약속된 태그(tag)를 붙여 줌으로써, 특수한 기능을 웹 브라우저로 하여금 인식하여 실행할 수 있도록 지시 해주는 기능을 하는 언어 예: <B>이것은 굵은 글씨체이다.</B> 이것은 굵은 글씨체이다.
HTML 문서의 기본 구조 (1/2) HTML 개요 HTML 문서는 일반적으로 머리말(header)과 본문(body)의 두 부분으로 나누어진다. <HTML> <head> 머리말 (제목) (1) HTML 문서의 머리말 부분 </head> <body> 웹 페이지의 본문 (2) HTML 문서의 본문 부분 </body> </HTML>
HTML 문서의 기본 구조 (2/2) HTML 개요 HTML 문서 예제
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
HTML의 구성 요소 텍스트(text) 태그(tag) 스크립트(script) 텍스트(내용) 태그 스크립트 웹 문서의 본문에 해당 (실제 표현하고자 하는 내용) 사용자가 웹 문서를 읽을 때, 화면에 나타나는 텍스트 그 자체 태그(tag) 텍스트에 속성/기능을 부여하기 위해 문서의 중간 중간에 붙여주는 일종의 꼬리표 일반적으로, ‘<‘와 ‘>’로 둘러 쌓아서 표기함 (예: <html>, <table>) 스크립트(script) 간단한 명령어들의 집합 동적인 웹 문서 작성이 가능하게 함 Javascript, Visual Basic Script 등이 있음 텍스트(내용) 태그 스크립트
태그의 속성과 종류 (1/2) HTML의 이해는 태그의 종류, 의미, 속성을 이해하는 것이다. 태그는 속성(attribute)을 가질 수 있다. 속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여, 웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의 일부 태그 분류1: 복합 태그 vs. 단독 태그 복합 태그: 항시 쌍으로 사용되는 태그 복합 태그의 예: <title> ... </title>, <p> ... </p>, <html> ... </html> 등 단독 태그: 쌍으로 사용되지 않고, 단독으로 사용되는 태그 단독 태그의 예: <br>, <hr> 등
태그의 속성과 종류 (2/2) 태그 분류2: 속성을 갖는 태그 vs. 속성을 갖지 않는 태그 속성을 꼭 필요로 하는 태그 HTML 개요 태그 분류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> 태그는 글자 크기를 조정하는데, 포함해서 쓰면 의미가 혼동됨
스크립트(script) 웹 브라우저가 이해하는 간단한 명령어들의 집합 HTML 문서 내에 포함시켜 동적인 웹 문서 작성이 가능 자바 스크립트와 비쥬얼베이직 스크립트 사용가능
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
HTML 편집기 (1/3) HTML 개요 텍스트 기반 편집기 메모장, 아래아한글, MS 워드, editplus
HTML 편집기 (2/3) HTML 개요 텍스트 기반 편집기 (계속)
HTML 편집기 (3/3) WYSIWYG 방식 편집기 드림위버(매크로미디어社), 나모 웹 에디터, 프론트페이지(MS)
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
텍스트 기반 에디터 사용? WYSIWYG 편집기를 사용하지 않는 이유 제안하는 바는… HTML 개요 WYSIWYG 편집기를 사용하지 않는 이유 HTML 태그를 익힐 수 없다. (태그를 몰라도 HTML 문서 작성이 가능하기 때문) WYSIWYG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다. WYSIWYG으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다. 제안하는 바는… 여러분은 텍스트 기반 에디터(메모장, editplus)로 HTML 태그를 익히시기 바랍니다. 태그가 익숙해졌다면, 추후에는 WYSIWYG 편집기로 HTML 문서를 만드세요. HTML 태그를 잘 알고 있다면, WYSIWYG 편집기로 만든 문서도, 에디터로 수정하여, 보다 간결하고 보기 좋게 만들 수 있습니다.
첫 번째 HTML 문서 메모장을 열고 다음과 같이 입력하고 first.html로 저장 <html> <head> <title>간단한 실습</title> </head> <body> 안녕하세요? <br> 첫 번째 실습입니다. </body> </html>
문서 구조 태그 (1/5) <html> …. </html> 모든 HTML 문서는 <HTML>로 시작하여 </HTML> 로 끝남 <head> …. </head> HTML 문서의 머리말(header) 영역 HEAD에 사용되는 전용태그: <TITLE>, <BASE HREF="...">, <LINK>, <NEXTID>, <META>, <RANGE>, <STYLE>, <ISINDEX> <title> …. </title> 문서의 제목을 브라우저 화면의 타이틀 바에 표시 통상 <head>와 </head> 사이에 위치함 브라우저에서 북마크(bookmark)했을 때, 북마크 제목으로 사용됨
문서 구조 태그 (2/5) HTML 개요 <title> …. </title> 사용 예
문서 구조 태그 (3/5) <body> …. </body> HTML 개요 <body> …. </body> HTML 문서의 주가 되는 본문 영역 (문서의 실제 내용 부분) <body>의 속성(attribute) 태그 기능 Default background = “그림파일” 이미지(그림) 파일을 지정해 주면 그 이미지가 웹 문서의 배경이 된다. 없음 bgcolor = “#색상” 웹 페이지의 배경 색을 지정한다 흰색 text = “#색상” 웹 페이지에 포함된 일반 글자의 색을 지정 검은색 link = “#색상” 접속된 적이 없는 하이퍼링크된 글자 부분의 색을 지정 파란색 vlink = “#색상” 과거에 접속해 본적이 있는 하이퍼링크된 글자 부분의 색을 지정 보라색 alink = “#색상” 하이퍼링크된 글자를 마우스 버튼으로 누르고 있을 때의 색을 지정 빨간색
문서 구조 태그 (4/5) HTML 개요 <body>의 속성 사용 예
문서 구조 태그 (4/5) HTML 개요 <body>의 속성 사용 예
문서 구조 태그 (5/5) <!-- …. -->: 주석 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음 HTML 개요 <!-- …. -->: 주석 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음 여러 줄에 걸쳐서 사용할 수 없음에 주의
문서 구조 태그 (5/5) <!-- …. -->: 주석 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음 HTML 개요 <!-- …. -->: 주석 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음 여러 줄에 걸쳐서 사용할 수 없음에 주의
환경 정보 전달을 위한 태그 <base href = “… path …”> HTML 개요 <base href = “… path …”> 규정되는 HTML 문서의 기본 주소(상대 주소)를 알려준다. 해당 HTML 문서가 읽혀질 URL을 지정해 주는데 사용 <BASE HREF="...."> 태그를 지정하면 HTML 문서 안에 있는 모든 URL은 <BASE HREF="...."> 태그에서 지정된 URL로부터 상대적인 경로를 가지게 됨
문단 설정을 위한 태그 (1/7) <p> <br> HTML 개요 <p> 단락이 시작되는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분 중복 사용해도 한번만 적용 속성: align = left | right | center <p> 태그 내부에 들어간 단락의 내용을 정해진 위치로 정렬 <br> Break의 약어 문장에서 줄 바꾸기 기능
문단 설정을 위한 태그 (2/6) HTML 개요 <p>, <br>의 사용 예제
문단 설정을 위한 태그 (3/7) <pre> HTML 개요 <pre> 입력한 내용 그대로를 웹 브라우저 화면에 출력 (공백 유지, html 태그 무시)
문단 설정을 위한 태그 (4/7) <hr>: horizontal ruler HTML 개요 <hr>: horizontal ruler 웹 페이지 안에 선을 그리거나 경계선을 나타낼 때 사용 문단을 구분하는 가로선(수평선)으로 많이 사용 종료 태그가 없는 단독 태그 <hr size = pixel width = pixel 또는 %> 속 성 기능 SIZE = n 가로선의 두께를 n개의 픽셀 단위로 지정 WIDTH = n | % 가로선의 길이를 n개 혹은 %의 픽셀 단위로 지정 ALIGN = LEFT 가로선의 정렬 방식을 지정하여 정렬 NOSHADE 가로선의 음영효과를 없애 준다.
문단 설정을 위한 태그 (5/7) HTML 개요 <hr> 사용 예제
문단 설정을 위한 태그 (6/7) <center> … </center> HTML 개요 <center> … </center> 태그 안에 포함되는 모든 내용을 브라우저 화면의 중앙으로 정렬 <nobr> … </nobr> No line break의 약어 웹 브라우저에 의해서 임으로 줄 바꿈이 일어나지 않도록 함
문단 설정을 위한 태그 (7/7) HTML 개요 <nobr> … </nobr>의 예제
특별한 텍스트를 규정하기 위한 태그 (1/2) <blockquote> … </blockquote> HTML 개요 <blockquote> … </blockquote> 웹 페이지에 인용한 단락을 표시할 때 사용 인용할 내용을 좌우에 적당한 여백을 주어 본문과 구분
특별한 텍스트를 규정하기 위한 태그 (2/2) <address> … </address> HTML 개요 <address> … </address> 웹 페이지 안에서 전자우편(e-mail) 주소를 표기할 때 사용
글자의 크기 지정을 위한 태그 (1/4) <Hn> … </Hn> HTML 개요 <Hn> … </Hn> 주로 제목이나 머리글 글자의 크기를 지정할 때 사용 n = 1(큰글자) ∼ 6(작은글자) 줄 바꿈 기능제공 자동적으로 라인 브레이크 적용됨
글자의 크기 지정을 위한 태그 (2/4) <basefont size=“n”> 기본 폰트 크기(기본 값이 3)를 적용 HTML 개요 <basefont size=“n”> 기본 폰트 크기(기본 값이 3)를 적용 n = 1∼7
글자의 크기 지정을 위한 태그 (3/4) <font> … </font>: 폰트를 지정/변경하는 태그 HTML 개요 <font> … </font>: 폰트를 지정/변경하는 태그 <font>의 속성 SIZE = n (예: < font size = 5>) 일반 HTML 문서의 폰트(글꼴)의 크기를 지정할 때 사용 N = 1∼7 (default = 3) 기본 폰트는 숫자 앞에 + 또는 -를 붙여서 폰트의 크기를 상대적으로 지정도 가능 COLOR = “color” (예: <font color=“red”>) 폰트(글꼴)의 컬러를 지정하는데 사용 색깔 이름을 주거나, 컬러 코드를 줄 수 있음 (컬러 코드는 다음에 설명) FACE = “face” (예: <font face=“굴림체”>) 텍스트를 표시하는데 사용할 글꼴을 지정하는데 사용 “굴림”, “돋움”, “궁서”, “바탕”
글자의 크기 지정을 위한 태그 (4/4) HTML 개요 <font> 이용 예제
문자열의 물리적 스타일 지정 태그 (1/2) 글자를 표현할 때, 글자체를 직접적으로 지정하여 출력 HTML 개요 글자를 표현할 때, 글자체를 직접적으로 지정하여 출력 <i> … </i> 글자를 이탤릭(italic)체로 지정 <b> … </b> 글자를 볼드(bold)체로 지정 <u> … </u> 글자를 밑줄(underline) 문자로 지정 <tt> … </tt> 글자를 통신문(teletype)체로 지정 (타자기체) <sup> … </sup> 글자를 위 첨자(superscript)로 지정 <sub> … </sub> 글자를 아래 첨자(subscript)로 지정 <s> … </s> 글자를 삭제문자(strike through)체로 지정
문자열의 물리적 스타일 지정 태그 (2/2) HTML 개요
문자열의 논리적 스타일 지정 태그 (1/3) 글자로 표현된 문장의 내용에 따라, 글자를 특징지어 구분하여 출력 HTML 개요 글자로 표현된 문장의 내용에 따라, 글자를 특징지어 구분하여 출력 <em> … </em> 문자를 강조(emphasis), 이탤릭체 <strong> … </strong> 문자를 강하게 표현, 볼드체 <dfn> … </dfn> 정의(definition)에 해당, 이탤릭체 <cite> … </cite> 책, 논문 등을 인용, 이탤릭체 <samp> … </samp> 상태 메시지/예제, 고정폭 일반글씨체 <code> … </code> 프로그램 코드, 고정폭 일반글씨체 <kbd> … </kbd> 키보드 입력 문구, 고정폭 일반글씨체
문자열의 논리적 스타일 지정 태그 (2/3) HTML 개요 <var> … </var> 변수(variable) 이름을 표현, 이탤릭체 <au> … </au> 저자(author) 이름을 표현, 보통 글자체
문자열의 논리적 스타일 지정 태그 (3/3) HTML 개요
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
컬러코드와 RGB (1/4) 컬러(색깔)를 지정하는 두 가지 방법 RGB (Red, Green, Blue) 빛의 삼원색 HTML 개요 컬러(색깔)를 지정하는 두 가지 방법 컬러의 이름을 직접 지정 (예: 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) 이용 컬러 챠트에는 다양한 컬러들의 견본과 각 컬러들의 코드가 나와 있음 검색 엔진을 통해 인터넷에서 쉽게 구할 수 있음
컬러코드와 RGB (2/4) http://www.tbi.univie.ac.at/TBI/hex_color_chart.png HTML 개요 http://www.tbi.univie.ac.at/TBI/hex_color_chart.png
컬러코드와 RGB (3/4) HTML 개요
컬러코드와 RGB (4/4) 컬러 코드 알아내기 2: 색깔을 컬러 코드로 변환하는 도구 이용 HTML 개요 컬러 코드 알아내기 2: 색깔을 컬러 코드로 변환하는 도구 이용 색깔을 선택하면 컬러 코드를 알려주는 웹 사이트 이용 대표적 사이트: http://www.zspc.com/color
이미지 파일의 종류 및 특성 (1/5) 이미지는 텍스트에 비해 용량이 크기 때문에, 웹 문서의 로딩 시 시간이 걸릴 수 있음 HTML 개요 이미지는 텍스트에 비해 용량이 크기 때문에, 웹 문서의 로딩 시 시간이 걸릴 수 있음 이미지 저장 방식 비트맵(bitmap) 그래픽 파일 벡터(vector) 그래픽 파일
이미지 파일의 종류 및 특성 (2/5) 비트맵(bitmap) 그래픽 파일 HTML 개요 비트맵(bitmap) 그래픽 파일 모니터에 나타나는 개개의 점(화소, pixel)에 대응하는 칼라 값을 저장한 파일 이미지의 크기와 사용된 컬러가 파일을 저장할 때 고정 처리 속도는 빠르나, 기억공간을 많이 차지하고 이미지의 크기나 칼라를 변경하기 힘든 단점이 있음(아래 확대 예제 참조) 대표적인 포맷으로는 GIF, PCX, JPEG, BMP 등이 있음 관련 프로그램: 포토샵 또는 페인트샵 프로 확대 원본
이미지 파일의 종류 및 특성 (3/5) HTML 개요 Adobe Photoshop
이미지 파일의 종류 및 특성 (4/5) 벡터(vector) 그래픽 파일 HTML 개요 벡터(vector) 그래픽 파일 이미지를 그리는 방법과 순서를 저장한 파일(이미지를 벡터로 표시) 임 수정이 용이함 수학적인 계산에 의해 만들어지기 때문에, 컴퓨터를 이용한 디자인과 CAD 설계 분야에서 폭넓게 사용 웹 페이지에는 비트맵 파일만 사용가능 코렐드로우(coreldraw) 또는 일러스트레이터(illustrator) 확대 원본
이미지 파일의 종류 및 특성 (5/5) HTML 개요 Coreldraw Illustrator
그래픽 파일 포맷 (1/4) GIF (Graphics Interchange Format) HTML 개요 GIF (Graphics Interchange Format) (원래 목적) 인터넷에서 그래픽 교환 표준으로 사용 Compuserve라는 온라인 정보 서비스 회사에서 개발 8비트 색상(256 color)과 투명한 이미지 지원 사진이나 그림 등 많은 컬러를 필요로 하는 이미지에는 부적합 텍스트와 어울려 본문을 꾸미는 이미지에는 GIF 파일이 적당 (인터레이싱(interlacing) 기술을 사용하여) 간단한 애니메이션도 가능 GIF 사용이 좋은 경우 아이콘이나 로고 같은 색상이 적은 이미지 사진 이미지라도 크기가 작은 이미지 설계도나 다이어그램, 벡터 그래픽을 변환한 이미지 배경을 투명하게 처리하는 능력이 있으므로, 투명 속성이 필요한 이미지
그래픽 파일 포맷 (2/4) HTML 개요 GIF 이미지 예제
그래픽 파일 포맷 (3/4) JPG, JPEG (Joint Photographic Expert Group) HTML 개요 JPG, JPEG (Joint Photographic Expert Group) 파일의 크기를 최소화하기 위해 만들어진 것으로, GIF와 달리 항상 트루컬러로 되어있는 이미지만을 저장 24비트 컬러를 모두 표현할 수 있으며 압축 기술이 뛰어남 부드러운 컬러 변환을 가진 이미지, 즉 손으로 그린 그림이나 사진과 같은 이미지 JPEG 사용이 좋은 경우 많은 컬러를 필요로 하는 이미지 부드러운 컬러 변환을 가진 이미지 브라우저 화면을 가득 채울 정도로 큰 이미지(용량이 적고 전송속도가 빠름)
그래픽 파일 포맷 (4/4) HTML 개요 JPEG 이미지 예제
HTML 문서에 이미지 삽입 (1/4) HTML 개요 <img src = “… image path …”> (대개 </img>는 생략) 속성 내용 SRC = “이미지 파일” 이미지 태그에 꼭 있어야 할 속성이며 출력할 이미지 파일명을 지원 ALIGN = “TOP” | “BOTTOM” | “MIDDLE” | “LEFT” | “RIGHT” 이미지와 이웃한 텍스트를 정렬하는 방식을 지정 ALT = “문자열” 이미지를 볼 수 없는 텍스트 기반 웹브라우저를 사용하여 접속한 사람들을 위하여 이미지 대신에 보여줄 메시지를 지정해 주는 것 이미지 대신에 나타날 문자열을 지정한다. WIDTH = n (또는 n%) 이미지의 가로 방향의 크기를 임의로 지정 HEIGHT = n (또는 n%) 이미지의 세로 방향의 크기를 임의로 지정 HSPACE = n, VSPACE = n 이미지와 주위의 다른 요소와의 수평간격과 수직간격을 픽셀 단위로 지정 BORDER = n 이미지 테두리선의 굵기를 픽셀 단위로 지정 0 으로 지정하면 이미지가 링크되어 있어도 테두리 선이 나타나지 않으며, BORDER의 속성을 지정하지 않고 생략하면 링크가 되어 있지 않은 이미지는 테두리 선 없이 이미지만을 출력
HTML 문서에 이미지 삽입 (2/4) HTML 개요 이미지 태그 사용 예제
HTML 문서에 이미지 삽입 (2/4) HTML 개요 이미지 태그 사용 예제
HTML 문서에 이미지 삽입 (3/4) 애니메이션 GIF (Animated GIF) 만화를 만들 때 여러 종이를 조금씩 넘겨가면서 움직이는 원리 한 개의 파일에 여러 개의 이미지를 담는 기능
HTML 문서에 이미지 삽입 (4/4) HTML 개요 애니메이션 GIF 사용 예제
이미지 맵 (1/4) 한 개의 이미지 파일에 여러 개의 링크를 (영역 별로) 할당하는 기술 HTML 개요 한 개의 이미지 파일에 여러 개의 링크를 (영역 별로) 할당하는 기술 그림에 하나의 링크만을 연결한 것이 아니라, 그림의 부분들이 각각 다 른 링크로 연결하는 기술 링크와 연결된 이미지의 영역을 핫스팟(hotspot)이라 함 정의하고자 하는 영역의 모양에 따라 사각형(rectangle), 원(circle), 다각 형(polygon) 의 세 가지 종류를 사용
이미지 맵 (2/4) <map name=“맵 레이블”> … </map> HTML 개요 <map name=“맵 레이블”> … </map> 이미지 맵을 사용하기 위한 이미지 맵 정보를 정의 “맵 레이블”은 이미지 맵을 여러 이미지에서 해당 이미지 맵을 식별 “맵 레이블”은 <img> 태그 내에 속성으로 정의 <img src=“…” usemap = “#맵 레이블”>
이미지 맵 (3/4) HTML 개요 <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
이미지 맵 (4/4) HTML 개요 이미지 맵 사용 예
이미지 맵 (4/4) HTML 개요 이미지 맵 사용 예
Homework #2 (실습 #1) HTML 개요
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
하이퍼텍스트 링크 (1/3) 다른 문서(혹은 문서 내 다른 위치)와의 연결 기능 제공 HTML 개요 다른 문서(혹은 문서 내 다른 위치)와의 연결 기능 제공 하이퍼텍스트 링크를 이용해 할 수 있는 일 사용자를 다른 웹 페이지로 이동시킨다. 사용자를 현 웹 페이지의 특정한 위치로 이동시켜 준다. 파일을 다운로드 받을 수 있게 하거나 이미지 파일을 보여준다. 전자우편을 보낼 수 있도록 한다. ftp 서버에 접속하거나 뉴스그룹으로 연결시킨다.
하이퍼텍스트 링크 (2/3) 앵커(anchor) 태그: <a> … </a> HTML 개요 앵커(anchor) 태그: <a> … </a> <A HREF = “연결하고자 하는 곳의 (주소 또는 문서의) URL”>텍스트 내용</a> HREF: hypertext reference의 약어
하이퍼텍스트 링크 (3/3) HTML 개요 문서 내 연결 <A HREF = “#문서 내에서 찾아가야 할 지점의 레이블”>텍스트 내용</a> <A NAME = “지점의 레이블”>텍스트 내용</a>
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
리스트(목록) 태그 리스트 태그의 종류 불릿 리스트 번호 리스트 정의 리스트 불릿(bullet) 리스트 HTML 개요 리스트 태그의 종류 불릿(bullet) 리스트 번호(number) 리스트 정의(definition) 리스트 불릿 리스트 첫 번째 항목 두 번째 항복 세 번째 항목 번호 리스트 첫 번째 항목 두 번째 항복 세 번째 항목 정의 리스트 축구 11명이 경기한다. 야구 9명이 경기한다. 농구 5명이 경기한다.
불릿 리스트 (1/3) 가장 일반적인 형태의 리스트 (불릿문자) 각 항목의 끝 부분에는 자동으로 라인이 나누어짐 HTML 개요 가장 일반적인 형태의 리스트 (불릿문자) 각 항목의 끝 부분에는 자동으로 라인이 나누어짐 불릿 리스트 시작/끝 태그: <ul> … </ul> (ul: unordered list) 목록 앞에 숫자 대신에 기호를 붙여서 순서 없는 목록을 만들 때 사용 블릿 리스트의 내부에 또 다른 블릿 리스트를 넣는 것이 가능 (중첩된 블릿 리스트) <ul>의 속성 <UL type = circle | square | disc> .... </UL> Circle = ○, square = ■, disc = ●
불릿 리스트 (2/3) 각 항목(list item)의 시작/끝 태그: <li> … </li> HTML 개요 각 항목(list item)의 시작/끝 태그: <li> … </li> (불릿 리스트에서) <li>의 속성 <LI type = circle | square | disc> .... </LI> Circle = ○, square = ■, disc = ● 참고: 속성이 영향을 미치는 범위 <ul>(혹은 <ol>)에서의 속성은 목록 전체에 영향을 주는 반면에, <li>에서의 속성은 해당 항목에만 영향을 준다.
불릿 리스트 (3/3) HTML 개요
번호 리스트 (1/3) 목록 앞에 숫자가 붙어서 그 순서를 가지는 목록을 만들 때 사용 HTML 개요 목록 앞에 숫자가 붙어서 그 순서를 가지는 목록을 만들 때 사용 번호 리스트 시작/끝 태그: <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)
번호 리스트 (2/3) <ol>의 속성 (계속) HTML 개요 <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>에서의 속성은 해당 항목에만 영향을 준다.
번호 리스트 (3/3) HTML 개요
정의 리스트 (1/2) HTML 개요 태그 내에서 리스트 항목을 정의하는 태그(<dt>)와 이 항목을 설명하는 태그(<dd>)를 가지고 있음 정의 리스트 시작/끝 태그: <dl> … </dl> (dl: definition list) <dl> 태그는 내부에서 <dt>와 <dd> 태그를 사용함 <dt>와 <dd> 태그는 반드시 짝을 이루어 사용되어야 함 <dt> … </dt> (dt: definition term) 리스트의 정의 항목을 나타냄 <dd> … </dd> (dd: definition description) 리스트의 정의 항목에 대한 설명을 나타냄
정의 리스트 (2/2) HTML 개요
테이블 (1/6) <table> … </table> 테이블의 시작과 끝을 알림 HTML 개요 <table> … </table> 테이블의 시작과 끝을 알림 테두리를 지정하지 않고 사용하면 문서를 보기 좋게 정렬하는 용도로도 사용 속성 내용 BORDER = n (default = 0) 테이블 바깥쪽 테두리의 굵기는 픽셀 단위로 지정 투명한 도표(border = 0)는 문장을 정렬할 때 또는 다단으로 편집 WIDTH = n | n% 테이블 안에 있는 셀의 너비를 픽셀 또는 %단위로 지정 HEIGHT = n | n% 테이블 안에 있는 셀의 세로 길이(폭)를 픽셀 %단위로 지정 CELLSPACING = n (default = 1) 테이블 전체의 선의 굵기를 픽셀 단위로 지정 CELLPADDING = n (default = 2) 셀 안에 입력된 데이터 사이의 간격을 픽셀 단위로 지정 BGCOLOR=“color” 테이블 전체의 배경 컬러를 지정
테이블 (2/6) <caption> … </caption> <tr> … </tr> HTML 개요 <caption> … </caption> 캡션이란? 테이블에 대한 간단한 설명(제목) 테이블의 위 또는 아래에 캡션을 설정 ALIGN = TOP | BOTTOM (TOP: 테이블 위, BOTTOM: 테이블 아래) <tr> … </tr> Table Row의 약어로서 테이블의 새로운 행(줄)이 시작 새로운 행(줄)이 시작될 때마다 <TR> 태그를 반드시 지정 ALIGN = LEFT | RIGHT | CENTER Table 내에서 데이터를 각각 좌측, 우측, 중앙 정렬을 지정 VALIGN = TOP | BOTTOM | MIDDLE <TR> 태그가 만들어낸 열에 포함되어 있는 셀들의 데이터를 수직 정렬 방법
테이블 (3/6) <td> … </td> HTML 개요 <td> … </td> 테이블의 셀을 정의하는 태그 (셀에 들어갈 내용의 앞뒤에 사용되는 태그) 속성 내용 ALIGN = LEFT | RIGHT | CENTER (default = LEFT) 셀 내에서 데이터를 정렬하는 방법을 결정 VALIGN = TOP | BOTTOM | MIDDLE (default = MIDDLE) 셀 내에서 데이터를 수직 정렬하는 방법을 결정 COLSPAN = n (default = 1) 현재의 셀이 다른 행의 셀과 오른쪽으로 병합 ROWSPAN = n (default = 1) 현재의 셀이 다른 열의 셀과 아래쪽으로 병합 NOWRAP 셀 내의 내용이 길면 웹 브라우저가 자동으로 줄 바꿈을 하여 출력하게 되는데 이러한 줄 바꿈 현상이 일어나지 않도록 함 BGCOLOR 셀의 배경 컬러를 지정 WIDTH (or HEIGHT) = n | n% 셀의 높이나 너비를 지정
테이블 (4/6) <th> … </th> Table Heading을 의미 HTML 개요 <th> … </th> Table Heading을 의미 (<td>와 기능이 같으나) 테이블의 헤더의 셀을 나타내기 위해 사용 <td>대신 <th>로 지정해 주면, 글자체가 볼드(bold)로 나타나고, 기본적으로 중앙 정렬로 화면에 나타남
테이블 (5/6) 테이블 관련 태그 정리 [표 1] 강원대학교 컴퓨터과학전공 성적 분포 <CAPTION> HTML 개요 테이블 관련 태그 정리 <CAPTION> [표 1] 강원대학교 컴퓨터과학전공 성적 분포 <TABLE> <TH> <TR> <TD>
테이블 (6/6) HTML 개요
테이블 (6/6) HTML 개요
테이블 (6/6) HTML 개요
테이블의 다양한 활용 테이블을 이용하여 독특한 제목(heading)을 만들 수 있음 HTML 개요 테이블을 이용하여 독특한 제목(heading)을 만들 수 있음 테이블을 이용하여 간단히 3차원 음영이 추가된 이미지의 테두리를 만 들 수 있음 테이블을 이용해 본문의 너비를 사용자가 원하는 대로 지정할 수 있음 본문의 너비가 긴 경우에 테이블을 응용하여 본문의 단을 나누어 다단 편집을 하는 것이 좋음
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
프레임 (1/5) HTML 개요 프레임 사용 예제 프레임 A 프레임 B 프레임 C
프레임 (2/5) 프레임이란? 웹 브라우저의 윈도우를 여러 개로 나누어 각 윈도우에서 다른 웹 페이지를 보여주는 역할을 함 HTML 개요 프레임이란? 웹 브라우저의 윈도우를 여러 개로 나누어 각 윈도우에서 다른 웹 페이지를 보여주는 역할을 함 일반 HTML 문서와의 차이 일반 HTML 문서에서는 <body> 태그를 포함함 프레임 문서에서는 <frameset>이 대신 사용됨 <html> <head><title>...</title></head> <body> ... 웹 페이지 본문 ... </body> </html> <frameset> ... 프레임 선언 ... </frameset> 일반 웹 페이지 구조 프레임 문서 구조
프레임 (3/5) HTML 개요 <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 의 비율로 분할
프레임 (4/5) <FRAME> 실제로 지정된 프레임 들어갈 정보를 정의 HTML 개요 <FRAME> 실제로 지정된 프레임 들어갈 정보를 정의 <FRAMESET> 태그에 의해 화면이 분할되어 여러 개의 프레임이 생성되면, 각 프레임마다 출력할 실제적인 HTML 문서들을 하나씩 지정할 때 사용 속성 내용 SRC = "....“ 지정된 프레임에서 보여줄 HTML 문서의 URL을 지정 MARGINWIDTH = n 해당 프레임의 좌우 여백을 픽셀 단위로 지정 MARGINHEIGHT = n 해당 프레임의 상하 여백을 픽셀 단위로 지정 SCROLLING = AUTO | YES | NO 프레임의 우측과 하단에 스크롤 바를 만들 것인지 아닌지를 결정 NORESIZE 이 속성을 지정하면 사용자가 프레임의 크기를 임의로 변경할 수 없음
프레임 (5/5) HTML 개요
프레임 (5/5) HTML 개요
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
사운드(오디오) (1/5) 샘플링: 아날로그 사운드를 디지털 데이터로 바꾸는 작업 HTML 개요 샘플링: 아날로그 사운드를 디지털 데이터로 바꾸는 작업 사운드 에디터: Cool Edit, GoldWave
사운드(오디오) (2/5) 사운드 파일의 종류 WAVE HTML 개요 사운드 파일의 종류 WAVE 마이크로소프트에서 개발한 윈도우즈의 기본 샘플링 파일, 확장자는 “.wav” 윈도우 시작 및 종료 시 들리는 효과음 MIDI (Musical Instrument Digital Interface) 연주에 필요한 정보(음표와 지속시간)만 담고 있음, 확장자는 “.mid” 샘플링 사운드에 비해 크기가 작음 RealAudio 다운로드 받으면서 사운드를 들을 수 있음(스트리밍), 확장자는 “.ra” MP3 (MPEG Audio Layer 3) 오디오 데이터의 압축 기술로서, 고음질의 오디오 압축 기술 압축을 통해 용량이 작아져, 인터넷을 통해 고품질 음악을 쉽게 주고받을 수 있다.
사운드(오디오) (3/5) HTML 개요 사운드 파일 다운로드 받기 <a href=“사운드 파일 이름”>파일 이름 등</a>
사운드(오디오) (4/5) 음악 들려주기 (음악 파일을 play하기): <embed> 태그 사용 HTML 개요 음악 들려주기 (음악 파일을 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>
사운드(오디오) (5/5) HTML 개요
동영상(비디오) (1/2) 동영상 파일의 종류 MPEG (Motion Picture Expert Group) [.mpg] HTML 개요 동영상 파일의 종류 MPEG (Motion Picture Expert Group) [.mpg] 압축률이 매우 뛰어나고 거의 모든 종류의 컴퓨터에서 지원 압축률을 지정할 수가 있어서 화질의 상태를 선택가능 QuickTime [.mov] 애플사의 동영상 압축 기술 압축방식의 다양함 AVI (Audio Video Interleaved) 마이크로소프트의 동영상 파일 포맷 압축률이 낮기 때문에 파일의 크기가 큼 ASF 마이크로소프트의 스트리밍(streaming) 미디어 형식 비디오, 비디오, 슬라이드 쇼, 동기화된 이벤트 등을 지원
동영상(비디오) (2/2) 동영상 파일 다운로드: <a href=“동영상 파일 이름”>파일 이름</a> HTML 개요 동영상 파일 다운로드: <a href=“동영상 파일 이름”>파일 이름</a> 동영상 플레이하기: <embed src=“동영상 파일 이름” …>
동영상(비디오) (2/2) 동영상 파일 다운로드: <a href=“동영상 파일 이름”>파일 이름</a> HTML 개요 동영상 파일 다운로드: <a href=“동영상 파일 이름”>파일 이름</a> 동영상 플레이하기: <embed src=“동영상 파일 이름” …>
강의 내용 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상
Homework #3 (실습 #2) HTML 개요