블로그 가로 스크롤바, 이제 안녕! CSS 팁 공개
by DD
5개월 전
조회수 32
블로그 게시물에서 가로 스크롤바를 유발하는 세 가지 주요 문제점을 지적하고, 해결책을 제시함
코드 블록, 이미지, 테이블 등 가로 공간을 많이 차지하는 요소들의 CSS 스타일링을 통해 문제 해결
CSS 속성과 HTML 태그를 활용하여 반응형 디자인을 구현하고, 작은 화면에서도 가독성을 높이는 방법을 안내함
코드 블록 가로 스크롤 해결: overflow-x
긴 코드 블록은 가로 스크롤바를 유발하는 주요 원인이다. 구체적으로 `pre` 태그에 `overflow-x: auto;` 속성을 적용하여 가로 스크롤을 생성한다. 따라서 코드 블록이 화면을 벗어나는 경우, 해당 블록 내에서만 스크롤이 가능하도록 하여 페이지 레이아웃을 유지한다. 결과적으로 작은 화면에서도 코드 가독성을 확보한다.
이미지 크기 조절: max-width와 height: auto
이미지는 원본 크기로 표시되어 가로 스크롤바를 발생시킬 수 있다. 반면 `img` 태그에 `max-width: 100%;`와 `height: auto;`를 적용하면 이미지 크기를 컨테이너에 맞춰 조절한다. 따라서 이미지의 가로/세로 비율을 유지하면서 작은 화면에서도 시각적 일관성을 제공한다. 결과적으로 반응형 디자인을 구현한다.
테이블 레이아웃 문제 해결: scrollable div
테이블은 복잡한 구조로 인해 가로 스크롤바를 발생시키기 쉽다. 구체적으로 테이블을 `div`로 감싸고 `.scrollable` 클래스를 적용한 후, `overflow-x: auto;`를 설정한다. 따라서 테이블 내용이 컨테이너를 벗어나는 경우, 가로 스크롤을 통해 내용을 확인할 수 있다. 결과적으로 테이블 가독성을 향상시킨다.
