square 반응형 스킨 수정 - 사이드 바 조절 방법

오늘은 square 반응형 스킨 수정하는 방법에 대하여 포스팅 하려 합니다. square 스킨은 기본적으로 한 화면에 사이드바와 본문이 동시에 보여지는 형태를 취하고 있습니다. 하지만 사이드바가 조금 좁고 본문도 조금 작아서 화면상으로 보이기에 좋지 않은 부분이 있습니다. 그래서 본문크기와 사이드바를 수정할 수 있는 방법이 있습니다. html 과 css를 조금만 만지면 수정이 가능합니다. html 까지 안가도 css 부분을 조금만 수정하면 사이드바의 크기와 본문과의 공간 수정이 가능합니다. 오늘 포스팅에서는 사이드바의 넓이 수정과 사이드바와 본문과의 격차를 수정하는 방법에 대해서 포스팅 하려 합니다. 사이드바의 넓이를 조절하면 사이드바가 본문을 덮어버리는 현상이 일어 납니다. 그래서 본문과의 격차 수정이 필수적입니다. 또한 한 가지 염두할 점은 반응형 스킨이기 때문에 모바일에서 사이드바가 튀어나오는 오류가 생길 수 있어서 그것까지 수정하는 내용을 포함시켰습니다.

스킨 수정을 생각할 정도면 스킨 편집 정도는 할 줄 안다고 판단하여 편집 상태까지 가는 과정은 삭제하고 코드 수정 부분만 편집하여 포스팅 하였습니다. 혹시나 모르시는 분들을 위해 짧게 설명 드리자면 자신의 티스토리 계정 설정에 들어가서 [꾸미기]-[스킨편집]을 클릭 하면 됩니다. 그럼 본격적으로 코드 수정 부분을 보여 드리겠습니다. 아래의 사진을 참고 하시어 본인의 사이드바와 본문과의 공간을 조절 해보시기 바랍니다.

---

1-1. square 반응형 스킨 사이드바 수정 방법.

1-1

1. 스킨 편집 -> CSS 편집을 클릭 합니다.

2. Ctrl + F 를 이용하여 sidebar를 검색 합니다.

3. 해당 부분을 수정합니다.

3번 부분에 원하는 숫자를 입력 하면 됩니다. 저는 350을 넣었습니다. 지금 보고 있는 제 블로그의 사이드바가 350px라고 생각 하시면 됩니다. 너무 작거나 또는 크다고 생각하시는 경우 원하는 사이즈를 입력하여 수정하시기 바랍니다. 수정 시 본인의 화면 배율이 100%에 맞춰져 있는지 확인 해보세요. 100%가 아닌데 너무 작다 크다 라고 생각하면 추후에 수정에 오류가 생길 수 있기 때문입니다.  두 번째로 이제 폭을 늘리면 모바일 반응형에서 늘린 만큼 왼쪽에 사이드바가 노출되는 오류 현상이 발견 됩니다. 그렇게 때문에 사이드바 수정은 CSS를 조금 더 수정 해주셔야 합니다. 아래의 사진을 보고 잘 따라오시기 바랍니다.

1-2. 모바일 환경 사이드바 수정 하는 방법.

1-2

1. @media all and 검색

2. 위 세 부분 수정

1-1에서 작성하였던 값과 동일한 값을 입력해주시면 됩니다. 위 코드는 모바일 환경의 반응형 스킨에서 사이드바를 숨기는 코드 입니다. 저 코드를 수정해야지만 1-1에서 수정한 코드가 오류 없이 사용 할 수 있습니다. 다음은 사이드바를 늘려서 본문과 겹치는 현상을 수정해보려 합니다. 사이드바가 늘어난 만큼 본문과의 차이가 줄어들게 되고 심한 경우 사이드 바가 본문을 덮어버리는 현상이 생길 수도 있어 아래 부분은 필히 수정해 주셔야 합니다. 아래의 수정 내용을 확인 해주시기 바랍니다.

1-3. side bar 와 본문(content)과의 차이 생성하는 방법.

1-3

1. content를 검색 합니다.

2. 위 부분을 조절 하면 본문과의 왼쪽 여백을 수정 할 수 있습니다.

이 부분은 숫자를 넣어가면서 조금씩 수정해서 사용자가 보기 편한 수치를 입력해주면 됩니다. 수정 시 자신이 어디를 수정하고 얼마의 값을 기입하였는지 확인 하고 번갈아 체크하면서 숫자를 기입하면 됩니다. 처음에는 손에 안 익고 작은 글자를 수정하는게 어려울 수 있지만 하나씩 천천히 하다 보면 금세 코드를 파악하고 수정하실 수 있으실 겁니다.

<연관글>

포스팅71 -> 반응형 광고 짤림 현상 해결 방법 - 티스토리 휴대폰 어플로 확인 시 모서리 짤림 현상 해결하기 

---

지금까지 square 반응형 스킨 수정에 대한 포스팅 이였습니다.

감사합니다.