내일을 위한 오늘

반응형 웹이나 모바일에서 가로 스크롤은 애물단지 같은 존재입니다. 스크롤 기능은 유지하고 싶지만, 스크롤바 모양은 없애버리고 싶을 때.. 그 때 요긴하게 쓸 수 있는 css를 소개합니다. /* 스크롤 박스 기본 css */ .scroll_box { width:100%; height:200px; padding: 10px; overflow:auto; border:2px dashed gray; } /* 스크롤이 안보이게 하는 css */ .no_scroll { /* IE and Edge */ -ms-overflow-style: none; /* Firefox */ scrollbar-width: none; } /* Chrome, Safari,Opera */ .no_scroll::-webkit-scrollbar {..

앞서, Table 코드를 반응형으로 만드는 방법에 관한 글을 포스팅한 적이 있는데요. 2022.06.28 - [컴퓨터/css] - [CSS#1] Responsive Table and CSS 테이블 코드를 반응형으로 만들기 오늘은 또 다른 방향으로 사용할 수 있는 방법을 소개합니다. 표 안의 내용이 많은 경우, 모바일에서도 table 표를 그대로 가져가고 싶을 때가 있는데요. Table 구조는 깨지지 않게 유지하면서 좌우로 터치 스크롤 기능을 넣는 방법입니다. 사실 조금만 고민하면 금방 답이 나오는 것이긴 하지만, 그 생각할 시간마저 아까울 때, 그럴 때 쓰려고 적어 놓습니다. 코드 그대로 카피해서 브라우저로 확인해 보시면 가로 사이즈 480px 이하에서는 가로 스크롤이 확인될껍니다. 가로 스크롤이 거슬린..