테이블(레이어)에 대하여(8)

Table 에관하여 8신 -테이블과 레이어- Table 에관하여 여덟번째 시간입니다. 오늘은 엄밀히말하면 레이어에 관한것이라고 해야겠습니다만 아름다운글 올리기 위하여 테이블내에서 이루어지는 레이어 이기에 테이블 8신에 넣게 되었습니다.

웹문서에 있는 텍스트나이미지를 자유롭게 배치하고 연속동작으로 움직이게 하려면 레이어를 사용해야 합니다. 포토샵이나 플레쉬를 사용해 보았다면 레이어란 개념을 이미 알고 있을겁니다. 만화영화 제작과정을 생각하면 레이어를 쉽게 이해 할수 있습니다. 만화영화는 움직이는 동작을 나타내기위해 각각의 동작을 별도이 슬라이드 필름으로 만들어 연속적으로 보여 줌으로서 움직이는 동작을 만들어 냅니다. 이때 사용하는 필름은 투명하기 때문에 서로 겹쳐 놓으면 여러가지 효과를 만들수 있습니다. 만화 영화를 만들때 사용하는 슬라이드 필름을 레이어라 생각하면 됩니다. 레이어 역시기본적으로 투명하기때문에 여러개의 레이어를 서로 겹쳐서 다양한 효과를 만들수 있습니다 예를 들어 아래와 같은 두개의 이미지가 각 레이어에 들어 있다고 생각할때 두개의 레이어를 서로 겹치면 하나의 이미지 처럼 보일수 있습니다. 레이어와 웹 문서 요소들 웹문서에 레이어를 삽입한다는것은 특정 위치에 이미지나 텍스트를 삽입할수 있는공간을 만드는것 입니다. 레이어는 어디에나 놓을수 있는 투명한 빈그릇이라고 보면 됩니다. 일례로 이미지를 직접 가로 50px 세로 70px 위치에 갖다 놓을수는 없지만 가로 50px 세로 70px 위치에 레이어를 만들고 그안에 이미지를 넣으면 가로 50px 세로 70px 위치에 이미지를 배치할수 있습니다. 레이어와 좌표 값 레이어는 웹문서 어디에나 갖다 놓을수 있습니다 레이어의 위치 지정은 x 좌표 값과 y 좌표값을 사용하는데 x,y 좌표 값은 웹문서의 왼쪽 상단 모서리를 기준으로 합니다 레이어의 특징은 주어진 배경위에 덪붙여 놓을수 있다는 점입니다. 하나의 레이어위에 다른 레이어를 겹쳐 놓을수도 있고 숨길수도 보일수도 있으며 여러가지 움직임이나 다이나믹한 메뉴등을 구성할땐 빠져서는 안될 부분이기도 합니다. 얼마전까지 그다지 많이 쓰이는건 아니었지만 지금은 작은 부분부터 시작하여 많은곳에서 이 레이어의 개념이 사용되고 있습니다. 위에 간단히 레이어가 어떻게 구현되는지를 그림으로 표시하였습니다. 레이어는 위에처럼 본문위에 새로운 화면을 하나 만들어 엎을수 있습니다. 각각의 레이어는 가로, 세로 길이를 지정할수 있으며 보이게 할수도 숨길수도 있습니다. 또한 포지셔닝 개념을 사용하여 지정된 위치에 놓을수도 있구요. 기본적으로 본문의 Z-index 는 0이 됩니다. z-index 란 레이어의 겹쳐지는순서 입니다. 종이를 예로 들까요? 하나의 종이위에 백지 한장을 더 올린다면 밑의 종이는 가려져서 안보이게죠? 레이어도 마찬가지입니다. 물론 투명도나 그런걸 조절하는 방법이 있긴 합니다만 기본적으로 아래에 놓인 레이어는 위쪽에 놓인 레이어에 의해 가려지게 되는 것입니다. 그 레이어가 놓여지는 순서를 정하기 위해 사용하는게 z-index 입니다. 본문의 z-index 는 자동으로 0이 됩니다. 그리고 상단에 놓일수록 z-index 값은 높아져만 갑니다. 물론 z-index 값은 사용자가 임의로 지정할수 있기 때문에 그냥 100 정도의 큰값으로 줘버려서 무조건 상위에 위치하도록 만들기도 하죠 하지만 기본적인 순서는 수치가 높을수록 상위에 있게 됩니다. (음수값(-) 도 줄수 있지만 당연히 본문 뒤에 위치하여 안보이게 되므로 그다지 쓸모가 없습니다.) 이 레이어란게 양날의 칼 같은거라서 잘쓰면 독특한 효과를 보여줄수 있지만 넷스에서는 먹히지 않을때도 많고 너무 많이 쓰면 깨져서 보이는 수도 있습니다. 사용법 1 style="position:absolute; z-index:수치; 가장 간단하게 사용할수 있는 방법은 레이어로 사용할 대상에 style 로 넣어 주시면 됩니다. position은 박스의 표시위치를 결정하기 위한 배치방법을 설장하는 속성입니다 실제로 표시할 위치에 대해서는 top 속성, bottom 속성, left 속성, right 속성,으로 지정 합니다. 이속성의 변수 에는 static, relative, absolute, fixed 가 있습니다. static 특별하게 지정하지 않은 일반적인 상태로 지속 합니다. 이값이 지정되어 있는 경우에는 top 속성, bottom 속성, left 속성, right 속성 은 적용되지 않습니다. relative 일반적인 상태에서 배치되는 위치에서 부터 상대 위치로 배치 하도록 합니다. 이 다음에 계속 배치되는 박스는 이박스가 배치되고 있는경우의 위치에 배치 됩니다. absolute 가장 많이 사용하는 방법중 하나 입니다 이박스를 포함하는 상위 박스를 기본으로 그곳에서 거리를 지정하여 배치하도록 합니다. fixed 값으로서 absolute 를 지정한 경우와 같이 배치 됩니다. 하지만 이 지정으로 표시된 박스는 윈도우에서 그위치가 고정되고, 스크롤 하여도 위치가변하지 않게됩니다. 출력할 대상에 따라서는 윈도우가 아닌 페이지에 고정 됩니다. 전번 시간 배경 그림 위치고정에서도 한번 나왔었죠. 글로서 설명된것을 이해 하시기 어려울 것입니다. 현재 알아야 될것은 absolute 만 아시면 되실듯... 간단한 예를 하나 보면서 설명 하겠습니다. 그림 1 그림 2 이렇게 두개의 그림이 있습니다 위의 그림은 배경으로 사용하고 비둘기 그림은 배경위에 이미지로 삽입하여 이미지 위로 글이 스크롤되게 해보죠. 일반적인 방법 으로는 이미지 옆으로만 글을 올릴수 있습니다만 레이어를 이용하면 이미지 위에도 글이 올라 갈수 있습니다. 이미지 위에 글을 올리기 위하여는 글을 레이어로 만들어주면 되겠죠. 예 1 이미지가 불투명 하기때문에 필터를 사용하여 투명하게 하였고 marquee 를 레이어로 사용. <table width="550" height="370" bgcolor="#000000" cellpadding="0" cellspacing="0" border="3"> <tr> <td background="http://mysesang.com/pic/love1.jpg"> <marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="position:absolute; z-index:1; margin-left:140;"> <span style="font:bold 12px/200%; color:white; FILTER:shadow(color=#9c00ff); height:20px;"> 슬픈 연가 <br><br> 별들이 하나 둘 강가에 내려앉아<br> 지상의 모든 그리움<br> 출렁이는 꽃불로 수를 놓으면<br> 외로움에 울먹이던 가슴은 길을 찾아 떠돈다 . 중략...... </span></marquee> <img src="http://mysesang.com/pic/bird2.jpg" style="filter:alpha(opacity=100,style=3,finshopacity=20);" width=230 height=230> </td></tr></table> 결과 보기 슬픈 연가 별들이 하나 둘 강가에 내려앉아 지상의 모든 그리움 출렁이는 꽃불로 수를 놓으면 외로움에 울먹이던 가슴은 길을 찾아 떠돈다 . 아프면 아플수록 타버려 타버려서 한 줌 재가 되어버린 가슴은 차라리 더 맑은 의식으로 자리하고 밤의 서슬에 놀라 아릿하게 베인 기다림이 무너져 내리면 여윈 강가에 그리움도 사랑도 꽃등으로 지고 말뿐 . 그리움 열병처럼 몽롱한 鄕愁의 기억 저편에 닻을 내리면 바람마저 정결히 강가에 몸을 씻고 홀연히 돌아선다 . 그대 내 가슴 속에 波紋은 젖은 눈물 강으로 마주하고 별 빛 꽃등을 업은 강물도 굽이쳐 황망히 아픈 상처 철렁이며 흘러흘러 떠나는구나 . 예 2 비둘기를 한번움직여 볼까요?. <table width="550" height="370" bgcolor="#000000" cellpadding="0" cellspacing="0" border="3"> <tr> <td background="http://mysesang.com/pic/love1.jpg"> <marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="position:absolute; z-index:1; margin-left:140;"> <span style="font:bold 12px/200%; color:white; FILTER:shadow(color=#9c00ff); height:20px;"> 슬픈 연가 <br><br> 별들이 하나 둘 강가에 내려앉아<br> 지상의 모든 그리움<br> 출렁이는 꽃불로 수를 놓으면<br> 외로움에 울먹이던 가슴은 길을 찾아 떠돈다 . 중략...... </span></marquee> <marquee behavior="alternate" direction="down" scrollamount="1" scrolldelay="100" height="260"> <marquee behavior=alternate direction="right" scrollamount="1" scrolldelay="150"> <img src="http://mysesang.com/pic/bird2.jpg" style="filter:alpha(opacity=100,style=3,finshopacity=20);" width=230 height=230> </marquee></marquee> </td></tr></table> 결과 보기 슬픈 연가 별들이 하나 둘 강가에 내려앉아 지상의 모든 그리움 출렁이는 꽃불로 수를 놓으면 외로움에 울먹이던 가슴은 길을 찾아 떠돈다 . 아프면 아플수록 타버려 타버려서 한 줌 재가 되어버린 가슴은 차라리 더 맑은 의식으로 자리하고 밤의 서슬에 놀라 아릿하게 베인 기다림이 무너져 내리면 여윈 강가에 그리움도 사랑도 꽃등으로 지고 말뿐 . 그리움 열병처럼 몽롱한 鄕愁의 기억 저편에 닻을 내리면 바람마저 정결히 강가에 몸을 씻고 홀연히 돌아선다 . 그대 내 가슴 속에 波紋은 젖은 눈물 강으로 마주하고 별 빛 꽃등을 업은 강물도 굽이쳐 황망히 아픈 상처 철렁이며 흘러흘러 떠나는구나 . behavior=alternate height=260> behavior=alternate> 만들어 놓고 보니깐 그림과 시가 어울리지 않는것 같군요. 서론이 길어져서 정작 활용법을 다올리지 못하였습니다. 다음 시간에도 레이어에 대하여 계속 공부 하도록 하겠습니다