html 이런식으로 flexbox를 구성하는게 맞을까요?

Question

현재 개인 블로그를 제작중에 있습니다. html과 css가 매우 서툰 초보입니다. 전반적인 디자인은 VS Code 문서 페이지(https://code.visualstudio.com/docs)를 참고했습니다.현재 위 그림과 같이 포스트 페이지에 우측에는 목차기능을 넣고, 좌측에는 더비 flexbox를 넣고 중간에 포스트 글이 나오게끔 만들고 있습니다. 양 옆의 flexbox들은 고정 너비이고, 포스트 글은 최대 너비인 600px 이하의 범위 내에서 media 크기에 맞춰서 가변적으로 변하게 했습니다. 우측의 목차 위젯(content nav)은 sticky처리를 해서 스크롤을 하면 따라오게 만들었습니다.창 크기가 작아지면(태블릿 크기) 1차적으로 좌측의 flexbox를 없애고 (포스트랑 목차만 남아있는 상태) 더 작아지면(모바일 크기) 목차까지 없애고 포스트만 남게 처리했습니다. 그런데 우측의 목차 위젯(content nav)를 포스트 헤더(제목, 태그, 작성일 등이 있는)보다밑에 오게끔 하고 싶은데 어떻게 구현을 해야할지 모르겠습니다.현재 구상중인 구현 방식은 위와 같습니다. 하단의 article처럼 header부분도 양 옆에 동일한 더미 flexbox 를 놓음으로써 header와 article의 너비도 같게 하고, 헤더와 글을 각각의 row처리를 해서 목차가 헤더 열을 침범하지 못하게 하는 것입니다.그런데 이렇게 처리하면 쓸모없는 flexbox를 두개나 더 추가하는 것이고, 불필요한 연산도 너무 많이 들어갈 것 같습니다. 아니면 자바스크립트나 css를 통해 목차 위젯의 위치를 매 포스트마다 계산해서 놓는 것도 방법일 것 같은데.. 이건 너무 일이 커지고, 자칫하면 페이지가 깨질 것 같습니다. 이보다 더 좋은 방식이 있을 것 같은데 어떻게 해야할지 모르겠습니다.

S_J · Answer

제가 이해한 게 맞다면 header에 margin-right를 설정해서 헤더 아래에 우측 목차가 오게 하면 될 거 같은데요

세브라이드 · Answer

원하시는 기능은 grid를 써서 구현하시는게 훨씬 맞는 것 같습니다. dummy flexbox 3개를 아낄 수 있으니까요.https://developer.mozilla.org/ko/docs/Web/CSS/grid

html 이런식으로 flexbox를 구성하는게 맞을까요?

2개의 답변

Q&A 목록