티스토리 사이드바 위치 변경 HTML 수정
21.01.16 | 티스토리 Odyssey 스킨 사이드바 위치 변경 + 본문 상단 제목 뒤의 배경 이미지 없애기 + 제
오디세이 스킨 사이드바 위치 바꾸기 북클럽 스킨 잘 쓰던 중에 갑자기 오디세이 스킨에 꽂혀서 바꿨는데 사이드바가 오른쪽이어서 너무 어색했다. 사이드바를 왼쪽으로 바꿀 수 있는 방법을
someoneelse.tistory.com
약 2년 전 오디세이 스킨 적용 후 사이드 바 위치를 왼쪽으로 바꾸고 싶은데 방법을 몰라 다른 유저의 글을 보고 HTML을 수정했었다. 이 방법은 HTML <body> </body> 내에 복사 붙여 넣기만 하면 되는 간단한 방법이지만, 나중에 보니 성능이 낮은 컴퓨터에서 블로그를 접속할 경우 코드를 읽어내리는 동안 오른쪽에 있던 사이드바가 갑자기 왼쪽으로 이동하는 게 그대로 보이는 점이 문제였다. 나중에 수정해야지, 생각만 하다가 어느새 1년이 흘러버려서 어제 ChatGPT를 이용해서 CSS를 수정해 봤다.
ChatGPT를 이용한 CSS 수정
기존 CSS 코드
/* wrap-right */
.wrap-right .main {
display: flex;
justify-content: space-between;
}
.wrap-right .area-aside {
margin: 32px 0 0 80px;
}오디세이 스킨 기본 CSS에서 사이드바에 관한 부분이다.
수정한 CSS 코드
아래는 챗GPT의 답변.
코드를 보면 .wrap-right .main 클래스 내에서 flex 레이아웃이 적용되고 있음을 확인할 수 있습니다.
이것은 기본적으로 오른쪽에 사이드바를 배치하기 위한 설정입니다.
코드에서 사이드바의 클래스는 .area-aside이고 본문의 클래스는 .area-main일 것으로 추정됩니다.
따라서 본문과 사이드바의 위치를 바꾸려면, 아래와 같이 .wrap-right .main 클래스에 flex-direction: row-reverse;를 추가하면 될 것입니다:
.wrap-right .main {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}그런데 추가로 한 가지 고려해야 할 사항이 있습니다.
.wrap-right .area-aside 클래스에 적용된 margin: 32px 0 0 80px;은 상단에 32px, 오른쪽에 0, 하단에 0, 왼쪽에 80px의 마진을 주는 것인데, 이 경우 사이드바가 왼쪽으로 이동하면서 사이드바의 왼쪽에 불필요한 여백이 생기게 됩니다.
따라서 이 마진 설정도 수정해야 합니다. 아래처럼 변경해 보세요.
.wrap-right .area-aside {
margin: 32px 80px 0 0;
}위와 같이 수정하면, 사이드바가 왼쪽에 위치하고 본문은 오른쪽에 위치하게 됩니다.
이제 왼쪽에 사이드바가 위치하게 되었으며, 본문과 사이드바 사이의 간격은 유지되고, 사이드바와 화면 왼쪽 사이의 간격은 없어지게 됩니다. 이렇게 변경하면 원하시는대로 레이아웃이 변경될 것입니다.
이렇게 CSS를 통해 간단히 레이아웃을 변경할 수 있으며, JavaScript는 필요하지 않을 것으로 보입니다.
결과
현재 블로그의 사이드바는 챗GPT가 알려준 대로 수정한 결과물. HTML 수정 버전과 동일한데도 사이드바 로딩이 훨씬 안정적인게 느껴진다.
728x90
'BLOG > archive' 카테고리의 다른 글
| 23.07.04 | 티스토리 자체 랜덤 상단, 하단광고 (0) | 2023.07.04 |
|---|---|
| 23.06.10 | 티스토리 구글 서치 콘솔 색인 생성 오류 (0) | 2023.06.10 |
| 23.03.20 | ChatGPT 이후 블로그 유입 변화 (1) | 2023.03.21 |
| 22.10.18 | 카카오 데이터 센터 화재로 인한 블로그 먹통 (0) | 2022.10.18 |
| 21.01.16 | 티스토리 Odyssey 스킨 사이드바 위치 변경 + 본문 상단 제목 뒤의 배경 이미지 없애기 + 제목 폰트 변경 (4) | 2021.01.17 |