본문 바로가기
IT-개발,DB

[javascript] 박스 생성하기

by SB리치퍼슨 2014. 12. 11.

박스 생성하기



- top : 상단의 좌표를 설정합니다.
- left : 좌측의 좌표를 설정합니다.
- height : 해당내용의 높이를 설정합니다.
- width : 해당내용의 너비를 설정합니다.

- overflow : 내용이 박스를 벗어날 경우 표시방법을 설정합니다.
-- visible : 모든 내용을 볼 수 있도록 박스크기를 조절합니다.
-- hidden : 벗어나는 내용은 표시하지 않습니다.
-- scroll : 스크롤바가 생성되어 벗어나는 내용을 볼 수 있습니다.





----------------------------------------------------------------------------------------



<html>
<head>



<style type="text/css">
<!--



p {
border : 2px #808060 dashed;
background-color : #d0e0f0;
}



p.overflow1 {
position : absolute;
top : 20px;
left : 10px;
height : 100px;
width : 120px;
overflow : hidden;
}



p.overflow2 {
position : absolute;
top : 20px;
left : 140px;
height : 100px;
width : 120px;
overflow : visible;
}



p.overflow3 {
position : absolute;
top : 20px;
left : 270px;
height : 100px;
width : 120px;
overflow : scroll;
}



-->
</style>



</head>
<body>



<p class="overflow1">
당신은 오늘 무엇을 찾고 있습니까?<br>
당신이 오늘 찾은 것은 무엇입니까?<br><br>
이와 같이 css는<br>
원하는 위치에 미니윈도우를 띄울 수 있습니다.
</p>
<p class="overflow2">
당신은 오늘 무엇을 찾고 있습니까?<br>
당신이 오늘 찾은 것은 무엇입니까?<br><br>
이와 같이 css는<br>
원하는 위치에 미니윈도우를 띄울 수 있습니다.
</p>
<p class="overflow3">
당신은 오늘 무엇을 찾고 있습니까?<br>
당신이 오늘 찾은 것은 무엇입니까?<br><br>
이와 같이 css는<br>
원하는 위치에 미니윈도우를 띄울 수 있습니다.
</p>



</body>
</html>

반응형

댓글