HTML과 웹페이지
최근 웹(WWW)의 보급으로 많은 컴퓨터 사용자들이 웹 환경을 이용하여 멀티미디어 정보를 웹 페이지를 통해 전달하는 경향
멀티미디어 CD/DVD 타이틀과 비교해 볼 때 웹 페이지는 모든 사람에게 공개되어 있으며, 언제라도 내용을 갱신할 수 있으므로 최신의 정보를 제공할 수 있다는 것이 장점
HTML 이란?
▪ HyperText Markup Language의 약자로 웹페이지를 만들기 위한 기본 언어 또는 규약
▪ Markup Language : 문자열의 앞뒤에 태그(Tag, 문서의 형식을 지정하는 일종의 해석 기호)를 붙여 그 문자열의 특성을 나타내 주는 언어
▪ HTML은 SGML(Standard Generalized Markup Language, 문서의 논리적 구조를 기술하기 위한 Markup Language의 정의를 위한 언어) 표준에 따라 구현한 문서 형식
▪ 태그의 종류와 형식
▪ 태그에는 문자열의 시작을 나타내는 시작 태그와 끝을 나타내는 끝 태그가 있다
▪ 시작 태그의 형식 : <"태그이름">
▪ 끝 태그의 형식 : </"태그이름">
▪ 시작 태그 안에 ' 속성 이름="속성값" '의 쌍으로 태그의 속성을지정하기도한다
ex) <BODY text=“red”> ….. </BODY>
HTML 문서
HTML 문서는 다음과 같이 구성되어 있다
하이퍼링크 (Hyperlink)
▪ 하이퍼텍스트 상에서 원하는 곳으로 이동할 수 있도록 만들어진 링크 웹에서의 하이퍼링크는 <A>태그에 의해 만들어진다
▪ <A href="가고자 하는 곳의 주소"> 링크가 될 부분 </A>
▪ 다른 웹 사이트로의 링크
▪ <A href="http://www.snoopy.com">Snoopy.com으로의 링크</A>
▪ 자신의 디렉토리 내에서의 링크
▪ 하위 폴더: <A href="example/travel.htm">
▪ 상위 폴더: <A href="../게시판/게시판.html">
▪ 한 페이지 내에서의 링크
▪ 링크: <A href="문서명#문서내 위치명">링크가 될 부분</A>
▪ 위치 정의: <A name="문서내 위치명"></A>
웹페이지에서 멀티미디어 기술의 적용
웹 페이지의 이미지
▪ <IMG src="이미지 파일 이름 또는 URL">
▪ 웹 페이지에 사용할 수 있는 이미지 형식은 GIF 또는 JPEG의 두 가지
▪ 일반적으로 크기가 작은 그림이나 버튼, 메뉴 등에 사용하는 이미지는 GIF 형식을, 미묘한 색의 변화가 많은 사진에는 JPEG 형식을 사용한다
▪ Animated GIF: 여러 장의 GIF를 하나의 파일로 합치고 순서대로 보여주어 애니메이션 효과를 내는 GIF 파일 형식
▪ Interlaced GIF: 이미지의 대략적인 모습을 먼저 보여주고 차츰 세부적인 모습을 보여주는 GIF파일 형식
배경 이미지와 투명 GIF
▪ 배경 이미지 넣기
▪ 형식 <BODY>태그 안에 background="파일 이름"으로 배경 이미지 속성 지정 배경 이미지로 사용한 이미지가 반복해서 타일 형식으로 나타난다
▪ 투명 GIF (Transparent GIF)의 사용
▪ 웹 페이지에 배경 색이나 배경 이미지를 넣으면 웹 페이지에 사용된 그림과 배경이 달라 어색해 보이는 경우가 있다.
▪ GIF 파일은 투명색을 설정할 수 있어 배경을 투명하게 할 수 있다
이미지에 링크 달기
▪ 이미지에 다른 페이지로 이동할 수 있는 링크를 넣을 수 있다
▪ <IMG> 태그의 바깥쪽에 <A>태그를 이용해 링크를 넣는다
▪ 그림에 링크를 넣으면 자동으로 파란색 테두리가 생긴다
▪ 이 테두리를 없애기 위해서는 <IMG> 태그의 border 속성을 0으로 한다
애니메이션의 활용
(1) Animated GIF
▪ 여러 장의 GIF를 모아 시간 간격을 두고 차례로 보여주어 애니메이션 효과를 내는 방법
▪ 보통 이미지와 마찬가지로 <IMG>태그를 이용
▪ Animated GIF를 만들기 위한 프로그램
▪ GIF Animator
▪ GIF Construction Set
(2) Dynamic HTML과 JavaScript
▪ Dynamic HTML
▪ 기존의 정적인 HTML에 동적인 요소를 추가하기 위하여 개발된 것
▪ 문서의 각 요소를 객체로 정의하여 위치, 스타일, 상호작용 지정 가능
▪ JavaScript를 기반으로 하여 빠르고 편리함
▪ Dynamic HTML을 이용한 애니메이션의 예
▪ Dynamic HTML의 Layer을 적용하여 바다 속 풍경 내의 객체들을 Layer로 정의하고 그 Layer의 속성을 제어하여 바다 속에서 움직이는 물고기를 표현한다
(3) Java Applet
▪ 웹에서 사용되는 자바 어플리케이션
▪ JavaScript나 Dynamic HTML에 비해 느리고 어려우나 수준의 상호작용성과 인터페이스 제공
▪ 필요한 HTML 태그
▪ <APPLET>: 자바 애플릿을 삽입할 때 쓰임
▪ <PARAM>: 삽입된 애플릿에 정보를 전달할 때 쓰임
(4) SVG 및 SMIL
▪ SVG는 XML을 기반으로 하여 벡터 방식의 애니메이션
▪ 내용 수정이 쉽고, 하드웨어 환경에 독립적임
▪ 기하학적 객체, 링크, 삽입, 컬러, 애니메이션 등과 같은 다양한 객체 요소들로 구성
▪ SVG의 실행을 위해서는 Adobe사 등에서 제작한 SVG 뷰어를 설치 해야함
▪ SMIL에서도 버전 2.0부터는 SVG와 동일한 애니메이션 기능 지원
사운드와 비디오의 활용
(1) 사운드 파일
▪ Wave 파일
▪ 윈도우에서 기본적으로 지원하는 파일 형식이므로 별도의 플러그인 없이 사용
▪ 파일이 크기 때문에 길이가 짧은 음악이나 음향 효과에 주로 사용
▪ Real Audio 파일
▪ Real Audio 플러그인을 설치하면 들을 수 있다
▪ 실시간 전송이 가능하다
▪ 즉, 다운로드와 동시에 음악을 들을 수 있다
▪ 파일 크기가 Wave 파일의 1/10 정도로 작음
▪ MP3 파일
▪ 동영상 압축표준의 하나인 MPEG-1의 오디오 부분 압축 레이어중 layer3
▪ 12:1정도의 높은 압축률 지원
▪ 압축효과가 뛰어나고 음질이 우수하여 인터넷상에서 음악을 압축에 자주 사용
▪ MIDI 파일
▪ QuickTime 플러그인이나 MediaPlayer 플러그인을 설치
(2) 비디오 파일
▪ AVI 파일
▪ Wave 파일과 마찬가지로 윈도우에서 기본적으로 지원하는 형식
▪ Real Video
▪ 사운드만 지원하던 Real Audio에 비디오 기능을 추가
▪ Real Audio와 마찬가지로 실시간 전송이 가능
▪ MOV 파일
▪ 본래 매킨토시 전용인 QuickTime이라는 동영상 프로그램의 파일 형식
▪ 현재는 윈도우에서도 사용 가능
▪ MPEG 파일
▪ MPEG 압축 기술을 이용해 동영상을 압축시킨 파일
▪ QuickTime 플러그인이나 MediaPlayer 플러그인이 필요
웹페이지의 디자인
웹페이지는 다른 매체와 마찬가지로 뚜렷한 주제를 가지고 충실한 내용이 중요
시각적인 디자인과 탐색 구조, 인터페이스도 중요
웹 페이지의 개발 과정
(1) 주제와 대상의 결정
▪ 명확한 주제와 그에 관한 정보를 중심으로 제작
▪ 웹 페이지를 접하는 대상을 고려 (연령층 등)
(2) 아이디어 도출 (Brainstorming)
▪ 주제와 관련된 것들을 자유롭게 생각해 보고 생각나는 것들을 모두 찾는 단계
(3) 내용의 구성
▪ 아이디어를 의미있게 구성하여 사이트 맵을 제작
▪ 사이트 맵 : 웹 페이지의 구조를 파악할 수 있도록 페이지간의 계층 구조를 표현
(4) 웹 페이지 작성의 준비
▪ 자료 수집: 저작권에 유의
▪ 스토리보드(Storyboard)의 작성
▪ 각 구성요소들의 위치와 크기(레이아웃) 그리고 색상 등을 지정
(5) 웹 페이지의 작성
▪ 수집한 문서, 이미지 등을 편집
▪ 스토리보드를 따라 웹 페이지를 작성
웹 페이지의 구성
(1) 페이지의 분할
▪ 스크롤을 여러 번 해야 할 정도로 긴 페이지는 사용자에게 부담을 줌
▪ 프레임을 너무 많이 나누면 혼란스러움(2~3개가 적당)
(2) 웹 페이지의 탐색 구조
▪ 선형구조, 계층구조, 선형+계층구조, 망구조
▪ 이미지 맵의 활용
(3) 열거목록(리스트) 및 프레임의 이용
▪ 열거목록: 웹 페이지의 내용을 간결하게 작성하는 것이 내용전달에 더 효과적
▪ 프레임: 웹 브라우저의 화면을 분할해 주는 기능
웹 페이지의 시각적 요소
(1) 일관성 있는 디자인
▪ 배경과 레이아웃의 통일
▪ 공통된 아이콘, 헤더 등에서 이미지와 색채를 일관성 있게 사용
▪ 통일된 색채 계획
(2) 텍스트의 사용
▪ 내용에 어울리는 폰트와 스타일 선택, 그래픽 문자의 사용
▪ 여백의 적절한 사용
(3) 색상
▪ 융합, 대조, 조화를 얻기 위해 사용
▪ 색이 주는 느낌을 고려
▪ 웹 페이지의 분위기를 결정
(4) 텍스쳐
▪ 점, 선, 면과 같은 객체를 특별한 느낌이 나는 형태로 구성
▪ 웹페이지의 배경에 반복적인 패턴 --> 시각적 효과나 분위기를 연출
'멀티미디어' 카테고리의 다른 글
| [멀티미디어] 11장 멀티미디어 콘텐츠 제작 : CD/DVD 타이틀의 제작 (1) | 2023.12.04 |
|---|---|
| [멀티미디어] 11장 멀티미디어 콘텐츠 제작 : 웹 환경에서 멀티미디어 문서의 표준 (0) | 2023.12.04 |
| [멀티미디어] 11장 멀티미디어 콘텐츠 제작 : 디지털 콘텐츠의 제작과정 (0) | 2023.12.04 |
| [멀티미디어] 10장 디지털 콘텐츠 : 문화와 디지털 콘텐츠 (0) | 2023.12.04 |
| [멀티미디어] 10장 디지털 콘텐츠 : 디지털 콘텐츠의 종류 (4) | 2023.12.04 |
