HTML 3.2, CSS1 and Layers

현동환

대구광역시 북구 복현동 218

영진전문대학 사무자동화과

E-mail : dwhyun@yeungjin-c.ac.kr

Abstract:

1997년 1월 W3C 권고로 새로이 발표된 HTML 3.2 Reference specification의 특징에 대하여 알아보고, 웹화면의 새로운 혁신으로 등장하고 있는 CCS1(Cascading Style Sheets Level 1)과 Netscape사에서 웹화면의 계층화 개념을 응용하여 동적인 화면을 보여주는 Layers의 주요한 특징과 활용에 대하여 알아본다.

Keywords:

HTML 3.2, CSS, CSS1, Layers, dynamic HTML

1. 서론

HTML이 발표된 이래 WWW의 활발한 이용과 인터넷의 선전으로 HTML의 활용도가 커지고 이의 개선을 위한 연구가 지속적으로 활발하게 이루어져 왔다. 웹을 이용한 정보의 이용이 활발하여지면서 기존 HTML의 기능을 보완하여 웹 페이지의 구성을 보다 역동적으로 구성하기 위한 다각적인 노력이 이루어지고 있다. 최근 JAVA가 발표되어 정적이던 화면을 동적으로 변화시켰고 지금 바람을 일으키며 매우 광범위하게 활용되고 있다. 최근 이들을 응용 발전시킨 새로운 개념이 발표되었는데, 그 대표적인 것이 HTML 3.2와 CSS(Cascading Style Sheet), Layers 등으로 이들은 웹 페이지 구성에서 위치 지정의 제약성을 극복하여 자유로운 위치 지정과 자유로운 이동, 화면의 겹침과 숨김 등의 기능들을 자유로이 쓸 수 있도록 하고 있다.

2. HTML 3.2

HTML(HyperText Markup Language)은 여러 플랫폼시스템에서 사용 가능한 하이퍼텍스트 문서를 만들 수 있는 간단한 마크업 언어이다. 이것은 1990년대 초부터 웹의 활발한 사용과 더불어서 광범위하게 보급되어지고 있다.

HTML은 국제 표준 마크업 언어인 SGML(Standard Generalized Markup Language, ISO8879)의 응용 프로그램으로 정의된다. HTML 3.2는 W3C의 Specification으로, IBM, MS, Netscape communications Co., Novell, SoftQuad, Spyglass, SUN Microsystems등의 업체들이 96년 초에 공동 개발하였고, 1997년 1월 권고로 공식 발표하였다. HTML 3.2는 현재 사용하고 있는 HTML 2.0 표준과 호환성을 가지며 tables, applets, text flow around images와 같은 새로운 측면들을 폭 넓게 수용하였다. HTML 3.2의 발표와 함께 1995년 제안되었던 HTML 3.0은 폐기하였다. W3C는 멀티미디어 객체, scripting, style sheets, layout, forms 등의 측면을 고려한 HTML 확장을 계속적으로 추진하고 있다(Project: Cougar).

HTML 3.2는 SGML의 응용으로써 HTML 3.2의 구문은 SGML declaration과 document type definition(DTD)으로 구성된다. HTML3.2는 HTML 2.0의 확장 버전이지만 HTML 2.0에서 다음과 같은 사항을 삭제하였다.

□NEXTID 요소

□A 요소 내에서 URN과 METHODS 속성의 사용

□PRE 내에서 IMG의 사용

□A 요소 내에서 heading 요소의 사용

HTML 3.2 문서는 <!DOCTYPE>선언으로 시작하고 HEAD와 BODY요소를 갖는 HTML요소가 뒤따른다. 모든 conforming HTML 3.2문서는 다른 버전의 문서와 구분하기 위하여 반드시 <!DOCTYPE>선언으로 시작하여야 한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>A study of population dynamics</TITLE>

... other head elements

</HEAD>

<BODY>

... document body

</BODY>

</HTML>

문서 head의 요소는 다음과 같은 요소들로써 이루어지며, 이들은 순서와는 상관없이 사용할 수 있다.

□The TITLE element

□The STYLE element

□The SCRIPT element

□The ISINDEX element

□The BASE element

□The META element

□The LINK element

<STYLE> 요소는 뒤에 소개하는 CSS와 같은 style sheet의 사용을 위하여 html 문서에서 지정하는 기능을 한다. <LINK> 요소는 다른 문서와 연결하여 표현할 때, 문서간의 연결 관계를 유기적으로 정의할 수 있는 기능을 제공한다. 문서간의 연결 형태를 forward relationship과 reverse relationship으로 나누고, 또 이를 세분하여 top, contents, index, glossary, copyright, next, previous, help, search등의 관계로 연결 형태를 상세히 정의할 수 있도록 속성 값을 부여할 수 있다.

