CCZ-CROSS 스킨의 사이드바 왼쪽 배치

728x90

CCZ-CROSS 스킨을 적용하면 사이드바는 오른쪽에 위치합니다. 이 사이드바를 왼쪽에 적용하고 메인 내부영역의 색상을 조정하여 완전하게 사이드바를 왼쪽에 정렬하도록 CSS 코드를 수정하는 방법에 대해 알아보도록 하겠습니다.

1. 사이드바 왼쪽 정렬

오른쪽에 배치되어 있는 사이드바를 왼쪽으로 정렬하기 위해서는 스킨을 등록할 때 업로드한 style.css 파일을 편집해야 한다. 먼저 [꾸미기-스킨편집]을 클릭하여 스킨편집 페이지로 이동합니다.

아래는 스킨편집 초기 페이지입니다. 오른쪽에 [html 편집] 버튼을 클릭하여 스킨편집 화면을 띄웁니다.

스킨편집 화면의 오른쪽 상단에 <HTML>, <CSS>, <파일업로드> 메뉴가 있습니다. CSS 파일을 편집해야 하기 때문에 [CSS] 메뉴를 선택합니다.

아래 페이지는 스킨 스타일을 정의하는 CSS 편집 화면입니다. 여기에서 편집키를 확인하고 싶은 경우 F1을 누르면 다음 그림처럼 단축키 도움말 화면이 나타납니다.

단축키를 확인하신 후 [닫기]버튼을 눌러 도움말 창을 닫아 주시기 바랍니다.

Ctrl+F를 누르고 검색창에서 #sidebar를 입력하고 엔터를 누르면 검색어가 있는 위치로 이동합니다.

해당위치로 이동하면 "#content" 블럭과 "#sidebar" 블럭을 확인하실 수 있습니다. 여기서 "left"와 "right"는 켄텐츠나 사이드바의 위치를 의미합니다. 이 값을 서로 바꾸어 주면 됩니다.

"right"와 "left"로 값을 바꾸고 [저장] 버튼을 클릭합니다.

스킨편집 결과를 확인하기 위해 블로그 홈페이지를 열어 보면 아래의 그림처럼 원하는 결과를 얻을 수 없습니다. 켄텐츠 영역과 사이드바 영역의 위치만 수정했기 때문입니다. 배경을 담당하는 영역을 조정해 주어야 사이드바와 어울려 정상적으로 출력됩니다.

2. 배경이 사이드바 어울리도록 조정

Ctrl+F를 누르고 검색창에서 #main-inner를 입력하고 엔터를 누르면 검색어가 있는 위치로 이동합니다. margin-right: 320px;를 margin-left: 320px;로 수정하고 [저장] 버튼을 클릭합니다.

사이드바가 있는 배경영역은 왼쪽으로 이동했지만 사이드바가 배경과 일치하지 않고 오른쪽으로 이동했습니다. 이것은 사이드바의 마진을 조정해서 바로잡을 수 있습니다.

3. 사이드바 위치 조정

Ctrl+F를 누르고 검색창에서 #sidebar를 입력하고 엔터를 누르면 검색어가 있는 위치로 이동합니다. margin-right: -321px;를 margin-left: -32px;로 수정합니다.

[저장] 버튼을 클릭하고 블로그 홈페이지를 새로 고침하면 결과를 확인할 수 있습니다.

728x90

MakingRobot