[HTML,CSS] div안에 스크롤바를 달고 이벤트 버튼 넣기

이번 포스팅에서는 몇 일동안 골치를 아프게 했던 것에대해 정리해 보려고 합니다.

div 안에 스크롤 바를 설치하고,

div 영역 안쪽... 우측 하단에 위치가 고정된 버튼(floating button : 플로팅버튼)을 만드는 것입니다.

우선

가장 먼저 해야 할 것은 div 안에 스크롤 바를 만들어 내는 것이 겠지요

스크롤 바를 만드는것은 생각보다 간단합니다.

CSS 속성중 overflow 속성을 주면 됩니다.

<style>

#contents{

width : 500px;

height : 500px;

overflow : scroll;

border : 1px solid #b3b3b3;

}

</style>

<div id="contents">

<!-- 내용 생략 -->

</div>

이렇게 하면 스크롤이 생성됩니다.

위 같은 경우는 가로,세로 모든 스크롤이 생기는 경우이지만

경우에 따라서 세로만 만들거나, 가로만 만들어야 할 필요도 있습니다.

그럴때는 overflow-x 나 overflow-y 속성을 이용합니다.

그럼 이제 드디어 버튼을 div 영역 안쪽에 달아볼 차례 입니다.

(이 부분에서 많이 해매었는데...)

먼저 고백할게 있는데요.. 이 방법은 임시방편일 뿐입니다.

div 안쪽에 위치가 고정된 플로팅 버튼(floating button)을 만드는 정말 좋은 방법을 찾지는 못했습니다.

이번 포스팅에서는 조금 우회하는 방법을 통해 비슷한 효과가 나도록 버튼을 만들어 보려고 합니다.

이 방법에 쓰이는 CSS 속성은 position 입니다.

말그대로 위치 설정과 관련된 속성입니다.

우선 div를 하나 더 추가 합니다.

버튼을 담을 div 입니다.

<div id="buttonBox">

<button>버튼</button>

</div>

그리고 이렇게만 추가 하면

버튼은 아래 그림처럼 

div 아래 나타나게 됩니다.

우리가 원하는건 위쪽의 div 영역 안쪽 우측 하단에 나타나게 하는 것이므로

위치를 CSS 속성을 이용해 지정해 줍니다.

위치만 속성만 주고 position을 주지 않으면, 버튼은 계속 div 아래 있습니다.

#buttonBox{

top : 460px;

left : 430px;

position : fixed;

}

일단 모든 지정이 끝났습니다.

화면을 새로고침하면 버튼이 div 영역 안쪽 우측하단에 올라가 있는 것처럼 보입니다.

내용도 여러줄 입력해서 스크롤을 만들어 보고 스크롤을 움직여 보아도 버튼이 고정되어 있는 것처럼 보입니다.

지금 이 방법은 임시방편일 뿐 근본적으로 문제가 존재하는 방법입니다.

만일 div의 크기가 변경되거나 위치가 조금 이동한다면

버튼의 위치가 원하는 위치게 자동으로 이동하지 않게 되기 때문이죠.

버튼의 위치가 고정되어 있기 때문입니다.

따라서, div 의 크기가 바뀌거나 위치가 바뀌면,

buttonBox의 top와 left 값도 모두 변경해 줘야 합니다.

그래서 근본적인 해결방법이 아닌 임시방편이라고 말했던 이유 입니다.

혹시 더 나은 방법이 있거나 위와 같은 문제를 해결할 방법을 알려 주시면 반영하도록 하겠습니다.

※ 포스팅 내용중에 설명이 잘못 되었거나, 보완이 필요한 부분이 있으면 지적해 주세요~