<LINK REL=Contents HREF=toc.html>

<LINK REL=Previous HREF=doc31.html>

<LINK REL=Next HREF=doc33.html>

<LINK REL=Chapter REV=Contents HREF=chapter2.html>

<ISINDEX>는 ISINDEX tag에 PROMPT tag를 추가하여 PROMPT tag를 추가하여 키워드를 찾을 때 사용하는 메시지를 지정할 수 있다. <BASE>는 관련 URL을 참조하기 위한 base URL을 지정하는데, 다음과 같이 사용할 경우 'http://www.acme.com/icons/logo.gif '가 참조된다.

<BASE href="http://www.acme.com/intro.html">

<IMG SRC="icons/logo.gif">

<BODY>선언에서 바탕색, 글자색, 연결색 등의 속성을 다양하게 지정할 수 있는 기능을 제공한다. 예를 들면

<BODY bgcolor=white text=black link=red vlink=maroon alink=fuchsia>

여기서 link는 unvisited , vlink는 visited 하이퍼텍스트 링크를 나타내고, alink는 사용자가 클릭하는 순간의 색상을 지정한다.

리스트 목록의 표시에 있어서 <UL>에서 작은 공 모양의 표시를 사용자가 원하는 형태로 지정할 수 있다. <LI type=disc> <LI type=squre> <LI type=circle>의 형태로 속성값을 지정할 수 있다.

<OL>의 속성을 지정하여 목록에 번호 붙이는 방법을 지정할 수 있다. 번호의 형태는 1(arabic number), a(lower alpha), A(Upper alpha), i(lower roman), I(upper roman)으로 속성을 지정하여 변경할 수 있다.

HTML 3.2에서는 <IMG> <TABLE>등 HTML 2.0에서 없거나 부족하던 기능을 많이 확장하여 HTML3.0에서 제공하던 대부분의 기능들을 포함하고 있다.

3.CSS1

Cascading Style Sheets(CSS)는 웹 디자이너와 사용자의 필요에 의하여 특별히 개발된 style sheet 메커니즘으로써, 폰트, 색상, 공백 공간과 그 밖의 문서 표현 측면을 자유로이 지정할 수 있는 기능을 제공한다.

CSS 작업은 1994년 CERN에서 시작되었으며, 1996년 12월 CSS1이 W3C Recommendation으로 채택되었다. CSS1에서 제공하는 속성들은 가장 일반적인 screen-based presentation을 포함하고 있다. CSS1과 더불어 CSS Positioning과 Aural Cascading Style Sheets(ACSS)과 같은 CSS-based specification들이 있다.

CSS1을 완전히 지원하는 브라우저는 아직 나와있지 않으나 1997년 중에 나올 것으로 기대되고 있다. Netscape Navigator latest 4.0 Preview Release가 CSS를 지원한다. 1996년 8월 발표된 Microsoft Internet Explorer 3.0(MSIE3)가 CSS1을 부분적으로 지원하고 있다. W3C의 테스트베드 브라우저인 Arena가 CSS1을 부분적으로 지원하고 있으며, Emacs-w3(Gnuscape Navigator)가 CSS를 지원한다.

CSS를 지원하는 authoring tools는 Sausage Software's HotDog, Allaire's HomeSite editor (v. 2.5 and above), Harlequin Webmaker, SoftQuad's HoTMetaL Intranet Publisher (H.i.P.), JoyHTML, DeltaPoint QuickSite 2.0 등이 있다. 간단한 style sheet를 구성하는 것은 매우 쉽다. 예를 들어 'H1'이라는 요소의 글자 색상을 파랑으로 지정하는 것을 보면 다음과 같다.

H1 { color: clue }

이것이 간단한 CSS 규칙이다. 즉, 선택자(selector) 'H1'과 선언(declaration) 'color:blue'의 두 부분으로 구성된다. 선언은 다시 두 부분으로 나뉘어 속성(property) 'color'와 값(value) 'blue'로 구분된다. 선택자는 HTML문서와 style sheet 사이를 링크하는데 모든 HTML 요소 형태는 선택자가 될 수 있다. Style Sheet가 presentation에 적용되기 위하여서 UA(User Agent, Web browser, Web Client)는 style sheet의 존재를 알려야만 하는데, 다음의 4가지 예와 같이 스타일과 HTML을 결합 할 수 있다.

<HTML>

<HEAD>

<TITLE>title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css" -------------<가>

HREF="http://style.com/cool" TITLE="Cool">

<STYLE TYPE="text/css"> ---------------------------------<나>

