인벤 스크립트 게시판

10추글

모바일 상단 메뉴

본문 페이지

[기타] TIP : 스크롤 바(Scroll Bar) 가리기

아이콘 Want
댓글: 4 개
조회: 6897
추천: 6
2017-12-09 02:14:28
길게 나열되는 인장을 정리하기 위해, 접고 펼치기(data-inven-toggle)을 사용하거나

스크롤(overflow : scroll)을 사용하는 경우가 많습니다.


그런데 스크롤을 사용했을 때, 스크롤 바를 가리고 싶은 경우도 있을겁니다.

PC모드 인벤의 경우 무려 16px나 자리를 차지하여 이미지의 우측을 약간 가리기도 하고,

저같은 경우 이번에 스마트폰 테마 인장을 제작하는데 스크롤 바가 너무 지저분하게 보이더라구요.


그래서 스크롤 바를 사용하는 방법부터, 가리는 방법까지 간단 팁을 작성하고자 합니다.


(* PC 인벤, 크롬에 최적화되어 작성된 글입니다.)

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

1. 스크롤 바(Scroll Bar)가 필요한 경우

내용이 길게 이어질 경우,

공간이 한정되어 내용물이 잘리거나 내용물이 길게 늘어지게 됩니다.


예시 ) 가로 270px, 세로 360px의 블록에 이미지 3개를 넣는 경우

 : 한정된 공간을 뚫고 이미지가 늘어진다.

  (인장에서 적용할 경우, 이미지가 늘어지는 대신 내용물이 공간에 한정되어 잘려버립니다.)

<div
style="
display:block;
width:270px;
height:360px;
border: 1px solid black;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>


 


































예시 ) 스크롤을 넣는 경우

( overflow : auto 혹은 overflow : scroll )

<div
style="
display:block;
width:270px;
height:360px;
border: 1px solid black;
overflow:scroll;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>


 

-> 스크롤을 넣는 데는 성공했지만,

1. 보기 싫은 가로 스크롤도 생기고

2. 이미지 우측을 16px 만큼 스크롤이 가립니다.



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

2. 스크롤 바 정리하기

일단 가로 스크롤부터 없애볼까요?

overflow 속성을 overflow-X (가로 스크롤), overflow-Y (세로 스크롤)로 분리하면 됩니다.

그리고 overflow-X 는 hidden 으로 설정하여 가로로 넘치는 부분은 보이지 않도록 가립니다.

<div
style="
display:block;
width:270px;
height:360px;
border: 1px solid black;
overflow-X: hidden;
overflow-Y: scroll;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>


 
-> 일단 가로 스크롤을 보이지 않게 하는건 성공했지만,

세로 스크롤은 여전히 이미지를 가리고 있네요.



16px만큼 가려진 공간을 확보하기 위해

바깥의 div 너비를 16px만큼 늘려보겠습니다.

<div
style="
display:block;
width:286px;
height:360px;
border: 1px solid black;
overflow-X: hidden;
overflow-Y: scroll;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>

 

이제는 가로 스크롤도 없고, 세로 스크롤이 이미지 우측을 가리지도 않는

정말 이상적인 형태가 완성됐습니다.

하지만 최종 목표는 저 스크롤 바도 가리는 것이었죠.



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

3. 스크롤 바 가리기

이번 글에서 가장 중요한 부분입니다.

저 스크롤 바를 가리기 위해, div 블록 바깥에 너비가 16px만큼 더 작은 div 블록을 추가해줍니다.

<div
style="
display:block;
width:270px;
height:360px;
border: 1px solid red;
">

<div
style="
display:block;
width:286px;
height:360px;
border: 1px solid black;
overflow-X: hidden;
overflow-Y: scroll;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>
</div>

 
-> 하지만, 스크롤 바가 바깥의 div 블록을 뚫고 튀어나와 버렸습니다.



이제 바깥 div에 overflow : hidden 을 추가하여 튀어나온 스크롤 바를 가려볼까요?

<div
style="
display:block;
width:270px;
height:360px;
border: 1px solid red;
overflow:hidden;
">

<div
style="
display:block;
width:286px;
height:360px;
border: 1px solid black;
overflow-X: hidden;
overflow-Y: scroll;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>
</div>

 
-> 드디어 스크롤 바를 가렸습니다.



이제 내부 div의 border (테두리) 를 없애서 깔끔한 마무리를 해보겠습니다.

<div
style="
display:block;
width:270px;
height:360px;
border: 1px solid red;
overflow:hidden;
">

<div
style="
display:block;
width:286px;
height:360px;
border:none;
overflow-X: hidden;
overflow-Y: scroll;
">

<img src="https://upload2.inven.co.kr/upload/2017/12/09/bbs/i15154446184.png" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg" style="width:270px;">
<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:270px;">

</div>
</div>


 

정말 군더더기 하나 없이 스크롤 바를 가렸습니다 :)

간단한 팁이었지만, 인장을 깔끔하게 정리하는데 

조금이나마 도움이 되었으면 합니다.




Lv78 Want

모바일 게시판 하단버튼

댓글

새로고침
새로고침

모바일 게시판 하단버튼

지금 뜨는 인벤

더보기+

모바일 게시판 리스트

모바일 게시판 하단버튼

글쓰기

모바일 게시판 페이징