html에 스크롤 기능 넣어보기

 

오늘은 html의 기본 요소 중 하나인 스크롤에 대해서 배워보겠습니다. 스크롤, 너무도 많이 쓰는 우리 컴퓨터 기능 중 하나죠. 스크롤이 없다면 어떨까요? 정말 생각만 해도 불편하지 않나요? 저희는 이 너무나도 익숙해져 있는 스크롤 기능에 대해 한번 탐구를 해볼까 합니다. 이 글 끝까지 보시면 스크롤을 html안에서도 넣을 수 있을 겁니다.

 

스크롤

 

웹 서핑을 할 때 자연스럽게 옆에 떠있는 스크롤은 누구나 다 아실 거예요! 근데 아마도 스크롤 마저 css 속성으로 직접 설정해주어야 한다는 건... 모르실 겁니다. ​ 코딩을 하다 보면 "아니 이것까지 직접 코드로 해야 해?"라는 게 굉장히 많은데, 스크롤이 그중 하나라고 생각해요, ​ 스크롤과 관련된 속성은 overflow라는 속성입니다. overflow 속성을 배우기 전에 스크롤이 생기는, 필요한 이유를 먼저 짚어볼게요. ​ 언제 스크롤이 필요할까요? ​ 답은 안의 내용물이 컨테이너보다 클 때 스크롤이 필요하답니다. 맞추셨나요? 컨테이너 사이즈는 정해져 있는데, 그 안에 들어있는 내용물(텍스트, 이미지 등)의 사이즈가 더 크면 그때 스크롤이 필요한 거죠! ​ 여기서 중요한 포인트는 안의 내용물이 컨테이너보다 큰지 작은지 알기 위해선 컨테이너의 사이즈가 정해져 있어야 한다는 것이에요. ​ 컨테이너의 사이즈를 정하는 방법은 여러 가지를 배웠었죠? ​ width, height를 절댓값으로 지정해서 정할 수도 있고, position absolute 속성을 이용해서 top, left, right, bottom 값을 정해두어 사이즈를 한정 지을 수도 있었어요. 컨테이너의 사이즈가 변하지 않는 정해진 사이즈이기만 하면 overflow 속성을 이용해 스크롤을 만들 수 있답니다. ​

 

overflow 속성

 

overflow 속성 값은 visible / hidden / auto / scroll 총 4가지가 존재해요. 역시 하나씩 알아볼게요! ​

 

overflow: visible;

 

만약 overflow 속성을 설정하지 않았을 땐, visible이 기본 값이랍니다. ​ 만약 안의 내용물이 컨테이너보다 많으면 컨테이너를 뚫고(?) 모두 그냥 보이게 되고, 스크롤은 생기지 않는답니다. ​

 

overflow: auto;

 

아마 overflow 속성에서 가장 많이 사용하는 값은 auto가 아닐까 생각해요. overflow: auto로 설정하면, 스크롤이 필요할 때만 스크롤이 생긴답니다. 만약에 예시의 텍스트를 3줄로 줄인다면 스크롤이 안 생기겠죠? overflow: auto 예시 overflow: auto 예시 ​

 

overflow: scroll;

 

scroll 속성 값을 적용하면 언제나 스크롤이 뜨게 된답니다. ​ 아래의 예시에서도 스크롤이 필요 없어 보이지만.. overflow: scroll 속성에 의해 스크롤 바가 있는 것을 볼 수 있어요! overflow: scroll 예시 overflow: scroll 예시 ​ ​

 

overflow: hidden;

 

마지막 속성 값은 hidden이에요. ​ 이름에서 알 수 있듯, overflow: hidden은 컨테이너 사이즈를 넘는 내용물을 보여주지 않게 하는 속성이에요. overflow: hidden 예시 overflow: hidden 예시 ​ ​

 

overflow-x, overflow-y

 

이전에 flex 속성이 flex-grow, flex-shrink, flex-basis를 합친 속성이었던 것, 기억하시죠? 이와 마찬가지로, 사실 overflow라는 속성은 overflow-x와 overflow-y를 합친 속성이에요. 따라서 overflow: auto으로 설정하게 되면, 스크롤이 필요할 때 x축, y축 스크롤이 모두 생긴답니다. ​ 그런데 위의 예시에서 조금 이상한 점, 못 느끼셨나요? 왜 가로 스크롤바는 생기지 않고 세로 스크롤 바만 생겼을까요? ​ 바로 안의 내용물이 세로로만 길어지고, 가로로는 길어지지 않았기 때문이랍니다. 만약 텍스트 박스의 너비를 컨테이너보다 크게 만든다면 당연히 가로 스크롤도 생기겠죠? ​ flex에서와 마찬가지로, overflow-x와 overflow-y 속성은 당연히 따로 지정할 수도 있답니다. 아래는 overflow-x: auto와 overflow-y: hidden을 지정한 예시예요!