웹 페이지
웹페이지 VS. 패키지 타이틀 장점 내용 갱신 최신 정보 단점 정보의 량
HTML HyperText Markup Language Markup Language Tag 문서의 형식을 지정하는 일종의 해석 기호 HTML은 SGML(Standard Generalized Markup Language) 표준에 따라 구현한 문서 형식
Tag 태그의 종류와 형식 태그에는 문자열을 시작을 나타내는 시작 태그와 끝을 나타내는 끝 태그가 있다. 시작 태그의 형식 : <"태그이름">, <속성 이름="속성값“> 끝 태그의 형식 : </"태그이름">
HTML 문서의 예 <HTML> <HEAD> <TITLE> 간단한 HTML문서 </TITLE> </HEAD> <BODY> Body태그 안의 내용이 브라우저에 나타납니다.<BR> 줄을 건너 뛰었습니다.<BR> <H1>Heading 1</H1> <H3>Heading 3 / 제목: 간단한 웹 페이지</H3><BR> <FONT size=2>Font 크기 2</FONT><BR> <FONT size=6>Font 크기 6</FONT><BR> </BODY> </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>
웹 페이지 디자인 시 고려해야 할 점 뚜렷한 주제 충실한 내용 시각적인 디자인 탐색 구조 인터페이스 네트워크상에서의 통신 효율
웹 페이지의 개발 과정
웹 페이지 개발 과정 주제와 대상의 결정 아이디어 도출 (Brainstorming) 내용의 구성 명확한 주제와 그에 관한 정보를 중심으로 제작 웹 페이지를 접하는 대상을 고려 (연령층 등) 아이디어 도출 (Brainstorming) 정한 주제와 관련된 것들을 자유롭게 생각해 보고 생각나는 것들을 모두 적는 단계 내용의 구성 아이디어를 의미 있게 구성하여 사이트 맵을 제작 사이트 맵: 웹 페이지의 구조를 파악할 수 있도록 페이지간의 계층 구조를 그림으로 나타낸 것
웹 페이지 개발 과정 웹 페이지 작성의 준비 웹 페이지의 작성 자료 수집: 저작권에 유의 스토리보드(Storyboard)의 작성 스토리보드: 만들어야 할 각각의 웹 페이지를 종이 위에 그려 보는 것 각 구성요소들의 위치와 크기(레이아웃) 그리고 색 등을 지정 웹 페이지의 작성 수집한 문서, 이미지 등을 편집 스토리보드를 따라 웹 페이지를 작성
웹 페이지의 구성 페이지 분할 웹 페이지의 탐색 구조 스크롤을 여러 번 해야 할 정도로 긴 페이지는 사용자에게 부담을 줌 프레임을 너무 많이 나누면 혼란스러움 웹 페이지의 탐색 구조 선형구조: 정해진 순서대로 앞/뒤만 이동 가능(강의 노트 등) 계층구조: 전체적인 내용을 구조화하여 내용을 분류(상위메뉴/하위메뉴) 선형+계층구조: 실제적으로 가장 많이 사용 망 구조: 별다른 구조 없이 관련된 페이지들끼리 연결
탐색 구조의 표현 텍스트 또는 이미지를 통하여 링크
탐색 구조의 표현 이미지 맵 그림에서 영역을 지정해 그 부분을 링크로 만드는 것
웹 페이지의 구성 테이블을 이용한 페이지 레이아웃 열거목록(리스트) 기본적인 HTML문서는 구성요소를 왼쪽 위로부터 차례로 표시 테이블을 이용하면 어느 정도 원하는 위치에 구성요소를 배치할 수 있음 열거목록(리스트) 웹 페이지의 글은 서술형으로 길게 늘여 쓰는 것 보다는 간결하고 짧게 하는 것이 내용 전달에 효과적 HTML문서의 열거 목록의 종류 무순서목록, 순서목록, 정의목록
열거목록
웹 페이지의 구성 프레임 웹 브라우저의 화면을 분할해 주는 기능 일반적으로 메뉴 등 바뀌지 않는 부분과, 선택에 따라 바뀌는 내용 부분을 나누는 일에 사용 일반적으로 3개 이하
웹 페이지의 시각적 요소 일관성 있는 디자인 배경과 레이아웃의 통일 공통된 마크, 아이콘 등에 특정한 그래픽스의 사용 통일된 색채 계획
웹 페이지의 시각적 요소 텍스트 사용 메타포 색상 내용에 어울리는 폰트와 스타일 선택 모니터의 해상도와 사이즈를 고려하여 전체 문장량과 문장 길이를 정함 여백의 적절한 사용 메타포 사용자의 연상이나 경험과 관련된 시청각 기호 사용 색상 융합, 대조, 조화를 얻기 위해 사용 색이 주는 느낌을 고려 웹 페이지의 분위기를 결정
색이 주는 분위기 뜨거움, 정열, 멈춤 선망, 자연, 진행 차가움, 슬픔, 하늘 따뜻함, 소심함, 주의 더러움, 지구 뜨거움, 정열, 멈춤 선망, 자연, 진행 차가움, 슬픔, 하늘 따뜻함, 소심함, 주의 더러움, 지구 순수,맑음,선함 사악함,공포,죽음
웹 페이지 디자인의 원칙 웹 페이지를 만들기 전에 철저한 기획 단계를 거친다. 웹 페이지 로드 시간이 10초 이상이 되어서는 안 된다. 길게 스크롤되는 문서를 만들지 않는다. 방문객이 웹 사이트의 구조를 쉽게 파악할 수 있도록 구성하고 웹 페이지간의 이동이 용이하게 만든다. 웹 페이지에 의미 있는 제목을 붙인다. 브라우저의 종류나 크기를 제한해서는 안 된다. 지나치게 많은 애니메이션을 사용하지 않는다. 첫 화면에 플러그-인을 적용하지 않는다. 프레임을 너무 많이 사용하지 않는다. 내용을 수시로 업데이트한다.
이미지의 활용 <IMG src="이미지 파일 이름 또는 URL"> GIF JPEG 크기가 작은 그림이나 버튼, 메뉴 등에 사용 Animated GIF, Interlaced GIF JPEG 미묘한 색의 변화가 많은 사진 Progressive JPEG
이미지의 활용 배경 이미지 넣기 투명 GIF(Transparent GIF) <BODY background = “파일 이름”> 타일 형식으로 보여짐 투명 GIF(Transparent GIF)
이미지에 링크 달기 <a href="http://dasan.sejong.ac.kr/~oysong/"> <img src=“filename.gif" width="90" height="60“, border="0"></a>
이미지 맵 하나의 이미지를 메뉴처럼 사용 http://www.kormt.co.kr/sorimp.html <MAP name="이미지맵의 이름"> <AREA shape="rect, circle 또는 poly " coords="모양에 맞는 좌표"> </MAP> <IMG usemap="#앞에서 정의한 이미지맵 이름" src="이미지맵으로 사용할 그림의 URL">
이미지 맵의 좌표 지정 <AREA> 태그의 shape 속성이 rect 사각형 coords="왼쪽 위 X좌표, 왼쪽 위 Y좌표, 오른쪽 아래 X좌표, 오른쪽 위 X좌표" 원 <AREA> 태그의 shape 속성이 circle coords="원 중심의 X좌표, 원 중심의 Y좌표, 원의 반지름" 다각형 <AREA> 태그의 shape 속성이 poly coords="X좌표, Y좌표, ... "
애니메이션의 활용 Animated GIF 보통 이미지와 마찬가지로 <IMG>태그 이용 GIF Animator, GIF Construction Set
애니메이션의 활용 Flash 매크로미디어사에 개발한 파일 형식 (.swf) 벡터 방식의 애니메이션 사용자 상호작용까지 지원 Macromedia Flash <EMBED>태그를 사용
Dynamic HTML 동적인 요소가 추가된 HTML 문서의 각 요소를 객체로 정의: 위치, 스타일, 상호작용 지정 자바스크립트(Java Script) 기반 레이어 기능을 이용한 애니메이션(ex\MovingFish.htm)
Java Applet 웹에서 사용되는 자바 어플리케이션 JavaScript나 Dynamic HTML에 비해 느리고 어려우나 높은 수준의 상호작용성과 인터페이스 제공 필요한 HTML 태그 <APPLET>: 자바 애플릿을 삽입할 때 쓰임 <PARAM>: 삽입된 애플릿에 정보를 전달할 때 쓰임 applet\Firework\firework.htm
SVG XML 기반으로 한 벡터 방식의 애니메이션 내용 수정이 쉽고, 하드웨어 환경에 독립적임 기하학적 객체, 링크, 삽입, 컬러, 애니메이션 등과 같은 다양한 객체 요소들로 구성 SVG를 이용한 약도
사운드/비디오 활용 <EMBED> 태그를 사용하여 문서 내에 포함시키는 방법 하이퍼링크로 연결하는 방법 <EMBED src="사운드/비디오 파일의 URL" > 태그 안에 사운드/비디오 콘트롤의 속성 정의 콘트롤의 크기 : width=픽셀 수, height=픽셀 수 반복 재생하기 : loop = true 또는 false 자동 시작 : autostart = true 또는 false 콘트롤 숨기기 : hidden = true 또는 false 하이퍼링크로 연결하는 방법 <A> 태그를 사용 (일반적인 하이퍼링크와 동일) <A href=“사운드 또는 비디오 파일의 URL”> … </A>
상호작용을 지원하는 웹 기술 CGI (Common Gateway Interface) CGI의 작동 과정 사용자로부터 입력 받은 정보를 서버의 데이터베이스에 저장하거나 더 나아가 사용자가 원하는 정보만을 보여 줄 수도 있다. CGI의 작동 과정 예) 게시판, 방명록, 카운터 등
ASP (Active Server Page) 사용자가 웹페이지를 인터렉티브하게 사용할 수 있도록 고안된 서버 측에서 실행되는 스크립트 언어 CGI에 비해 작성이 쉽고 서버의 부담이 훨씬 적음 VBScript/JavaScript 사용 ASP 스크립트는 서버에서 실행되고 HTML 태그로 변환되어 클라이언트에게 보내지므로 사용자는 HTML 문서만을 보게 되어 소스코드의 보안성이 보장됨
자바(JAVA) 자바의 역사 1991년 Sun Microsystems사의 제임스 고슬링이 가전제품에서 사용될 수 있는 단순하고 버그 없는 언어 제작을 목적으로 프로젝트 시작 하드웨어 독립적인 언어인 '자바'를 구상 1993년 WWW 발표 후 인터넷과 같은 분산환경에서 자바를 이상적인 프로그래밍 수단으로 많은 사람들이 인식 Netscape 2.0에 자바 기술이 포함된 이후 인터넷 환경에서 가장 각광받는 프로그래밍 언어로 부상
자바(JAVA) 자바의 컴파일과 실행 환경 자바 프로그램 개발 환경은 컴파일과 실행환경으로 구성 자바 프로그램 개발 환경은 컴파일과 실행환경으로 구성 자바 소스 코드(.java)를 만들고, 이를 바이트코드(.class)로 컴파일 생성된 바이트코드는 자신의 컴퓨터에서 자체적으로 이용되거나 네트워크를 통해 다른 곳으로 전송 자바 가상 기계(JVM)가 바이트코드의 명령을 해석하여 실행
자바(JAVA) 자바의 활용 분야 웹, 네트워크, 멀티미디어 분야 주식, 증권 분야 인터넷 제어(Control) 모바일 분야
자바 애플릿 (Java Applet) 인터넷 브라우저 상에서 실행되는 자바 어플리케이션 HTML로만 구성된 정적 웹페이지에 동적 효과와 여러가지 특수효과를 지원 미리 만들어져 있는 자바 애플릿 클래스 파일을 다운로드 받아 쉽게 사용 가능 자바 애플릿을 사용하는 이유 브라우저에 대해서 독립적 프로그래밍에 대한 지식 없이도 쉽게 미리 만들어진 애플릿을 가져와 이용할 수 있음 JavaScript와 Dynamic HTML 보다 높은 수준의 상호 작용성을 지원 applet\JSawPuzzle\puzzle.htm
Java Applet vs. Java Script 자바 애플릿 자바스크립트 실행 과정 서버에서 컴파일하고 클라이언트에서 실행 클라이언트에서 해석하고 실행 클래스 있음 없음 HTML과의 관계 HTML외에 별도로 존재 HTML 코드 안에 포함됨 변수 선언 꼭 변수형을 선언해야 함 변수형을 선언할 필요 없음
멀티미디어 문서의 표준 기존 전자 문서의 문제점 특정 응용 프로그램으로 작성되어 있어 서로 다른 프로그램에서 작성된 문서와 호환이 되지 않음 문서를 작성한 응용 프로그램의 새로운 버전이 나오면, 기존의 문서도 새로운 버전에 맞게 변환되어야 함 파일 형식이 시스템에 의존적이므로 서로 다른 기종의 컴퓨터 간에 파일을 주고 받을 수 없음 SGML (Standard Generalized Markup Language, ISO 8879) ISO에서 제정한 문서의 논리적 구조에 관한 표준
마크업 언어(Markup Language) 절차적 마크업 (Procedural Markup) 문서의 외형을 지정해 주는 것 예) 이 글자의 크기는 12 포인트로 하고, 글자체는 명조체 구조적 마크업 (Descriptive Markup) 문서의 외형을 하나하나 지정해 주는 것이 아니라 문서의 논리적인 구조만을 기술하는 것 예) 책을 쓰고자 한다면 장(chapter)의 제목, 절(section)의 제목, 문단, 꼬리말과 같이 문장의 속성만을 지정해 주는 형식 문서의 구조와 형식이 분리되며, 특정 프로그램에 종속적이지 않으므로 다른 시스템 간에도 호환이 쉬움
절차적 마크업과 구조적 마크업
SGML SGML은 문서의 논리적 구조를 기술하기 위한 마크업 언어를 정의하기 위한 언어의 표준 구조적 마크업을 생성하는 기법을 제공하며, 문서의 내용이나 구조를 정의하기 위한 언어 SGML은 그 자체가 마크업 언어가 아니라 마크업 언어를 정의하기 위한 메타 언어 SGML은 처리 방법에 대한 표준이 아니라 논리적인 정보만을 제공하므로 포맷 정보를 제공하지 않음 이곳은 제목, 이곳은 본문, 이곳은 작가 이름
문서 구조의 예
SGML 문서의 핵심 DTD (Document Type Definition) DI (Document Instance) 문서의 논리 구조를 정의 간단한 메모나 편지에서부터 논문, 책에 이르기까지 문서의 종류에 따라서 무한히 많이 만들어 낼 수 있음 DI (Document Instance) 실질적인 문서의 내용과 마크업이 들어가는 부분 마크업은 DTD 부분에서 정의된 형식을 따르므로, DI는 DTD에 의해 만들어진 문서
DTD와 DI의 관계
SGML의 활용 전자출판, 전자도서관 자동차 및 항공 분야의 메뉴얼 멀티미디어/하이퍼미디어 데이터베이스
XML (Extensible Markup Language) SGML을 보다 간단하고, 효율적으로 사용하기 위해 고안 공식 XML 스펙 : "XML은 아주 쉽고 간단한 SGML의 방언(dialect)이며, XML의 목적은 포괄적인 SGML을 현재의 HTML처럼 웹 상에서 서비스하고, 수용, 처리하는 것이다." HTML의 한계점: 문서의 구조를 표현하는 것에 대해 취약 따라서, 다양한 구조를 갖는 문서를 제작하기 어려움. 구조를 나타낼 수 있는 XML이 등장
XML의 활용 전자 도서관 전자 출판 MathML CML (Chemical Markup Language)
SGML, HTML, XML SGML HTML 장점 : 유연성이 크고 시스템이나 플랫폼에 독립적으로 운용 단점 : 복잡하여 시스템을 개발하기 어려움 HTML 장점 : 이식성이 뛰어나고 사용이 편리하며, 웹상에서 빠르게 정보를 제공 단점 : 고정된 태그 집합만을 사용하기 때문에, 복잡한 구조를 갖는 문서를 작성 할 수 없음
SGML, XML, HTML XML SGML, HTML, XML의 미래 각각의 특성과 주력하는 응용분야에 차이가 있음 한가지가 다른 것들을 대체하는 형태보다는 상호보완적 관계로 발전
XHTML (Extensible HTML) XHTML은 XML DTD로 만든 HTML HTML의 문법이 명확하지 않는 점과 확장성이 부족한 점을 보안하기 위해 제정 XHTML은 XML DTD로 정의된 언어이기 때문에 XML의 특성을 모두 가짐 현재 웹 표준 위원회를 주축으로 기존 및 새로이 생성되는 HTML 문서들을 XHTML 기반으로 유도