★ 원하는 "X, Y"축 방향의 스크롤 없애기
1. 아래의 내용은 <IFrame> 기능으로 불러들인 결과물 입니다
- X의 스크롤을 Hidden으로 지정한 것이고
- Y의 스크롤을 Hidden으로 지정한 것입니다.
★ 이번 에제는 내용의 양이 모호하면 스크롤이 X축 또는 Y축에 동시에 생기는 현상이 있습니다.
이런경우 CSS 한줄이면 원하는 방향에 스크롤을 강제로 없애는 기능입니다
<html>
<head>
<title>원하는 "X"축 방향의 스크롤 없애기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
#scrollbox {width:400; height:100; overflow:scroll; overflow-X: hidden; padding:0px; border:0px solid black;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="516" border="0" height="84" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>
<div id="scrollbox" wrap=off> <font size="2"><br>
</font>
<table width="496" border="0" height="36" cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="31" bgcolor="#F6F6F6"><font size="2">기다릴수 있는 사랑... 그대여
지난날의 아픔은 모두 다 잊어요<br>
이제는 내가 그대 슬픔을 함께 하며 안아<br>
줄게 다른 사람에게 그대가 사랑을 준 만큼 내가 그대 더 사랑할게요 날 만나기<br>
전에 그 깊은 상처를 이젠 잊어도돼~~<br>
*그러나 그대여 나에게 사랑을 주기가 너무 어려운가요 그렇게 힘든가요~~<br>
언제까지 나는 그대를 기다릴 수 있어요<br>
행복할 수 있다면 그래서떠난다면 난 괜찮아<br>
그대가 너무 힘들어 외로이 눈물을 흘리면 영원히 곁에 있어준다고 그대를 위해서 <br>
살아가겠다고 나는 기도했어~~<br>
*(Repeat)<br>
언제까지 나는 그대를 기다릴 수 있어요</font> <font size="2"><br>
</font> <font size="2">행복할 수 있다면 그래서 떠난다면 난 괜찮아</font></td>
</tr>
</table>
<div align="center"></div>
</div>
</td>
</tr>
</table>
</body>
</html> |
{2}빨간색으로된 부분을 잘 보시면 {overflow-x: hidden;} 라는 부분들 보이나요?
이 소스에서 {overflow-x: hidden;} 이란 브라우저 하단에 생성된 스크롤을 없앤다는 내용입니다.
만약 {overflow-y: hidden;} 이라면 화면 브라우저 오른쪽 스크롤바를 없애는 내용이겠죠?
<html>
<head>
<title>원하는 "Y"축 방향의 스크롤 없애기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
#scrollbox {width:400; height:100; overflow:scroll; overflow-Y: hidden; padding:0px; border:0px solid black;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="516" border="0" height="84" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>
<div id="scrollbox" wrap=off> <font size="2"><br>
</font>
<table width="496" border="0" height="36" cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="31" bgcolor="#F6F6F6"><font size="2">기다릴수 있는 사랑... 그대여
지난날의 아픔은 모두 다 잊어요<br>
이제는 내가 그대 슬픔을 함께 하며 안아<br>
줄게 다른 사람에게 그대가 사랑을 준 만큼 내가 그대 더 사랑할게요 날 만나기<br>
전에 그 깊은 상처를 이젠 잊어도돼~~<br>
*그러나 그대여 나에게 사랑을 주기가 너무 어려운가요 그렇게 힘든가요~~<br>
언제까지 나는 그대를 기다릴 수 있어요<br>
행복할 수 있다면 그래서떠난다면 난 괜찮아<br>
그대가 너무 힘들어 외로이 눈물을 흘리면 영원히 곁에 있어준다고 그대를 위해서 <br>
살아가겠다고 나는 기도했어~~<br>
*(Repeat)<br>
언제까지 나는 그대를 기다릴 수 있어요</font> <font size="2"><br>
</font> <font size="2">행복할 수 있다면 그래서 떠난다면 난 괜찮아</font></td>
</tr>
</table>
<div align="center"></div>
</div>
</td>
</tr>
</table>
</body>
</html> |
