티스토리 오디세이 스킨 사이드바 왼쪽으로 옮기기 (완벽히...)

 

티스토리 오디세이 스킨 사이드바 왼쪽으로 옮기기 (완벽히...)

안녕하세요 사람사물상황입니다.

 

오디세이에서는 오른쪽 고정인 사이드바를 왼쪽으로 옮겨보겠습니다.

인간은 기억을 트리 형식으로 가지 치며 무언가를 하게 되어있고, 언어구조가 왼쪽부터 쓰기 때문에 왼쪽 사이드바는 자연스러운 현상일 것입니다. 그래서 모든 웹에서의 기본 형태라고 할 수 있는데요. 모바일이 비중이 많이 차지하는 지금은 본문과 광고가 먼저 똭 보이는 것이 유리하여, 블로그에선 대부분 오른쪽 사이드바를 하게 됩니다. 만 왼쪽 사이드바는 구조적으로 내 블로그를 빨리 이해시킬 수 있다는 것에 근본적인 장점이 있다고 생각합니다.

일단 바로 바꾸어 보겠습니다.

1. 왼쪽 사이드바로 옮기기.

이번에 할 방법은 그냥 단순히 위치 변경입니다. 혹시 여기서 올렸던 사이드바 위치 변경법이 적용되있다면 html에 넣던걸 삭제를 해주시구요. 다음과 같이 변경해줍니다.

 

사이드바 좌로 넘기기
왼쪽사이드바 위치변경으로 

블로그관리-스킨편집-html편집

html 122행
        <main class="main">

(이 사이에 html 832행~1047행 <!-- aside --> 에서 <!-- // aside --> 전부를 잘라와서 붙임) 딴데붙이면 안됨

          <!-- area-main -->
          <div class="area-main">


html 832행~1047행 <!-- aside -->
메인위까지짤름 <!-- // aside -->
               
         </main>
        <!-- // main -->
      </div>
      <!-- // container -->

오른쪽 사이드바 시에는 다시 원상복귀

그에 따른 사이드바 여백조정
css 282행
@media screen and (min-width: 1061px)
밑에

    .wrap-right .area-aside {
        margin: 32px 0 0 80px;
를
    .wrap-right .area-aside {
    /* margin: 32px 0 0 80px; */
      margin: 32px 80px 0 0;
로 변경

우측사이드바 시에는 원상복귀하거나
    .wrap-right .area-aside {
       margin: 32px 0 0 80px; 
    /* margin: 32px 80px 0 0; */
로변경

 

설명대로 짤라와서 붙여야 되구요.  오른쪽 사이드바로 다시 할때는 반대로 하시면 됩니다. css 여백조정을 하지 않으면 사이드바와 본문이 다닥붙여나오게됩니다.

위의 태그 내용 전체와 짤라야되는 aside의 내용은 파일로 담아놨습니다. 단순 복붙하면 안되니까 참고만 부탁합니다.

오디세이 사이드바 좌로 넘기기.txt

0.01MB

 

그러면 이런 기본 오디세이 모양에서

 

 

이렇게 바뀝니다.

 

바꾸니 깔끔하게 나오네요. 

사실 이 컨텐츠는 오디세이를 수정 시작하자마자 가장 먼저 시도했던 적이 있습니다. 그때는 어느 분이 글로 써놓으신 거 보고 따라 했었는데요. 그분의 방식이 우 사이드바를 좌로 자동으로 다시 정렬하게 해주는 방식이었습니다. 그래서 사용하다 보면 웹 진입 초기에 우 사이드바가 보였다가 좌 사이드바로 아주 짧은 찰나에 바뀌어 보이는 현상이 있습니다. 순간이기 때문에 그냥 살짝 렉 걸렸나? 정도의 느낌입니다. 그래도 잘 사용해 왔었는데. 어느 정도 오디세이를 만지고 나서 최적화를 생각하면서 그 부분을 바꿔봐야겠다 생각했습니다. 

 

지금은 지연시간 없이 빠릿하게 나오네요. 특히 카테고리를 누르면서 본문을 여러 번 눌러볼 때 확실히 차이가 났습니다. 그분이 바꾸는 방법도 설명을 해놓긴 하셨었는데요. 그걸 추리? 하며 만들어봤습니다. 근데 그때도 분명히 먼저 시도를 해봤을 텐데 그때는 성공하지 못했는데. 어째 지금은 성공을 하게 됐어요. 그때나 지금이나 지식수준은 별반 다를 게 없는데, 진짜 별거 아닌 건데 말이죠. 가장 먼저 알아봤던 것인 만큼 하고싶었던거고 그걸 제 손으로 했는데 잘되니 만족감이 큽니다. 이것도 아마 어디서도 다루지 않을 얘기일테니, 혹시나 찾으셨던 분들에겐 도움이 되었으면 합니다.

 

티스토리 오디세이 스킨 사이드바 왼쪽으로 옮기기 (완벽히...)

 

끝.

 

---21 03 15 에 내용 수정

내가 다시 보고 할려니, 짤르는 정확한 위치를 찾기 힘들어서 구체적으로 설명해봄

aside내용은 쓸데없이 길어서 파일로담음

---21 11 09 수정

태그 내용을 처음 온사람도 알기쉽게 전후 추가와 설명추가

사진도 전후 추가