아이프레임 처럼 스크롤바를 넣고 싶은경우

조회 368 2026-08-18 등록

소개

특정위치의 내용의 가로 세로 사이즈가 고정되어 야 하는경우가있다 이때 범위가 벗어나면 안되는경우가 있는데 벗어나게되면 전체적인 디자인이 깨지거나 하는경우이다 이때 사용하는 방법이 스크롤이 생기게 하는방법인데 아이프레임으로 스크롤을 처리해도 되지만 스타일로 간단하게 처리하는 방법이있다 <table> <tr><td>아이프레임 효과</td></tr> <tr> <td> <div style="width:300px; height:300px;overflow:auto;"> 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 </div> </td> </tr> </table> 가로세로 300px가 넘어가는 경우 자동으로 스크롤 처리하는 부분이다 overflow:auto; 부분으로 스크롤이 없다가 사이즈가 오버되면 그때 스크롤이 생긴다

의견 0

로그인하면 의견을 남길 수 있습니다.

아직 의견이 없습니다. 첫 의견을 남겨보세요.

비슷한 사이트

게시글

html,body 부분의 스크롤바 제거하는 방법

html,body부분의 스크롤바를 제거하고자 하는경우가 있다 이때 사용하는 방법이다 html, body { height:100%;overflow-x:hidden; overflow-y:auto} overflow-x,overflow-y브라우저별,버전별에 따라 지원유무를 파악한후 사용해야한다

게시글

iframe 투명하게 처리하기

페이지내에 iframe있는경우 투명하게 처리하고자 하는경우가 있다 allowtransparency='true' 를 통해 투명하게 처리 할수 있다 이때 주의 해야될것이 이렇게 만 하면되는것이아니다 아이프레임.html 페이지에서도 선언해줘야 하는 부분있데 아래의 css를 넣어줘야 정상적으로 적용된다 body{background-color:transparent;}

게시글

아이디로 스크롤 부드럽게 이동하게 하는 방법

해당 아이디 위치로 부드럽게 이동하게 하는 방법이다 $(function() { var position = $('#이동할아이디').offset(); // 위치값 $('html,body').animate({ scrollTop : position.top }, 1000); // 1초동안 이동 }); 1초동안 부드럽게 스크롤 된다 한줄로 처리하기 위해서 $('html,body').animate({ scrollTop : $('#이동할아이디').offset().top }, 1000); 이런식으로도 가능하며 바로 이동하게 하려면 1000를 0초로 바꾸면 바로 이동한다

게시글

textarea내에 엔터를 통해 자동으로 늘리는 방법

글을 작성할때 엔터키를 누르면 자동으로 세로 사이즈가 늘어나게 하고 싶을때가 있다 이때 사용하는 방법이다

게시글

이미지,프레임 사이즈등 변경하는 정규식

이미지,프레임 사이즈등를 변경하 고자 할때가있다 그럼 해당 width,height 값을 변경해야되는대 해당부분만 고치기 위해서는 정규식이 필요하단 $ext1_1=preg_replace("!width=\"(.*?)!is",'width="400"',$ext1_1);//자동사이즈 조절 $ext1_1=preg_replace("!height=\"(.*?)!is",'height="300"',$ext1_1); width=400,height=300사이즈로 변경하는 정규식이다 유트브에서 "

게시글

부모창에서 자식창(iframe)에 변수,함수 접근하는 방법

자식창에 선언해 놓은 함수나 변수를 접근할수 있다 $('#iframe').get(0).contentWindow.변수명; $('#iframe')[0].contentWindow.변수명; $('#iframe').get(0).contentWindow.함수명; $('#iframe')[0].contentWindow.함수명; 자식창에 id,함수를 접근하는 방법이다 $('#iframe')[0].contentWindow.$('#_parent').height();//높이 100을 가져올수 있다 $('#iframe')[0].contentWindow.js_parent();//함수를 실행할수 있다

웹포트폴리오 제작 | 스크롤시 한쪽영역은 고정되고 한쪽영역만 스크롤되는 애니메이션 - Yo

www.youtube.com

유튜브 채널 '코딩하는 디자이너 [잘난웹디]'의 영상 '웹포트폴리오 제작 | 스크롤시 한쪽영역은 고정되고 한쪽영역만 스크롤되는 애니메이션'이다. 웹 포트폴리오 제작 재생목록에 포함된 강의 영상이다. 제목대로 페이지를 스크롤할 때 화면의 한쪽 영역은 고정해 두고 다른 쪽 영역만 움직이게 만드는 스크롤 애니메이션 레이아웃을 구현하는 과정을 다룬다. 포트폴리오 사이트에서 자주 쓰이는 인터랙션을 직접 코드로 만들어 보는 웹퍼블리싱 실습형 콘텐츠다. 웹퍼블리셔나 웹디자이너를 준비하며 포트폴리오 사이트에 스크롤 효과를 넣고 싶은 입문자에게 유용하다.