div태그
div 는 division 의 영문 약자로 경계를 분활 하다 또는 영역을 나누다 라는 뜻을 가지고 있습니다.
우리가 인터넷상에서 문서를 만들기 위해서는 웹언어를 사용 할 수 밖에 없으며 웹언어를 기록 하기 위해서는 부득이 HTML 문서로 컴퓨터상에 기록 해 주어야만 합니다.
HTML 문서를 만들기 위해 웹표준으로 규정한 태그 부호를 사용 하는데요 꺽쇠 부호를 사용 하며 <열림태그> 와 </닫힘 태그>로 이루어 집니다.
태그 안에 여러가지 종류의 요소와 속성과 값 그리고 엘리먼트들을 기록 하여 원하는 웹문서를 만들수 있는것이죠
div 는 HTML문서에 사용 하는 수많은 요소들 중의 하나이며 블록을 정의하는 요소로서 태그로 감싸 기록 할수가 있죠
지난시간에 이런것들은 다루었기에 오늘은 div 의 기본성질과 각종의 속성들과 값으로 예제를 만들어 div태그에 대해 심도 있게 접근 해보는 시간을 갖도록 해봅니다.
이전에는 홈페이지나 문서의 레이아웃 구성에 table태그를 많이 사용 했지만 요즘은 frameset구성을 대부분 DIV를 이용해 구성 하는 추세 이므로 그만큼 DIV 태그의 쓰임새는 매우 중요 해 졌다고 할수가 있겠네요
서두에 이야기 한것처럼 div의 영역분활 기능은 컴퓨터 브라우져의 화면에 구현 되는 영역들을 나누고 표현 할때 사용 되어 지는 것이죠
div 태그는 완벽한 하나의 독립된 영역을 기본 성질로 가지고 있습니다.
그럼 어떻게 영역 분활이 이루어 지는지 예제를 들어 보도록 합니다.
직접 태그에 주입 하는 방식은 문서가 매우 복잡 해 지므로 스타일 시트로 꾸미도록 하겠습니다.
먼저 보통 홈페이지에 사용 되고 있는 frameset의 모양을 예제로 구성 해 보도록 하겠습니다.
보통의 경우 상부에 홈페이지의 대문 스킨을 그리고 좌측이나 우측에 사이드바를 만들고 하단에는 라이센스를 정의 하는 부분을 만들어 주게 되는 것이죠
예제1)
css
<Style>
#dva{margin-top:5px; margin-bottom:5px; width:100%; height:50px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding:13px; background:rgb(230,0,0);}
#dvb{float:left; margin-right:5px; width:20%; height:150px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:65px; background:rgb(0,230,0); position:absolute;}
#dvc{float:left; margin:0px; width:80%; height:150px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:65px; background:rgb(0,0,230); position:absolute; left:21%;}
#dvd{margin-top:5px; width:100%; height:50px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding:12px; background:rgb(230,0,230);position:relative;top:155px; clear:both;}
#abc{position:relative;}
#dvaa{float:left; margin-right:-1px; width:50px; height:50px; border:1px solid red; border-top-left-radius:100%; text-align:center; padding-top:12px; background:rgb(230,100,0);}
#dvbb{float:left;width:50px; height:50px; border:1px solid red; border-top-right-radius:100%; text-align:center; padding-top:12px; background:rgb(230,0,200);}
#dvcc{float:left; margin-right:-1px; margin-top:-1px; width:50px; height:50px; border:1px solid red; border-bottom-left-radius:100%; text-align:center; padding-top:12px; background:rgb(30,200,200);}
#dvdd{float:left; margin-top:-1px;width:50px; height:50px; border:1px solid red; border-bottom-right-radius:100%; text-align:center; padding-top:12px; background:rgb(0,100,230);}
div,p,br,b,span{font-family:'Malgun Gothic ','맑은고딕','sans-serif ';font-size:14pt; line-height:24px; font-weight:normal;}
#dve{float:left; margin-right:-1px; width:150px; height:150px; border:1px solid red; border-top-left-radius:100%; text-align:center; padding-top:72px; background:rgb(230,100,0);}
#dvf{float:left;width: width:150px; height:150px; border:1px solid red; border-top-right-radius:100%; text-align:center; padding-top:72px; background:rgb(230,0,200);}
#dvg{float:left; margin-right:-1px; margin-top:-1px; width:150px; height:150px; border:1px solid red; border-bottom-left-radius:100%; text-align:center; padding-top:72px; background:rgb(30,200,200);}
#dvh{float:left; margin-top:-1px; width:150px; height:150px; border:1px solid red; border-bottom-right-radius:100%; text-align:center; padding-top:72px; background:rgb(0,100,230);}
#stalv{font-family:'Malgun Gothic ','맑은고딕','sans-serif ';font-size:14pt; line-height:24px; color:rgb(230,230,230); border-top:1px solid blue; border-left:1px solid blue; border-right:1px solid blue; border-bottom:1px solid blue; background:rgb(200,50,200); border-radius:0.3em; text-align:center; padding:7px;}
.bogo{font-family:'Malgun Gothic ','맑은고딕','sans-serif ';font-size:14pt; line-height:24px; color:rgb(230,0,0);}
.bogg{font-family:'Malgun Gothic ','맑은고딕','sans-serif ';font-size:14pt; line-height:24px; color:rgb(230,0,230);}
</Style>
예제1 코딩소스)
<div id="dva">홈페이지</div>
<div id="dvb">사이드바</div>
<div id="dvc">바디</div>
<div id="dvd">foot</div>
예제1 결과)
보통의 경우 홈페이지 모습은 위처럼 레이아웃 해주고 있습니다.
위에서 각부분의 높이를 자신의 홈페이지에 맞도록 수정 해주면 되겠죠
영역이란 block의 면적을 가지는것을 의미 하므로 div 태그 역시 그런 면적을 속성으로 설정 해주지 않으면 안됩니다.
이때 넓이를 설정 해주는 속성으로 width를 사용하며 이속성은 모든 블록 엘리먼트에 공통으로 사용 되는 속성 입니다.
높이를 설정하는 속성으로는 height 를 사용 하며 역시 모든 블록 엘리먼트에 공통으로 사용 됩니다.
속성 값으로는 auto와 퍼센트 그리고 픽셀이 있습니다.
위의 레이아웃에서 홈페이지부에는WIDTH의 속성 값으로 width:100%; 퍼센트로 처리 해준것을 볼수 있죠 그리고 높이는 height:50px; 이렇게 픽셀로 처리 했습니다.
퍼센트 처리는 BODY부 에 대한 퍼센트 이며 보통의 경우 홈페이지나 콘텐츠를 구성 하는 레이아웃의 전체크기를 지정 할때 사용 해주게 되며 세밀하게 구성 해야 하는 부분에는 픽셀값을 사용 하는것이 바람직 합니다.
만약 AUTO값으로 처리 하게 되면 넓이는 BODY부에 대하여 100% 적용 되어지며 높이는 텍스트나 콘텐츠의 내용물에 상응 하여 크기가 조절 됩니다.
border 속성은 div영역의 테두리 선을 결정하는 속성 이며 4가지의 속성값을 가집니다.
solid(실선)
dotted(점선)
deshed(짧은 실선)
border-radius(라운드)
만약 아래 예제 2 처럼 이렇게 코딩을 한다면
예제2 스타일 소스)
#bord1{margin-bottom:10px; width:100px; height:50px; border:3px SOLIDred;/* border-radius:0.3em;*/ text-align:center; padding:7px; background:rgb(230,100,0);}
#bord2{margin-bottom:10px; width:100px; height:50px; border:3px DOTTED gray;/* border-radius:0.3em; */text-align:center; padding:7px; background:rgb(230,100,0);}
#bord3{margin-bottom:10px; width:100px; height:50px; border:3px DASHED blue;/* border-radius:0.3em;*/ text-align:center; padding:7px; background:rgb(230,100,0);}
예제2 코딩소스)
<div id="bord1">1번</div>
<div id="bord2">2번</div>
<div id="bord3">3번</div>
예제2 결과)
아래의 예제들은border-radius의 속성 값을 지정 하는 방법들 입니다.
스타일 소스에서 제어 하고 있으므로 스타일 소스에서 확인하고 코딩소스와 결과를 함께 보면 방법에 대해 상세히 알수가 있습니다.
예제3 스타일 소스)
#bord5{margin-bottom:10px; width:100px; height:50px; border:3px solid red; border-top-left-radius:1em; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord6{margin-bottom:10px; width:100px; height:50px; border:3px solid gray; border-top-right-radius:1em; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord7{margin-bottom:10px; width:100px; height:50px; border:3px solid blue; border-bottom-right-radius:1em; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord8{margin-bottom:10px; width:100px; height:50px; border:1px solid lime; border-bottom-left-radius:1em; text-align:center; padding:7px; background:rgb(230,100,0);}
예제3 코딩소스)
<div id=bord5>1번</div>
<div id=bord6>2번</div>
<div id=bord7>3번</div>
<div id=bord8>4번</div>
예제3 결과)
예제4 스타일 소스)
#bord9{margin-bottom:10px; width:100px; height:50px; border:1px solid red; border-radius:0.5em 0.5em 0 0; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord10{margin-bottom:10px; width:100px; height:50px; border:1px solid gray; border-radius:0 0 0.5em 0.5em; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord11{margin-bottom:10px; width:100px; height:50px; border:1px solid blue; border-radius:0.5em; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord12{margin-bottom:10px; width:100px; height:100px; border:1px solid lime; border-radius:50%; text-align:center; padding:35px; background:rgb(230,100,0);}
예제4 코딩 소스)
<div id=bord9>1번</div>
<div id=bord10>2번</div>
<div id=bord11>3번</div>
<div id=bord12>4번</div>
예제4 결과)
오늘 유의 해서 보아야할 요소는 지난시간에 배우지 않은 추가된 요소 인데요
div태그의 배경을 결정 하는BACKGROUND 속성은 div영역의 배경을 제어 해주며 속성 으로는 IMAGE 와 COLOR를 가지고 있습니다.
BACKGROUND-IMAGE 의 값으로는 REPEAT과 NOREPEAT이 있으며 REPEAT 은 배경을 영역 넓이 내에서 반복적으로 구현 해주며 NOREPEAT은 한번만 영역에 위치 시켜주도록 하는 값입니다.
background-repeat:no-repeat
background-repeat:repeat
배경 이미지를 고정 시켜주는 속성으로는 BACKGROUND-ATTACMENT가 있습니다.
BACKGROUND-COLOR 를 지정 하는 값으로는 색의 삼원색으로 제어 하는 방법인 RGB( ) 와 유니코드의 십육진수를 사용 하는 방법 #FFF #...그리고 라틴 고유 색상명 RED,BLUE,GREEN 등으로 제어 하는 방법으로 나눌수가 있습니다.
예제4-1 스타일 소스)
#bord3{margin-bottom:10px; width:100px; height:50px; border:1px solid red; border-radius:0.5em 0.5em 0 0; text-align:center; padding:7px; background:rgb(230,100,0);}
#bord14{margin-bottom:10px; width:100px; height:50px; border:1px solid gray; border-radius:0 0 0.5em 0.5em; text-align:center; padding:7px; background:#ffcc20;}
#bord15{margin-bottom:10px; width:100px; height:50px; border:1px solid blue; border-radius:0.5em; text-align:center; padding:7px; background:green;}
#bord16{margin-bottom:10px; width:100px; height:100px; border:1px solid lime; border-radius:50%; text-align:center; padding:35px; background:lime;}
예제4-1 코딩 소스)
<div id=bord13>1번</div>
<div id=bord14>2번</div>
<div id=bord15>3번</div>
<div id=bord16>4번</div>
예제4-1 결과)
이제 div에 속성과스타일로 면적을 갖게된 레이아웃이 완성되었다면 페이지내에 어디에 배치하여야 사용 목적을 최대한 끌어 올릴수 있을지를 결정 하는 순서로 넘어 가게 됩니다.
위나 아래에 공간이 있을 경우에만 자리를 잡게 되며 body 의 가로 면적에 영향을 받게 됩니다.
상위에 존재하는<div>의 영역이 있고 공간이 있을때 상위<div>의 영역의 옆에 left 값으로 위치 시켜 주는 식이 되는 것이죠
그렇기 때문에 left 나 right 만 으로 만족 할수 있는 것 입니다.
만약 float속성 없이 가로 정렬을 하고자 할때는 display 값으로 inline-block을 설정 해주어야 합니다.
만약 block 엘리먼트 로 float을 설정 했을 경우margin이나 position 속성을 따로 주어야 세부적 으로 윈하는 위치를 안정적 으로 잡을수 있습니다.
<div>태그의 기본성질은 상하로 자리 하는 블록요소로 마진값을 주지 않으면 서로 달라 붙게 되는데 이때 상하에 마진값을 주어 여백을 결정 해줘 야 합니다.
아래의 예제처럼 div에 위치를 설정 하지 않을 경우 기본적으로 한칸씩의 블록으로 세로 정렬이 됩니다.
예제5 스타일)
.borda{margin-bottom:1px; width:100px; height:50px; border:3px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
예제5 코딩소스)
<div class=borda>1번</div>
<div class=borda>2번</div>
<div class=borda>3번</div>
<div class=borda>4번</div>
예제5 결과)
영역을 가로로 정렬 시 float: left 속성과 값으로 레이 아웃 합니다.
예제6 스타일)
.bordb{float:left; margin-right:1px; width:100px; height:50px; border:3px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
예제6 코딩소스)
<div class=bordb>1번</div>
<div class=bordb>2번</div>
<div class=bordb>3번</div>
<div class=bordb>4번</div>
예제6 결과)
두칸씩 두줄로 정렬 시 clear속성을 사용 합니다
예제7 스타일)
.bordb{float:left; margin-right:1px; margin-bottom:1px; width:100px; height:50px; border:3px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
예제 7 코딩소스)
<div class=bordb>1번</div>
<div class=bordb>2번</div>
<div class=bordb style="clear:both">3번</div>
<div class=bordb>4번</div>
예제7 결과)
또한 이때 상위의 영역에 float 속성이 주어졌을경우 영향에서 벗어나기 위해 clear 엘리 먼트에 left, float:left 벗어나기 right, float:right 벗어나기 both 상위 float 전체벗어나기 clear:both 이렇게 값을 주면 대응 하는 상위태그 float의 영향을 받지 않게 됩니다.
static:현재 배열 한 자리 기준으로 고정되며 아무런 위치값을 가지지 않습니다.
absolute:절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.
relative:상대위치로 결정되며 무슨 태그 이던 상관 없이 상위에 존재 하는 영역 태그의 위치 값을 기준으로 top, bottom, left, right 속성자로 위치를 결정 해주게 됩니다.
fixed:절대위치인 body값이 기준이 되며 left와 right의 속성자만이 위치를 결정 해주게 되며 스크롤이 움직여도 항상 고정된 값을 가지게 됩니다.
예제8 기본배열)
<html> <meta charset="UTF-8"> <title> 속성값 없는 기본배열</title> <head> <style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;} #da{background-color:red;} #db{background-color:green;} #dc{background-color:blue;} #dd{background-color:gray;} #de{background-color:lime;} </style> </head> <body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> </body> </html>
기본 배열은 넓이와 높이 값으로 면적을가진 레이어를 에디터의 글쓰기 순서에 의해 배치한 레이어 들인데요 이 레이어 들에 position속성자를 사용 하지 않고 margin값만으로 위치를 배열 해 보도록 합니다.
전체 레이어에 margin left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.
예제9 margin 적용)
<html> <head> <meta charset="UTF-8"> <title> 기본배열 에 margin left50px top50px설정</title> <style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; display:margin:50px 0px 0px 50px;} #da{background-color:red;} #db{background-color:green;} #dc{background-color:blue;} #dd{background-color:gray;} #de{background-color:lime;} </style> </head> <body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> <div style="clear:both;"> </div> </body>
</html>
위의 결과에서 알수 있는것처럼현재 위치에서 각 레이어 들이 적용한 값으로 이동 한것을 알수 있습니다.
이번엔 기본값에 position:static left:50px top:50px의 값을 각 레이어에 줘 보도록 하겠습니다.
예제10 position:static)
결과)<html>
<head>
<meta charset="UTF-8">
<title>기본배열에 position:static left 50px top 50px값 설정</title><style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:90px; layout:fixed;position:static; left:50px; top:50px;} #da{background-color:red;} #db{background-color:green;} #dc{background-color:blue;} #dd{background-color:gray;} #de{background-color:lime;} </style> </head> <body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> </body> </html>
예제11 position:absolute)
<html>
<head>
<meta charset="UTF-8"> <title> position:absolute left 50px top 50px설정</title> <style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; position:absolute; left:50px; top:50px;} #da{background-color:red;} #db{background-color:green;} #dc{background-color:blue;} #dd{background-color:gray;} #de{background-color:lime;} </style> </head>
<body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> <div style="clear:both;"> </body>
</html>
이번에는 기본값에 relative left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다.
예제12 position:relative)
<html>
<head>
<meta charset="UTF-8"> <title> position:relative left50px top50px설정</title> <style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; position:relative; left:50px; top:50px;} #da{background-color:red;} #db{background-color:green;} #dc{background-color:blue;} #dd{background-color:gray;} #de{background-color:lime;} </style> </head> <body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> <div style="clear:both;"> </div> </body> </html>
결과)
예제13 position : fixed)
<html>
<head> <meta charset="UTF-8"> <title> position : fixed left 50px top 50px설정</title> <style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:60px; height:30px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; position:fixed; left:50px; top:50px;} #da{background-color:red;} #db{background-color:green;} #dc{background-color:blue;} #dd{background-color:gray;} #de{background-color:lime;} </style>
</head>
<body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> <div style="clear:both;"></div>
</body>
</html>
위의 결과에서 보는것 처럼 fixed값 역시 absolute 처럼 절대 위치인 body를 기준으로 모든 레이어들이 상,하,좌측과 우측 방향의 값에 위치 하지만 스크롤이 움직여도 주어진 좌표에 고정 되어 있다는것을 알수가 있습니다.
현재의 화면상에 라임 색상의 click 박스외 5개 레이어가 바로 픽시드로 고정된 모습 입니다.
position속성자를 사용해 absolute와 fixed 그리고 relative 속성에 지금 까지는 레어어 전체에 공통으로 설정 한 값들을 이번에는 각각의 레이어 들에 다른 값을 주어 위치의 변화를 살펴 보도록 합니다.우선 absolute의 위치 변화를 살펴 보도록 하겠습니다
이번에는 기본값에 absolute left:50px의 값을 주고 top 의 값을 레이어마다 각 각 다르게 줘서 숨겨진 레이어들을 펼쳐 보도록 하겠습니다.
예제14)
<html>
<head>
<meta charset="UTF-8"> <title> position:absolute left 50px top 의 값을 각각 다르게 설정</title>
<style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;} #da{background-color:red;position:absolute; left:50px; top:0px;} #db{background-color:green;position:absolute; left:50px; top:100px;} #dc{background-color:blue;position:absolute; left:50px; top:200px;} #dd{background-color:gray;position:absolute; left:50px; top:300px;} #de{background-color:lime;position:absolute; left:50px; top:400px;} </style> </head>
<body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> <div style="clear:both;"> </body> </html>
absolute:절대 위치로 결정되며 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.
결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자들로 위치를 결정 해 주게 된다는 걸 알수 있습니다.
기존의 한 좌표 위에 포개져 있어 가려진 레이어들은 볼수가 없었습니다만 숨겨진 상태 의 레이어 들에 절대 위치를 기준으로 각각 다른 값을 주어 레이어 들의 펼쳐진 모습을 볼수 있게 되었 습니다.
이번에는 fixed 로 각각의 레어어에 top값을 따로 주어서 위치 변화를 살펴 보도록 합니다.
예제15)
<html>
<head>
<meta charset="UTF-8"> <title> fixed left 50px top 의 값을 각각 다르게 설정</title>
<style> body{margin:0px; padding:0px;} #da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed;}
#da{background-color:red;position:fixed; left:50px; top:50px;} #db{background-color:green;position:fixed; left:50px; top:100px;}
#dc{background-color:blue;position:fixed; left:50px; top:150px;}
#dd{background-color:gray;position:fixed; left:50px; top:200px;}
#de{background-color:lime;position:fixed; left:50px; top:250px;}
</style> </head>
<body> <div id="da">a</div> <div id="db">b</div> <div id="dc">c</div> <div id="dd">d</div> <div id="de">e</div> <div style="clear:both;"> </body> </html>
결과)
위의 결과에서 나타 나듯 fixed의 경우 클릭박스 하나의 절대적 좌표로 고정 되어 포개져서 나타 나게 되며 스크롤에 상관 없이 그 자리에 고정되어 나타 나게 됩니다.
이번에는 기본값에 relative left:100px top 0px의 값을 각 레이어에 줘 보도록 하겠습니다.예제16)
<head>
<meta charset="UTF-8">
<title> relative left100px top0px설정</title>
<style>
body{margin:0px; padding:0px;}
#da,#db,#dc,#dd,#de{width:100px; height:100px; border:1px solid red; text-align:center; padding-top:35px; layout:fixed; }
#da{background-color:red; position:relative; left:100px; top:0px;}
#db{background-color:green;position:relative; left:100px; top:50px;}
#dc{background-color:blue;position:relative; left:100px; top:100px;}
#dd{background-color:gray;position:relative; left:100px; top:150px;}
#de{background-color:lime;position:relative; left:100px; top:200px;}
</style></head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>
결과)
감사합니다.
추천은 글쓴이 에게 힘을 실어 줍니다.