http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
<html>
<head>
<title>DIV 테이블 나누기 예제 1</title>
</head>
<body>
<div></div>
<div style="float: left;"></div>
<div></div>
</body>
</html> 
<html>
<head>
<title>DIV 테이블 나누기 예제 2</title>
</head>
<div></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
</body>
</html> 
<html>
<head>
<title>DIV 테이블 나누기 예제 2</title>
</head>
<div></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"></div>
</body>
</html>
float이란?
엘리먼트를 좌우 마음대로 띄울수 (float)있다.
-left :왼쪽으로 띄우기
-right : 오른쪽으로 띄우기
-none : 해제
clear란?
엘리먼트 주위에 float 엘리먼트가 오지 못하도록 한다.
-left :왼쪽에 아무것도 부유(float)되지 않도록 한다.
-right : 오른쪽에 아무것도 부유되지 않도록 한다.
-none : 좌/우 부유되지 않도록 한다
==============================================
div 속성은 style시트로 설정한다. 레이어 객체에 접근 할때에는 레이어아이디.style.속성으로 접근한다.
ex) layerID.style.overflow="auto";
< div id="Layer" style="position:absolute;top:20px;left:20px;width:200px;height:100px;z-index:1;visibility:hidden;overflow:auto;background:#ffcc00">
※ 속성
- position : absolute(절대위치) - 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다. 즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통해서 좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.
- relative(상대위치) - 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에 나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서 top, left, right, bottom을 이용해서 위치를 정할수 있습니다. - static(기본값), fixed(고정)
- top : 위부터 아래쪽으로 위치
- left : 왼쪽부터 오른쪽으로 위치
- width : 레이어 가로 길이
- height : 레이어 세로 길이
- z-index : 레이어 순서(값이 높을수록 위쪽)
- visibility : hidden(레이어 숨김), visible(레이어 보임)
background : 레이어 배경색 - overflow : visible(정해진 크기 무시하고 모두 보여줌), hidden(정해진 크기만큼만 보여줌, 넘는 내용은 짤림), scroll(수평,수직 스크롤을 보여줌), auto(내용이 넘치는 방향으로 스크롤 보여줌)
- font-family : 폰트종류
- font-size : 폰트크기
- padding-top : 위쪽으로부터의 안쪽 여백
- padding-left : 왼쪽으로부터의 안쪽 여백
- padding-right : 오른쪽으로부터의 안쪽 여백
- padding-bottom : 아래쪽으로부터의 안쪽 여백
※ 레이아웃에 관련된 속성
- float:left - 레이어가 좌측으로 정렬되며, 이후 추가되는 레이어는 옆(좌측)으로 붙게 된다.
- float:right - 레이어가 우측으로 정렬되며, 이후 추가되는 레이어는 옆(우측)으로 붙게 된다.
- clear:both - 위의 적용이 해제된다.
=================================================================================
| DIV 레이어 속성 |
| Div 레이어는 웹페이지 상에서 위치 지정이 자유롭다는 큰 이점이 있다. 그 속성을 통해 보다 자유롭게 활용하는 법을 배우고자 한다. --> div Box 내에서만 내용 표시 STYLE ="text-overflow : ellipsis; overflow : hidden" STYLE ="text-overflow : ellipsis; overflow : visible" 레이어 overflow . 레이어 속의 내용이 넘칠 경우 사용할 수 있는 옵션으로 x,y 에 대해 다르게 적용할 경우 overflow-x:hidden;overflow-y:scroll 처럼! * 특히 미리 내용의 크기를 알 수 없는 경우(디비의 자료를 레이어에 출력하는...) 선택을 해야한다 <div id="maddog" class="aaaa" style='position: height: 150; background-color: 666666; font-size: 11px; color: #5BF9F5; overflow: auto; padding-top: 5; padding-left: 5; padding-bottom: 5; filter: Alpha(Opacity=50); clip: rect(0 230 150 0); border: 1px none #000000; visibility: visible; z-index: 1'> 여기가 레이어의 내용이 들어갈 자리 </div> id, class style position: (추가) id : 레이어의 이름을 입력 합니다. Style : 인라인 스타일 속성을 지정시 사용합니다. position : 레이어 위치를 절대 위치에 고정시키거나 상대적인 위치값의 변동에 따라 이동 될수 있도록 속성을 지정합니다. absolute : 절대위치 / relative : 상대 위치 left/top : 레이어의 위치값을 입력합니다. width/height : 레어의 너비 및 높이값을 입력합니다. z-index : 레이어간의 층 순서값을 입력합니다. background-color : 배경색상을 지정 합니다. border : 레이어의 경계선 두께 및 선모양 , 색상을 지정합니다. |