내일을 위한 오늘

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

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