웹에 사이드바 레이아웃을 작성하는 방법 및 작성하지 않는 방법

반응형

s
idebar 레이아웃은 오늘날 웹에서 가장 일반적인 레이아웃 중 하나가 되었습니다. 온라인에는 사용자가 수평 탐색 레이아웃보다 수직 사이드바 탐색 레이아웃을 선호한다는 다양한 연구와 기사들이 있다. 대부분의 일상적인 앱에는 어떤 형태로든 사이드바가 있을 것입니다.

웹에서는 HTML과 CSS로 이 레이아웃을 구현하는 수많은 방법이 있다. 불행하게도 이러한 유연성은 접근성과 코드 가독성을 희생하는 보기 흉하고 진부한 사이드바 구축 방식으로도 이어졌다. 이 기사에서는 이러한 좋지 않은 접근 방식을 살펴보고 사이드바 레이아웃에 가장 적합한 접근 방식을 구축하겠습니다.

우리가 무엇을 만들 것인지 이해하는 것

바탕 화면 왼쪽에는 사이드바가, 오른쪽에는 나머지 콘텐츠가 표시되는 상당히 기본적인 레이아웃을 구축할 것입니다. 콘텐츠가 넘칠 때 세로로 스크롤하고 사이드바는 왼쪽에 고정해야 합니다. 기존 프로젝트에 쉽게 추가할 수 있도록 모든 데모에 HTML과 CSS만 사용할게요.

 

어프로치 1: 완전 추악한 방법

절대적인 위치를 사용하여 사이드바를 배치한 다음 나머지 컨텐츠에 여백을 추가하여 사이드바 너비를 상쇄하는 것은 온라인에서 자주 볼 수 있는 접근 방식입니다. 브라우저 지원에 대해 말하자면, 2번 접근 방식이 브라우저 지원도 훌륭하고 여전히 이 방식보다 더 낫기 때문에 오늘날 어떤 경우에 다른 접근 방식을 사용해야 할지 잘 모르겠습니다. 어쨌든, 여기 코드와 꽤 기본적인 구현 후에 얻은 결과가 있습니다.

위의 결과는 우리가 원하는 것과 똑같지만, 몇 가지 문제점을 엿보도록 하자. 나머지 콘텐츠가 화면 높이를 초과하면 사용자가 세로로 스크롤해야 합니다. 그러나 이것은 또한 사이드바가 스크롤되도록 합니다! 우리는 사용자가 나머지 콘텐츠를 스크롤할 때 사이드바가 수정되기를 원합니다. 이를 고치기 위해서는 신체의 나머지 부분이 아니라 넘칠 때 내용

가 스크롤되도록 해야 한다. 전 이걸 "스크롤 해킹"이라고 부르죠

이 변화를 구현하여 어떤 모습인지 살펴보겠습니다.

그리고 일이 예상대로 잘 풀린다 말 끝났죠? 한 걸음 뒤로 물러서서 우리가 무슨 짓을 했는지 봅시다.

 

• 사이드바 요소의 절대 위치를 사용하여 왼쪽에 배치합니다.
• 사이드바가 차지하는 공간을 수용하기 위해 나머지 컨텐츠에 여백을 추가했습니다.
• 스크롤을 방지하기 위해 스크롤 해킹을 구현했습니다.3번 지점은 접근성에도 좋지 않습니다. 사이드바에 스크롤바가 없는 한 사이드바를 스크롤하면 일반적으로 앱의 주요 콘텐츠가 스크롤됩니다. 이러한 행동은 트위터, 깃랩, 덕덕고와 같은 앱에서 볼 수 있다. 절대 포지셔닝 접근법으로 이 동작을 달성하면 매우 더러워집니다.
  
•  
• 이 접근 방식에서 주목해야 할 점은 사이드바에서 절대적인 포지셔닝을 사용하는 동안 사용자가 나머지 사이트를 스크롤할 때 움직이지 않는 고정 사이드바에 대한 최종 결과입니다. 이것은 절대적인 위치를 사용하는 대신 고정 위치 지정 자체를 시도해야 하는 다음 접근법으로 우리를 데려갑니다.
• 점 2와 점 3 때문에 이 접근법은 매우 취약하다. 나중에 사이드바의 너비를 변경하기로 결정한 경우, 나머지 내용의 여백도 업데이트해야 합니다. CSS 사용자 지정 속성을 사용하여 개선할 수 있지만 나중에 응용 프로그램이 여러 개의 사이드바를 갖게 되면 여전히 보기 흉한 코드가 생성될 수 있습니다(예: 느슨함 및 불협화음과 같이).