고정 헤더 영역
상세 컨텐츠
본문
7. HTML 요소의 배치(positioning) 개요
넷스케이프 네비게이터 4.0에서는 웹 페이지 HTML 컨텐트를 고정 배치할지,
투명하게 중첩(overlapping)시킬지, 혹은 불투명하게 할지를 사용자가
결정할 수 있다.
자바스크립트(JavaScript) 코드를 사용하여, 레이어(layers)라고 하는,
위와 같은 HTML 컨텐트 블럭을 수정할 수 있다. 자바스크립트를 사용하면
레이어를 옮기거나 감추거나 확대/축소할 수도 있고, 중첩된 순서를 다시
정렬할 수도 있으며, 배경색이나 배경 이미지 같은 다른 특성들을 수정할
수도 있다. 레이어의 컨텐트를 수정할 수도 있고, 화면 상에 떠다니는
새로운 레이어를 만들 수도 있다. 기본적으로 HTML과 자바스크립트를사용하여 웹 페이지 상의 동적인 애니메이션을 만들 수 있고, 자체
수정하는 웹 페이지를 만들 수 있다.
레이어를 다른 레이어 위에 쌓을 수 있고 투명하거나 불투명하게 만들
수 있다. 레이어가 투명하다면 아래에 놓여 있는 레이어의 컨텐트도
보인다. HTML 문서 본문의 배경색과 배경 이미지를 지정하는 것처럼
각 레이어의 배경색과 배경 이미지도 지정할 수 있다.
레이어를 다른 레이어안에 포함시킬 수 있기 때문에 한 레이어 안에
다른 레이어를 포함시키고, 그 레이어 안에 다시 다른 레이어를 계속해서
포함시킬 수 있다.
넷스케이프 네비게이터 4.0에서 HTML 레이어를 동적으로 배치하는
방법은 다음과 같이 두 가지이다:
* position 속성을 가진 스타일을 정의한다.
* <LAYER> 태그를 사용한다.
문서에 스타일로 정의한 레이어와 <LAYER> 태그를 사용해 정의한 레이어를
같이 포함시킬 수 있다. 레이어가 <LAYER> 태그를 사용해 정의되었을 경우,
스타일을 사용할 수 있다.
7.1 스타일을 사용하여 HTML 컨텐트 배치하기
스타일을 사용하여 HTML 컨텐트 블럭을 배치할 수 있다.
(역주: 앞서 "스타일 시트 레퍼런스"에서 일반적인 스타일 시트에 대해
살펴보았었다.)
이 절에서는 캐스캐이딩 스타일 시트(cascading style sheet, CSS) 구문에
대해 살펴볼 것이다. CSS는 HTML 컨텐트 블럭 배치를 위한 스타일을 정의
하기 위한 것이다. CSS의 W3C 스펙을 보고 싶다면 다음 페이지를 살펴보기
바란다.
http://www.w3.org/pub/www/TR/WD-positioning
CSS는 다양한 브라우저에서 구현될 수 있지만, <LAYER> 태그는
넷스케이프 브라우저에서만 지원한다.
HTML 컨텐트 블록 배치를 위한 스타일에는 항상 property 위치가
포함되어 있다. 그 값은 absolute이거나 relative인데, absolute이면
포함하는(containing) 레이어에서 절대적인 위치라는 것이고, relative이면문서에서의 현재 위치에 대해 상대적인 위치라는 뜻이다.
또한, top 속성과 left 속성을 지정하여 (절대 위치를 사용해 배치된 레이
어에서) 포함하는 레이어나 (상대 위치를 사용해 배치된 레이어에서) 문서의
현재 위치에서 수평 들여쓰기를 나타낼 수도 있다.
배치된 HTML 컨텐트 블럭을 나타내는 스타일은 반드시 position 속성에
대한 값을 지정해야 한다. position 속성값이 지정되지 않은 컨텐트
블럭에 대해서는 스타일 시트 정의 규칙 내에서 마음대로 스타일을 정의할
수 있다.
문서에 절대 위치를 가진 하나 이상의 레이어가 포함되어 있을 경우,
각 레이어의 위치를 표시하기 위해 top과 left에 대한 각 레이어에 대한
자체값이 필요하기 때문에, 이런 레이어들 간에는 스타일을 공유하지 않는다.각 레이어에 대해 각각의 named 스타일을 정의할 수 있기 때문에
각각의 named 스타일을 사용하면 레이어를 정의하는데 아주 효과적이다.
(named style은 고유한 ID를 가진 스타일로 생각하면 된다)
예를 들어, 아래 예에서의 <STYLE> 태그는 두 가지 레이어에 대한 스타일을
정의한다. layer1이라는 이름의 레이어는 페이지의 상단에서 20픽셀,
왼쪽에서 5픽셀 떨어진 곳에 위치한다. layer2라는 이름의 레이어는
상단에서 60픽셀만큼 아래로, 그리고 왼쪽에서 250픽셀만큼 떨어진 곳에
위치한다.
<STYLE TYPE="text/css">
<!--
#layer1 {position:absolute;
top:20px; left:5px;
background-color:#CC00EE;
border-width:1; border-color:#CC00EE;
width:200px;
}
#layer2 {position:absolute;
top:60px; left:250px;
background-color:teal;
width:200px;
border-width:2px; border-color:white;
}
-->
</STYLE>
position 속성에 대해 절대값이나 상대값을 지정하는 모든 스타일은 레이어를
배치시키게 된다. 레이어 스타일은 문서의 본문에서 다른 스타일을 사용하는
것과 마찬가지 방법으로 사용한다. 그러나, 레이어가 단일 개체의 컨텐트 개념으로
동작한다는 점은 명심해 두어야 한다. 레이어에 하나 이상의 요소를
포함시키고자 할 경우, 모든 컨텐트를 포함하는 DIV나 SPAN 같은 레이어
스타일을 포함하는 요소에 적용할 수 있다.
예:
<BODY BGCOLOR=white>
<DIV ID=layer1>
<H1>Layer 1</H1>
<P>Lost of content for this layer.</P>
<IMG SRC="image/violets.jpg" align=right>
<P>Content for layer 1.</P>
<P>More Content for layer 1.</P>
</DIV>
<P ID=layer2>Layer 2</P>
아래 예는 요소가 배치된 레이어임을 지정하기 위해 요소에 직접
STYLE 속성을 사용한다.
<DIV STYLE="position:absolute; top:170px; left:250px;
border-width:1px; border-color:white;
background-color:#6666ff">
<H1>Layer 3</H1>
<P>This is a blue block of HTML content.</P>
</DIV>
스타일을 정의하기 위한 스타일 시트 사용 방법을 알고 있다면,
레이어를 정의하기 위해 최대한으로 스타일을 사용할 수 있다.
아래의 예제는 ridge 스타일의 3차원 테두리가 있는 다양한 색상의 레이어를
만드는 것이다.
#layer4 {position:absolute;
top:300px; left:100px;
color:magenta;
background-color:yellow;
border-width:20px; border-color:cyan;
border-style:ridge;
padding:5%;
}
<BODY>
<DIV ID=layer4>
<H1>Layer 4</H1>
<P>I am a very colorful layer.</P>
</DIV>
</BODY>
절대 위치를 지닌 스타일을 정의할 경우, 그 위치는 top 속성과 left 속성
으로부터 위치를 구할 것이기 때문에 절대 위치 레이어에 대한 여백은
설정하지 않도록 한다.
지금까지의 스타일을 사용한 결과를 보고 싶다면 다음 페이지를 살펴보기
바란다.
http://developer.netscape.com/library/documentation/communicator/
layercs1.htm
예제에 대한 전체 코드를 보려면 layercs1.htm에 대한 소스 코드를 보면
된다.
7.2 <LAYER> 태그를 사용한 HTML 컨텐트 배치
네비게이터 4.0은 HTML 컨텐트 블럭을 배치하기 위한 또다른 구문을 지원하는데,
이 구문은 <LAYER> 태그를 포함하기 위해 HTML을 확장시킨 것이다.
페이지 본문의 <LAYER> 태그 내에 있는 HTML 레이어의 위치와 컨텐트를 지정할수 있는데, 이때 레이어의 컨텐트를 지정하기 전에 레이어를 미리 정의하지
않아도 된다. ID와 TOP, LEFT, BGCOLOR, WIDTH, HEIGHT 같은 레이어에 대한
속성을 지정할 수 있다.
현재까지 <LAYER> 태그는 넷스케이프 네비게이터 4.0 이상의 웹
브라우저에서만 지원된다.다른 브라우저는 <LAYER> 태그 속성을 사용해
정의한 레이어는 처리할 수 없다.
<LAYER> 태그를 사용할 때, 레이어 정의 부분에 인라인 자바스크립트를
사용할 수 있다.
아래의 코드는 <LAYER> 태그를 사용한 예이다.
<!-- TOP과 LEFT, WIDTH에 대한 기본 단위는 픽셀이다 -->
<LAYER ID=layer1 TOP=20pt LEFT=5pt
BGCOLOR="#CC00EE" WIDTH=200>
<H1>Layer 1</H1>
<P>Lots of content for this layer.</P>
<!--
<IMG SRC=violets.jpg align=right>
-->
<P>Content for layer 1.</P>
<P>More Content for layer 1.</P>
</LAYER>
<LAYER ID=layer2 TOP=60 LEFT=250 BGCOLOR=teal WIDTH=200>
<P>Layer 2</P>
</LAYER>
<LAYER ID=layer3 TOP=170 LEFT=250 BGCOLOR="#6666FF">
<H1>Layer 3</H1>
<P>This is a blue block of HTML content.</P>
</LAYER>
<STYLE TYPE="text/css">
</STYLE>
<BODY BGCOLOR=white>
<LAYER ID=layer4 TOp=300 LEFT=100 BGCOLOR=yellow
CLASS=style4>
<H1>Layer 4</H>
<P>I am a very colorful layer.</P>
</LAYER>
</BODY>
지금까지의 스타일을 사용한 결과를 보려면 다음 페이지를 살펴보도록 한다:
http://developer.netscape.com/library/documentation/communicator/
layertg1.htm
넷스케이프 네비게이터 4.0에서는 웹 페이지 HTML 컨텐트를 고정 배치할지,
투명하게 중첩(overlapping)시킬지, 혹은 불투명하게 할지를 사용자가
결정할 수 있다.
자바스크립트(JavaScript) 코드를 사용하여, 레이어(layers)라고 하는,
위와 같은 HTML 컨텐트 블럭을 수정할 수 있다. 자바스크립트를 사용하면
레이어를 옮기거나 감추거나 확대/축소할 수도 있고, 중첩된 순서를 다시
정렬할 수도 있으며, 배경색이나 배경 이미지 같은 다른 특성들을 수정할
수도 있다. 레이어의 컨텐트를 수정할 수도 있고, 화면 상에 떠다니는
새로운 레이어를 만들 수도 있다. 기본적으로 HTML과 자바스크립트를사용하여 웹 페이지 상의 동적인 애니메이션을 만들 수 있고, 자체
수정하는 웹 페이지를 만들 수 있다.
레이어를 다른 레이어 위에 쌓을 수 있고 투명하거나 불투명하게 만들
수 있다. 레이어가 투명하다면 아래에 놓여 있는 레이어의 컨텐트도
보인다. HTML 문서 본문의 배경색과 배경 이미지를 지정하는 것처럼
각 레이어의 배경색과 배경 이미지도 지정할 수 있다.
레이어를 다른 레이어안에 포함시킬 수 있기 때문에 한 레이어 안에
다른 레이어를 포함시키고, 그 레이어 안에 다시 다른 레이어를 계속해서
포함시킬 수 있다.
넷스케이프 네비게이터 4.0에서 HTML 레이어를 동적으로 배치하는
방법은 다음과 같이 두 가지이다:
* position 속성을 가진 스타일을 정의한다.
* <LAYER> 태그를 사용한다.
문서에 스타일로 정의한 레이어와 <LAYER> 태그를 사용해 정의한 레이어를
같이 포함시킬 수 있다. 레이어가 <LAYER> 태그를 사용해 정의되었을 경우,
스타일을 사용할 수 있다.
7.1 스타일을 사용하여 HTML 컨텐트 배치하기
스타일을 사용하여 HTML 컨텐트 블럭을 배치할 수 있다.
(역주: 앞서 "스타일 시트 레퍼런스"에서 일반적인 스타일 시트에 대해
살펴보았었다.)
이 절에서는 캐스캐이딩 스타일 시트(cascading style sheet, CSS) 구문에
대해 살펴볼 것이다. CSS는 HTML 컨텐트 블럭 배치를 위한 스타일을 정의
하기 위한 것이다. CSS의 W3C 스펙을 보고 싶다면 다음 페이지를 살펴보기
바란다.
http://www.w3.org/pub/www/TR/WD-positioning
CSS는 다양한 브라우저에서 구현될 수 있지만, <LAYER> 태그는
넷스케이프 브라우저에서만 지원한다.
HTML 컨텐트 블록 배치를 위한 스타일에는 항상 property 위치가
포함되어 있다. 그 값은 absolute이거나 relative인데, absolute이면
포함하는(containing) 레이어에서 절대적인 위치라는 것이고, relative이면문서에서의 현재 위치에 대해 상대적인 위치라는 뜻이다.
또한, top 속성과 left 속성을 지정하여 (절대 위치를 사용해 배치된 레이
어에서) 포함하는 레이어나 (상대 위치를 사용해 배치된 레이어에서) 문서의
현재 위치에서 수평 들여쓰기를 나타낼 수도 있다.
배치된 HTML 컨텐트 블럭을 나타내는 스타일은 반드시 position 속성에
대한 값을 지정해야 한다. position 속성값이 지정되지 않은 컨텐트
블럭에 대해서는 스타일 시트 정의 규칙 내에서 마음대로 스타일을 정의할
수 있다.
문서에 절대 위치를 가진 하나 이상의 레이어가 포함되어 있을 경우,
각 레이어의 위치를 표시하기 위해 top과 left에 대한 각 레이어에 대한
자체값이 필요하기 때문에, 이런 레이어들 간에는 스타일을 공유하지 않는다.각 레이어에 대해 각각의 named 스타일을 정의할 수 있기 때문에
각각의 named 스타일을 사용하면 레이어를 정의하는데 아주 효과적이다.
(named style은 고유한 ID를 가진 스타일로 생각하면 된다)
예를 들어, 아래 예에서의 <STYLE> 태그는 두 가지 레이어에 대한 스타일을
정의한다. layer1이라는 이름의 레이어는 페이지의 상단에서 20픽셀,
왼쪽에서 5픽셀 떨어진 곳에 위치한다. layer2라는 이름의 레이어는
상단에서 60픽셀만큼 아래로, 그리고 왼쪽에서 250픽셀만큼 떨어진 곳에
위치한다.
<STYLE TYPE="text/css">
<!--
#layer1 {position:absolute;
top:20px; left:5px;
background-color:#CC00EE;
border-width:1; border-color:#CC00EE;
width:200px;
}
#layer2 {position:absolute;
top:60px; left:250px;
background-color:teal;
width:200px;
border-width:2px; border-color:white;
}
-->
</STYLE>
position 속성에 대해 절대값이나 상대값을 지정하는 모든 스타일은 레이어를
배치시키게 된다. 레이어 스타일은 문서의 본문에서 다른 스타일을 사용하는
것과 마찬가지 방법으로 사용한다. 그러나, 레이어가 단일 개체의 컨텐트 개념으로
동작한다는 점은 명심해 두어야 한다. 레이어에 하나 이상의 요소를
포함시키고자 할 경우, 모든 컨텐트를 포함하는 DIV나 SPAN 같은 레이어
스타일을 포함하는 요소에 적용할 수 있다.
예:
<BODY BGCOLOR=white>
<DIV ID=layer1>
<H1>Layer 1</H1>
<P>Lost of content for this layer.</P>
<IMG SRC="image/violets.jpg" align=right>
<P>Content for layer 1.</P>
<P>More Content for layer 1.</P>
</DIV>
<P ID=layer2>Layer 2</P>
아래 예는 요소가 배치된 레이어임을 지정하기 위해 요소에 직접
STYLE 속성을 사용한다.
<DIV STYLE="position:absolute; top:170px; left:250px;
border-width:1px; border-color:white;
background-color:#6666ff">
<H1>Layer 3</H1>
<P>This is a blue block of HTML content.</P>
</DIV>
스타일을 정의하기 위한 스타일 시트 사용 방법을 알고 있다면,
레이어를 정의하기 위해 최대한으로 스타일을 사용할 수 있다.
아래의 예제는 ridge 스타일의 3차원 테두리가 있는 다양한 색상의 레이어를
만드는 것이다.
#layer4 {position:absolute;
top:300px; left:100px;
color:magenta;
background-color:yellow;
border-width:20px; border-color:cyan;
border-style:ridge;
padding:5%;
}
<BODY>
<DIV ID=layer4>
<H1>Layer 4</H1>
<P>I am a very colorful layer.</P>
</DIV>
</BODY>
절대 위치를 지닌 스타일을 정의할 경우, 그 위치는 top 속성과 left 속성
으로부터 위치를 구할 것이기 때문에 절대 위치 레이어에 대한 여백은
설정하지 않도록 한다.
지금까지의 스타일을 사용한 결과를 보고 싶다면 다음 페이지를 살펴보기
바란다.
http://developer.netscape.com/library/documentation/communicator/
layercs1.htm
예제에 대한 전체 코드를 보려면 layercs1.htm에 대한 소스 코드를 보면
된다.
7.2 <LAYER> 태그를 사용한 HTML 컨텐트 배치
네비게이터 4.0은 HTML 컨텐트 블럭을 배치하기 위한 또다른 구문을 지원하는데,
이 구문은 <LAYER> 태그를 포함하기 위해 HTML을 확장시킨 것이다.
페이지 본문의 <LAYER> 태그 내에 있는 HTML 레이어의 위치와 컨텐트를 지정할수 있는데, 이때 레이어의 컨텐트를 지정하기 전에 레이어를 미리 정의하지
않아도 된다. ID와 TOP, LEFT, BGCOLOR, WIDTH, HEIGHT 같은 레이어에 대한
속성을 지정할 수 있다.
현재까지 <LAYER> 태그는 넷스케이프 네비게이터 4.0 이상의 웹
브라우저에서만 지원된다.다른 브라우저는 <LAYER> 태그 속성을 사용해
정의한 레이어는 처리할 수 없다.
<LAYER> 태그를 사용할 때, 레이어 정의 부분에 인라인 자바스크립트를
사용할 수 있다.
아래의 코드는 <LAYER> 태그를 사용한 예이다.
<!-- TOP과 LEFT, WIDTH에 대한 기본 단위는 픽셀이다 -->
<LAYER ID=layer1 TOP=20pt LEFT=5pt
BGCOLOR="#CC00EE" WIDTH=200>
<H1>Layer 1</H1>
<P>Lots of content for this layer.</P>
<!--
<IMG SRC=violets.jpg align=right>
-->
<P>Content for layer 1.</P>
<P>More Content for layer 1.</P>
</LAYER>
<LAYER ID=layer2 TOP=60 LEFT=250 BGCOLOR=teal WIDTH=200>
<P>Layer 2</P>
</LAYER>
<LAYER ID=layer3 TOP=170 LEFT=250 BGCOLOR="#6666FF">
<H1>Layer 3</H1>
<P>This is a blue block of HTML content.</P>
</LAYER>
<STYLE TYPE="text/css">
</STYLE>
<BODY BGCOLOR=white>
<LAYER ID=layer4 TOp=300 LEFT=100 BGCOLOR=yellow
CLASS=style4>
<H1>Layer 4</H>
<P>I am a very colorful layer.</P>
</LAYER>
</BODY>
지금까지의 스타일을 사용한 결과를 보려면 다음 페이지를 살펴보도록 한다:
http://developer.netscape.com/library/documentation/communicator/
layertg1.htm
