사이드바 왼쪽으로 옮기기

 

1. 변경방법 요약

• html에서 위치를 변경하는 것이 아니라 행(column)에서 순서를 정하는 것으로 해결
• 본문및 사이드바 영역의 행(column)에 순서를 정하는 코드 추가
  (skin.html 에서 본문 및 사이드바 부분 2군데 추가)
• sns공유버튼 부위 및 서치바 영역의 행에 순서를 정하는 코드추가 (skin.html 에서 2군데 추가)
• 본문과 사이드바 경계라인이 본문 컨텐츠 오른쪽에 있던것을 왼쪽으로 이동한다
  style.css 2군데 추가

 

2. 본문및 사이드바 영역의 행에 순서를 정하는 코드 추가

• skin.html에서 본문콘텐츠 영역의 행의 코드에 col-sm-push-3을 추가한다
  <!-- site layout : article column --> 각주가 있는 행의 코드가 본문 콘텐츠 영역임. 이곳에 col-sm-push-3를 추가.
변경전 skin.html
<article role="article" class="col-sm-9 skeleton-content hentry"><!-- site layout : article column -->
변경후 skin.html
<article role="article" class="col-sm-9 col-sm-push-3 skeleton-content hentry"><!-- site layout : article column -->

 

• skin.html에서 사이드바 영역의 행의 코드에 col-sm-pull-9을 추가한다
  <!-- site layout : aside column --> 각주가 있는 행의 코드가 사이드바 영역임. 이곳에 col-sm-pull-9을 추가
변경전 skin.html
<aside role="complementary" class="col-sm-3 skeleton-aside"><!-- site layout : aside column -->
변경후 skin.html
<aside role="complementary" class="col-sm-3 col-sm-pull-9 skeleton-aside"><!-- site layout : aside column -->

 

3. sns공유버튼 부분및 서치바 부분의 행에 순서를 정하는 코드 추가

• skin.html에서 sns공유버튼 영역의 행의 코드에 col-sm-push-3을 추가한다
  변경전 skin.html
  

   

  "container skeleton-mid-banner" 라고 되어 있는 부분이 sns버튼 영역임. 이곳에 col-sm-push-3를 추가.
  변경후 skin.html
  

   

• skin.html에서 서치바 영역의 행의 코드에 col-sm-pull-9을 추가한다
  변경전 skin.html
  

   

  변경후 skin.html
  

 

4. 본문과 사이드바 경계라인 위치변경

• 경계라인이 본문 컨텐츠 오른쪽에 있던것을 왼쪽으로 변경한다
  border-right를 left로 수정하면 된다. 그리고 min-height를 사이드바의 높이에 맞게 수치를 바꿔야 한다. 이는 본문 콘텐츠 영역의 최소 높이를 뜻하며, 최소 높이란 사이드바의 길이에 맞춰주면 좋다.
  
  변경후 style.css
  변경후 style.css
  

   

 

note

참조한곳 : 마크쿼리커뮤니티

다운로드 :사이드바좌측이동.txt