@import url(http://style.com/basic); ----------------<다>

H1 { color: blue }

</STYLE>

</HEAD>

<BODY>

<H1>Headline is blue</H1>

<P STYLE="color: green">While the paragraph is green. -------<라>

</BODY>

</HTML>

위의 예에서 <가>'LINK' 요소를 이용하여 외부 style sheet와 연결하거나, <나>'HEAD'요소 내부의 'STYLE' 요소를 이용, 또는 <다>CSS '@import' 표현을 이용하여 style sheet를 수용하거나, <라>'BODY' 내부의 요소에 'STYLE' 애트리뷰트를 이용하여 스타일과 연결시킬 수 있다.

Style sheet의 크기를 작게 하기 위하여 그룹 선택자를 이용한다.

H1, H2, H3 { font-family: helvetica }

마찬가지로 선언도 그룹지울 수 있다.

H1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: helvetica;

font-variant: normal;

font-style: normal;

}

또한 일부 속성은 그 속성만의 그룹 형식을 가질 수 있다.

H1 { font: bold 12pt/14pt helvetica }

CSS에서는 하나 이상의 style sheet를 동시에 적용하여 나타낼 수 있다. 이를 위하여 디자이너는 여러 개의 style sheet를 결합할 수 있다.

@import url(http://www.style.org/pastoral);

@import url(http://www.style.org/marine);

H1 { color: red } /* override imported sheets */

중복되는 style sheet를 표현할 때 충돌이 생길 수 있는데, 이를 해결하기 위하여 선언에 weight를 부여하거나 cascading 순서를 부여하는 등의 방법을 제공하고 있다.

4. Layers

Netscape Communicator Preview Release의 Navigator 4.0에서는 'Layer'라는 새로운 개념의 기능을 제공한다. Layer는 웹 페이지상의 내용에 대하여 위치 지정을 보다 정밀하게 할 수 있는 기능을 제공하고, 또한 면을 계층으로 구분하여 투명하거나 불투명하게 계층을 중첩시킬 수 있는 기능을 제공한다. 몇 줄 안되는 JavaScript 코드를 이용하여 Layer를 움직일 수도 있고, Layer를 숨길 수도 있으며, Layer들이 중첩되는 순서를 변화시킬 수도 있다. Layer를 가지고 HTML과 JavaScript를 이용하여 웹 페이지에 다이나믹한 애니메이션을 만들 수 있다.

Navigator 4.0은 JavaScript의objects와 methods를 확장하여 Layer object와 Layer array를 포함시켜 문서의 모든 layer에 적용되도록 하였다. 이것은 layer들의 position, visibility, 그리고 z-order(staking order)의 다이나믹한 제어를 가능하도록 한다.

4.1 Hiding 및 Showing Layer

Visibility의 특성을 이용하여 layer를 숨기거나 보이도록 하여 가시효과를 높일 수 있다. visibility속성을 HIDE로 지정하면 페이지가 처음에 로드될 때 숨겨지도록 보여진다. 숨겨진 layer의 visibility 속성을 SHOW로 지정하면 JavaScript를 이용하여 갑자기 화면에 나타나도록 할 수 있다. 같은 방법으로 보이는 layer를 잠시 혹은 계속적으로 사라지게 할 수 있다.

간단한 예로써, "Add me to your mailing list"라는 제목의 checkbox 를 만드는 경우, 처음에는 이 checkbox만 화면에 보여지게 된다. 사용자가 이 checkbox를 check 할 때, 사용자의 E-mail 주소를 입력하기 위한 자료 입력화면이 나타나도록 만들 수 있다. 여러 개의 hidden layer 를 이용하여 보다 복잡한 시각 효과를 보일 수 있는 화면을 구성할 수 있을 것이다.

4.2 Moving Layers

Layer object의 LEFT 와 RIGHT 속성, 그리고 offset()이나 moveTo() 방법을 이용하여 페이지가 그려진 이 후에 layer를 다이나믹하게 움직일 수 있다. 보이는 layer가 페이지를 가로질러 점프하도록 만들 수도 있고, 숨겨진 layer가 보여질 위치로 움직이도록 할 수도 있다. 이 기능을 활용할 예를 들어보면, 3x3의 그림 맞추기 퍼즐을 들 수 있겠다. 그림을 9조각 내고, 9조각 가운데 한 조각은 비어 있어서 그 빈칸을 이용하여 나머지 8조각을 움직여 완성된 그림으로 조각 맞추기를 할 수 있다. 이 퍼즐을 layer를 이용하여 만든다면, 한 layer에 하나의 그림 조각을 갖도록 layer들을 구성한다. 사용자가 그림조각을 클릭할 때(onClick()을 이용) 그림 조각이 빈 공간으로 이동하도록 layer를 재위치 시키도록 하면 layer를 이용한 퍼즐 조각 맞추기 게임이 될 것이다.

4.3 Reclipping Layers

Layer object clip과 resize()는 layer가 변화되어 보여지는 기능을 제공한다. 이것의 좋은 예는 pull-down 메뉴이다. Pull-down 메뉴를 만들기 위하여 layer는 메뉴 제목을 포함하여 전체 메뉴를 보이도록 정의한다. 이 페이지가 처음 보여질 때 전체 메뉴중 제목만이 보이도록 이 layer의 CLIP 속성을 정의한다. 사용자가 메뉴의 제목을 클릭할 때, layer의 clipping은 전체 메뉴가 보이도록 바뀌어진다. 사용자가 메뉴 아이템 중 하나를 선택하면 메뉴 layer의 clip 속성은 원래의 값으로 reset하게 된다.

4.4 Animation

앞서 설명한 기능들을 반복하거나 복합적으로 이용하여 layer animation을 만들 수 있다. 한 layer가 그 처음 위치에서 최종위치로 점진적으로 움직이게 할 때 회면에서 미끄러지듯 움직이는 것처럼 보이게 할 수 있다. 이때 점진적으로 움직이는 시간 간격을 조정하여 움직이는 속도를 조절할 수도 있다. 이렇게 layer를 animate 할 수 있도록 setTimeout()을 제공한다.

Function moveSomeLayer()

code which performs one movement of your layer(s) goes here

function layer_timeout()

moveSomeLayer();

set Timeout ("layer_timeout()", 100);

layer_timeout();

4.5 Layers Syntax

Layer의 구문은 다음과 같다.

<LAYER NAME="layerName"

LEFT=xPosition (number of pixels or percentage of window/parent layer)

TOP=yPosition (number of pixels or percentage of window/parent layer) Z-INDEX=layerZ (positive integer)

WIDTH=layerWidth (number of pixels or percentage of window/parent layer)

HEIGHT=layerHeight (number of pixels or percentage of window/parent layer)

CLIP="x1_offset, y1_offset, x2_offset, y2_offset "(number of pixels or percentage of window/parent layer)

ABOVE="layerName"

BELOW="layerName"

VISIBILITY= SHOW | HIDE | INHERIT

BGCOLOR="rgbColor" (name of a standard color or a hexidecimal RGB value)

BACKGROUND="imageURL" (URL of a background image)> SRC="URL"

LAYER OBJECT METHODS

Layering을 위한 JavaScript의 확장으로 이동, 크기 변경 등을 위하여 다음과 같은 methods들이 있다.

moveBy(x, y)

moveTo(x, y)

resizeTo(width, height)

resizeBy(delta width, delta height)

moveAbove(layer), moveBelow(layer)

그림 1. Layer를 이용한 입체적이고 동적인 화면의 구성(1)

그림 2. Layer를 이용한 입체적이고 동적인 화면의 구성(2)

5. 결론

HTML 2.0이 발표된 후 오랜 시간 동안 버젼 3.0이 draft 상태로 제안되었다가 HTML 3.2가 표준으로 최근 제정되었고, 그 부분적인 기능들이 일부 브라우저에 구현되고 있다. 또한 문서에서 보일 내용의 속성을 자유롭게 지정하여 위치와 색상들에 구애받지 않고 표현할 수 있는 Cascading Style Sheet가 정식 발표되었다. 이에 브라우저의 대표격인 Netscape사는 페이지에 계층 개념을 도입하여 입체적인 화면이나 동적인 화면을 표현할 수 있는 Layer를 발표하고 있다. Layer는 아직 표준을 제정되지 않고 Netscape의 브라우저만 지원하기 때문에 그 사용의 확대 여부에 대하여서는 더 두고 보아야 할 것이다.

과거 HTML은 동적인 화면의 구성이 어려운 단점이 있었으나 최근 JAVA가 발표되어 어느 정도 동적인 모습들을 구현함으로써 웹의 동적인 구성에 시작점이 되었다. 최근 발표된 HTML 3.2, CCS1, 그리고 Layers는 이러한 동적인 웹의 구성에 새로운 전기가 되어 인터넷 상에서 널리 활용될 것으로 기대된다.

Reference

[HTML 3.2] HTML 3.2 Reference Specification, W3C Recommendation 14-Jan-1997 http://www.w3.org/pub/WWW/TR/REC-html32.html

[CCS1] Cascading Style Sheets, level 1, W3C Recommendation 17-Dec-1996 http://www.w3.org/pub/WWW/TR/WD-css1

[Netscape Layers] Netscape 4.0 Layers

http://www.this.com/i/tech/ns40/ns40.html

[Layers] Creating Multiple Layers in an HTML Page http://developer.netscape.com/library/documentation/communicator/layers/layers.htm

[HTML3.2 and Netscape 4.0] HTML3.2 and Netscape 4.0, How to tame the wild Mozilla http://webreference.com/html3andns/