내일을 위한 오늘

웹사이트 헤더 영역이 상단에 고정되기를 바라면서도, 스크롤을 내릴 때는 그 높이가 줄어들기를 원할 때가 있습니다. 그냥 딱딱하게 줄어들게 해도 되지만, 이왕이면 보기 좋게 부드럽게 줄어들었다가 다시 늘어났다가 할 수 있다면 더~욱 좋겠지요~ 해서 만들어보았습니다. css 기능 중에서 transition 을 이용하면 쉽게 구현할 수 있습니다. 여기서는 scrolled 라는 클래스명을 이용해 만들어보겠습니다. javascript 로는 스크롤시에 scrolled 라는 클래스를 더하거나 빼도록 하면 됩니다. 아래 내용을 참고 해주세요. HTML 삽입 미리보기할 수 없는 소스

반응형 웹이나 모바일에서 가로 스크롤은 애물단지 같은 존재입니다. 스크롤 기능은 유지하고 싶지만, 스크롤바 모양은 없애버리고 싶을 때.. 그 때 요긴하게 쓸 수 있는 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 이하에서는 가로 스크롤이 확인될껍니다. 가로 스크롤이 거슬린..

웹 퍼블리싱을 하다 보면 꼭 고민에 빠지게 하는 것들이 있습니다. 백엔드 작업시에는 DB 접속을 최소한으로 줄이는 최적화 과정에서 주로 고민이 많고요. 프론트엔드 작업시에는 css 를 이용해 html 코딩을 어떻게 하면 효율적으로 할 수 있을가를 고민하게 됩니다. 그 중에서도 프론트엔드 작업시, 테이블 처리 문제는 없어지지 않는 난제이지요. TABLE 테이블 코딩은 모바일과 반응형웹의 시대로 넘어오면서 정말 계륵과 같은 존재가 되어버렸습니다. 그동안 저도 여러가지 방법을 사용했었는데요. 1. desktop 버전에서는 table 코딩, mobile 버전에서는 div 코딩으로 분기하는 방법 2. table 코딩을 사용하되, 모바일에서는 display:none 을 사용하여 모바일에 그나마 최적화하는 방법 3...