티스토리가 처음 생긴 이후 몇 년동안 티스토리 블로그를 운영하다가 중간에 접었습니다. 그러다가 오래가만에 티스토리에 사진블로그를 운영하려고 스킨을 만지작거리고 있었습니다. 그런데 몇 년 새에 블로그 설정이 꽤 바뀌어 있더군요. 그래서 이것저것 만지면서 다시 시행착오 과정을 거쳐야 했습니다.
이 글은 저처럼 사진블로그를 운영하시려는 꽤 많은 분들이 자주 질문하시는 티스토리 스킨 폭을 넓히는 문제에 대한 글입니다.
※ 웹디자인을, HTML과 CSS을 수정해서 웹디자인을 하실 줄 아시는 분께는 허접한 글이 될 터이고, 전혀 할 줄 모르시는 분께는 지루한 글이 될 예정이니 적당히 과감하시면서 봐 주셨으면 좋겠습니다.
글 쓴 날 : 2012.11.29
1. 스킨위자드
스킨위자드는 티스토리에서 블로그 디자인을 손쉽게 바꿀 수 있게끔 지원하는 편리한 스킨편집 도구입니다. 워낙 간단한(?) 도구라서 따로 설명할 필요는 없는 것 같습니다. 스킨위자드를 쓰기 위해서는 스킨위자드가 지원되는 스킨을 선택해 적용시켜야 합니다.(기왕이면 모바일까지 지원되는 스킨이면 더 좋겠죠?)
 |
| 스킨위자드 지원 표시 : 아주 옛날에 나왔던 스킨이 아니면 모두 지원한다. |
스킨위자드는 관리화면>스킨에 보면 사용중인 스킨 가운데쯤에 스킨위자드 단추를 보실 수 있으실 겁니다. 이 단추를 클릭해서 뜨는 화면에서 게시글을 클릭하면 글영역 넓이를 보실 수 있고, 여기에서 슬라이드바를 옮기거나 숫자를 입력하여 블로그 폭을 조절할 수 있습니다. 보통 바꾸고자 하는 스킨 가로폭이 1000 px이 안 되면 스킨위자드로 간단하게 바꿀 수 있습니다.
문제는 사진블로그를 운영하려는 블로거 상당수는 가로폭을 1000 px 이상으로 넓히길 원하는데 있습니다. 근데 티스토리 스킨은 HTML과 CSS로 만들어져 있어서 직접 수정해서 폭을 늘리는 것조차 쉽지 않습니다. 그나마 다행인 건 최근에는 스킨 저장기능이 생겨서 수정하다가 이상해지면 다시 원래대로 되돌릴 수 있어서 조금은 편해졌습니다.^^
한 가지 더, 예전에는 사용자가 직접 HTML과 CSS를 수정한 경우에는 다시 스킨위자드를 쓸 수 없었는데, 이제는 계속 쓸 수 있게 바뀌었더군요. 이게 다 제가 예전에 티스토리 쓸 때 건의해 놓았기 때문입니다. ^^ 이게 다 내 덕인거 아시죠?(이명박 버전)
2. 블로그 스킨 구조
2.1 영역(div)
일단 작업을 하기 위해서는 블로그 스킨 구조를 이해해야 합니다만 사실 몰라도 큰 상관은 없습니다. 티스토리처럼 HTML과 CSS로 구현되는 사이트의 경우에는 웹페이지의 모든 영역을 div 태그로 나누게 됩니다. 그리고 이 영역에는 id나 class를 부여해서 사용자가 원하는 영역이 무엇인지를 지정할 수 있게[고유값을 줄 수 있게] 만들어 줍니다. (앞으로 div 태그를 모두 영역이라고 부르겠습니다.)
영역는 HTML에서 구현해서, 실질적으로 어떤 요소가 화면에 나타날지를 정의합니다. 영역 안에는 글, 그림이나 동영상, 리스트 등 거의 모든 게 들어갈 수 있는데, 이런 것에도 영역에 부여했던 id나 class로 특성을 지정할 수 있습니다.
그리고 영역이나 그 안에 있는 요소들의 특성을 CSS에서 설정하도록 되어 있습니다. 티스토리 스킨 수정을 어려워 하시는 분들은 바로 이 부분을 정확히 이해하지 못해서 고생하시는 겁니다. 웹디자인을 디자이너 고유의 영역으로 만들어버린 것이 이 CSS란 녀석일만큼 실질적으로도 어려운 편이니까 좌절하지는 맙시다. (HTML과 CSS 사용이 이렇게 어려운데도, 이걸 다루는 능력이 좋은 디자이너가 되기 위한 요건과는 동떨어져 있다는 건 참 아이러니합니다.^^)
2.2 블로그 영역
블로그 스킨의 영역이 몇 단계로 나뉘느냐는 스킨 제작자 맘이며, 간단하게 통으로 하나로 만들 수도 있고, 10 개로 나눠서 엄청나게 복잡한 스킨으로 만들 수도 있습니다. ^^;;;; 보통은 크게 3~5 부분으로 나누는데, 이런 경우에 어떤 구성을 하는지 살펴보죠.
3 부분 : 헤드, 바디, 푸터
4 부분 : 헤드, 바디, 사이드바, 푸터
5 부분 : 헤드, 바디, 사이드바1, 사이드바2, 푸터
이게 보통 구성입니다. 헤드(head)는 머리, 말 그대로 블로그 맨 꼭대기에 있는 것입니다. 이것에는 보통 블로그 이름, 메뉴바 등이 오게 마련입니다. 푸터(footer)는 발, 말 그대로 블로그 맨 밑에 있는 것입니다. 보통 여기에는 블로그에 대한 각종 정보가 오게 되어 있습니다. 웹서비스 홈페이지도 맨 밑에 회사 정보가 표시되어 있습니다. 이런 것도 모두 푸터라고 부릅니다. 바디(body)는 보통 스킨 중간에 있고, 게시물이 여기에 표시됩니다. 참고로 바디는 모두 s_t3라는 한 태그 안에 모두 정의됩니다. 이건 모든 스킨이 만족해야 하는 점인데, 기술적인 부분이니 크게 신경쓰시지 않으셔도 됩니다. 그냥 그렇다구요. ^^
사이드바(sidebar)는 바디 옆에 위치하는 것입니다. 왼쪽과 오른쪽 양쪽에 위치할 수 있으므로 없을 수도, 한 개가 있을 수도, 두 개가 있을 수도 있겠죠. 두 개가 한쪽에 몰려 있게 만들 수도 있습니다.
블로그 영역은 크게 이렇게 생각할 수 있습니다. 간단하죠? 그리고 이것들의 위치는, 원리만 알면 비교적 간단하게 바꿀 수 있습니다. 왼쪽에 있던 사이드바를 오른쪽으로 옮긴다거나 하는 건 정말 간단하다는 뜻입니다.
ps. 중요
이번에 블로그 스킨을 수정하면서 발견한 것인데, 스킨이 초기 티스토리 때와는 방식이 약간 달라졌습니다. 예전에는 바디와 사이드바가 서로 다른 영역이었는데, 최근 만들어진 스킨은 바디 안에 컨텐트 영역과 사이드바 영역이 한꺼번에 들어가 있더군요. 아마도 스킨위자드 같은 자동 기능을 강화시키기 위해 전체 스킨 구조를 바꾼 것 같습니다. 스킨에 따라 수정할 때 조심할 필요가 있겠습니다.
2.3 영역의 배치
2.3.1 HTML에 의한 영역의 배치
각 영역의 배치는 우선 HTML에서 설정한 순서대로 위치하게 됩니다. 가장 먼저 설정한 게 푸터라면 푸터가 스킨의 가장 꼭대기에 오게 된다는 의미죠. 태그 이름은 영역 위치에 아무런 영향을 주지 않습니다. 그래서 보통 HTML 속에 있는 태그를 보면 헤드, 바디, 사이드바, 푸터 순서대로 배열됩니다. (간혹 웹사이트에 들어갔을 때, 전송속도가 너무 느리려 에러메시지를 내면서 출력되면, 출력된 화면이 위에서 아래로 일렬로 얇게(?) 늘어서는 것을 볼 우 있는데, 그게 CSS가 적용되지 않은 HTML만으로 출력된 모습입니다.)
2.3.2 CSS에 의한 영역의 배치
id나 class를 갖고 있는 영역은 CSS에서 속성을 지정해 줄 수 있습니다. 속성은 영역의 크기, 안여백, 바깥여백, 영역 경계선의 특성, 영역의 위치 등이 있습니다. 블로그 스킨을 만드는 게 아니고 단순히 수정하는 초보자는 이런 걸 자세히 알 필요는 없습니다. 다만 사이드바의 위치를 바꾸기 위해서 여백과 영역의 위치 지정 정도만 알면 됩니다.
영역 위치는 기본적으로 왼쪽(기본값), 가운데, 오른쪽으로 설정할 수 있습니다. 이렇게 설정해 놓으면 영역은 제한된 한도 안에서 설정된 위치에 표시됩니다.
예를 들어 HTML에서 컨텐트 영역이 정의된 이후에 사이드바 영역이 정의됐다면 왼쪽, 왼쪽이나 왼쪽, 오른쪽으로 설정해주면 왼쪽에 게시물, 오른쪽에 사이드바가 위치합니다.(HTML에서 먼저 정의된 컨텐트 영역이 우선권을 갖고 위치하게 되며, 나머지 공간에 사이드바가 위치하게 되므로 두 경우가 같아집니다. 주어진 공간이 충분히 넓지 않으면 뒤에 배치되는 영역이 밑으로 내려갑니다.) 둘의 위치를 반대로 바꾸고 싶다면 컨텐트 영역 설정을 오른쪽으로 바꾸면 됩니다.
이거 어떻게 하는 거냐구요? 이렇게 영역 위치를 바꿀 때는, 스킨에 따라서, 여백을 어떻게 줬느냐에 따라 간격이 너무 붙거나 떨어져 버리는 등의 현상이 생길 가능성이 있습니다. 이거 다 맞춰 수정하려면 귀찮아요. 초보일 때는 하지 마세요. ㅎㅎㅎㅋㅋ
물론 영역 위치를 절대좌표로 지정해서 완전히 엉뚱한 곳에 위치시킨다거나 (java 스크립트와 함께 써서) 움직이는 영역을 만들 수도 있습니다만, 티스토리 기본 스킨 중에 이렇게 만든 건 없습니다.
영역 위치는 전체 스킨 영역(보통 컨테이너(container)라고 부릅니다.) 안에서만 유효하고, 이 밖을 넘어가면 유효하지 않습니다. 따라서 뭔가 수정했는데 영역 오른쪽 끝이 짤린다 싶으면 영역 넓이를 좀 더 넓힐 필요가 있다는 것입니다. 이걸 해결하는 건 전문 디자이너가 아니라면 어려울 것입니다.
3. 가로폭 늘리기
이제 본격적으로 가로폭 늘리기에 대해 알아보도록 하죠.
3.1 네모 상자 만들기
일단 가로폭을 조정하기에 앞서서, 웹브라우저가 네모난 상자를 어떻게 그리는지 알아봅시다.
HTML4와 CSS에는 웹브라우저가 네모난 상자를 그리는 전용 태그가 지정돼 있습니다. 그러나 이 태그는 모양이 이쁘지 않아서 스킨에는 많이 쓰이지 않습니다. 보통은 꼭지를 둥글게 처리한 상자를 많이 쓰는데, 이 둥근 모양은 모두 이미지로 구현합니다. 엄청난 비밀이죠? ㄷㄷㄷㄷ 이렇게 그림을 쓰려면 나머지 직선 부분에도 그림을 넣을 수밖에 없습니다. 반복해서 넣는 거죠. (이렇게 엄청난 노가다를 디자이너들은 매일같이 하십니다. 존경합니다.) 그래서.....
네모난 상자의 가로폭을 바꾸려면 모두 두 가지를 바꿔야 합니다. 꼭지 위치와 세로선 위치!!!!
이해가 가시죠???
새로 만들어지고 있는 HTML5와 CSS3에서는 모서리가 둥근 사각형 상자 등을 지원한다고 합니다. 과연 이게 언제 지원되기 시작할지 궁금하네요.
3.2 본격적으로 가로폭 늘리기
여기까지 읽으셨다면 모든 기본단계를 끝내신 겁니다. 이제 본격적인 가로폭을 늘리는 작업 시작....
가로폭을 늘릴 때는 HTML을 손댈 필요가 전혀 없습니다. 오로지 CSS만 손대면 됩니다. 스킨의 가로폭에 쓰이는 숫자는 다행히도 상대적으로 블로그 스킨에서 다른 요소에 쓰이는 숫자보다 훨씬 큰 편입니다. 그러므로 방법은 간단한 편입니다. 간단하게 몇 단계로 설명하겠습니다.
기본조건으로 스킨위자드에 들어가서 현재 설정된 블로그 가로폭을 알아봅니다. 이 폭과 내가 원하는 폭의 차이를 알아둡니다.
첫 번째, HTML과 CSS 편집 창으로 간다.
두 번째, 웹브라우저의 찾기 기능을 사용한다. (크롭 웹브라우저에서는 Ctrl+F)
세 번째, 찾기 입력창에 px를 입력한다.
네 번째, CSS 입력창 안에 있는 px 앞에는 보통 숫자들이 써져 있다. 그중에 큰 것을 찾는다.
(여기에서 큰 숫자는 특정한 숫자가 아니라 그냥 큰 숫자다.)
다섯 번째, 찾은 숫자에 앞서 알아둔 폭의 차이만큼 더합니다.*주*
여섯 번째, CSS 의 모든 큰 숫자에 대해서 네 번째와 다섯 번째 단계를 반복합니다.
여기서 주의해야 할 게 하나 있습니다. 터무니없이 큰 숫자나 앞에 -가 붙은 숫자는 수정하지 않아야 합니다. 그런 숫자들은 영역 배치를 위해 의도적으로 엉뚱한 값을 쓴 것일 가능성이 크기 때문입니다. (제가 고른 스킨에는 '5000'과 '-5000'이라는 숫자가 몇 군데 쓰였네요.)
간단하신가요? 이 작은꼭지만 알면 다 할 수 있는데 왜 앞의 해골복잡한 이야기까지 다 했냐구요???
근데 이걸 다 했는데 문제가 생긴다거나 하면 어떻게 하시겠습니까? 이런 경우는 위의 지식을 갖고 찾아서 잘못 고친 부분을 옳게 바꿔줘야 합니다. 바꾸면 안 되는데 고친 부분을 되돌리거나, 여러 군대에서 조금씩 나눠서 적용시켜야 하는 곳이거나....등등 스킨에 따라서 간단한 설명으로 해결할 수 없는 이런 예외사항이 생길 가능성이 워낙 높습니다.
3.3 마무리
마지막 마무리를 할 때가 됐습니다.
스킨 가로폭을 다 넓혔으면 입력하는 컨텐트의 가로폭도 그에 맞게 늘려야겠죠? 이걸 위해서 글 관리>글 설정>글쓰기 가로폭에 가서 위에서 바꿔준 가로폭을 입력해 줍니다.
4. 확인
스킨이 정상적으로 수정됐다면, 스킨위자드에 가로폭이 원하는 숫자로 바뀌어 있을 겁니다. 사진을 업로드하면, 사진이 스킨에 딱 맞게 나올 것입니다. 정상적으로 수정된 게 아니라면 끝이 잘리거나 모자라거나 그렇게 되겠죠.
*주* : 숫자를 바꿔줘야 하는 곳은 주로 이런 곳이었습니다.
헤드 가로폭, 바디 가로폭, 푸터 가로폭, 콘텐트 출력 가로폭, 댓글 출력 가로폭, 댓글 입력상자 가로폭, 댓글 입력단추 가로위치, 안부글 출력 가로폭, 안부글 입력상자 가로폭, 안부글 입력단추 가로위치
이게 보통 구성입니다. 헤드(head)는 머리, 말 그대로 블로그 맨 꼭대기에 있는 것입니다. 이것에는 보통 블로그 이름, 메뉴바 등이 오게 마련입니다. 푸터(footer)는 발, 말 그대로 블로그 맨 밑에 있는 것입니다. 보통 여기에는 블로그에 대한 각종 정보가 오게 되어 있습니다. 웹서비스 홈페이지도 맨 밑에 회사 정보가 표시되어 있습니다. 이런 것도 모두 푸터라고 부릅니다. 바디(body)는 보통 스킨 중간에 있고, 게시물이 여기에 표시됩니다. 참고로 바디는 모두 s_t3라는 한 태그 안에 모두 정의됩니다. 이건 모든 스킨이 만족해야 하는 점인데, 기술적인 부분이니 크게 신경쓰시지 않으셔도 됩니다. 그냥 그렇다구요. ^^
사이드바(sidebar)는 바디 옆에 위치하는 것입니다. 왼쪽과 오른쪽 양쪽에 위치할 수 있으므로 없을 수도, 한 개가 있을 수도, 두 개가 있을 수도 있겠죠. 두 개가 한쪽에 몰려 있게 만들 수도 있습니다.
블로그 영역은 크게 이렇게 생각할 수 있습니다. 간단하죠? 그리고 이것들의 위치는, 원리만 알면 비교적 간단하게 바꿀 수 있습니다. 왼쪽에 있던 사이드바를 오른쪽으로 옮긴다거나 하는 건 정말 간단하다는 뜻입니다.
ps. 중요
이번에 블로그 스킨을 수정하면서 발견한 것인데, 스킨이 초기 티스토리 때와는 방식이 약간 달라졌습니다. 예전에는 바디와 사이드바가 서로 다른 영역이었는데, 최근 만들어진 스킨은 바디 안에 컨텐트 영역과 사이드바 영역이 한꺼번에 들어가 있더군요. 아마도 스킨위자드 같은 자동 기능을 강화시키기 위해 전체 스킨 구조를 바꾼 것 같습니다. 스킨에 따라 수정할 때 조심할 필요가 있겠습니다.
2.3 영역의 배치
2.3.1 HTML에 의한 영역의 배치
각 영역의 배치는 우선 HTML에서 설정한 순서대로 위치하게 됩니다. 가장 먼저 설정한 게 푸터라면 푸터가 스킨의 가장 꼭대기에 오게 된다는 의미죠. 태그 이름은 영역 위치에 아무런 영향을 주지 않습니다. 그래서 보통 HTML 속에 있는 태그를 보면 헤드, 바디, 사이드바, 푸터 순서대로 배열됩니다. (간혹 웹사이트에 들어갔을 때, 전송속도가 너무 느리려 에러메시지를 내면서 출력되면, 출력된 화면이 위에서 아래로 일렬로 얇게(?) 늘어서는 것을 볼 우 있는데, 그게 CSS가 적용되지 않은 HTML만으로 출력된 모습입니다.)
2.3.2 CSS에 의한 영역의 배치
id나 class를 갖고 있는 영역은 CSS에서 속성을 지정해 줄 수 있습니다. 속성은 영역의 크기, 안여백, 바깥여백, 영역 경계선의 특성, 영역의 위치 등이 있습니다. 블로그 스킨을 만드는 게 아니고 단순히 수정하는 초보자는 이런 걸 자세히 알 필요는 없습니다. 다만 사이드바의 위치를 바꾸기 위해서 여백과 영역의 위치 지정 정도만 알면 됩니다.
영역 위치는 기본적으로 왼쪽(기본값), 가운데, 오른쪽으로 설정할 수 있습니다. 이렇게 설정해 놓으면 영역은 제한된 한도 안에서 설정된 위치에 표시됩니다.
예를 들어 HTML에서 컨텐트 영역이 정의된 이후에 사이드바 영역이 정의됐다면 왼쪽, 왼쪽이나 왼쪽, 오른쪽으로 설정해주면 왼쪽에 게시물, 오른쪽에 사이드바가 위치합니다.(HTML에서 먼저 정의된 컨텐트 영역이 우선권을 갖고 위치하게 되며, 나머지 공간에 사이드바가 위치하게 되므로 두 경우가 같아집니다. 주어진 공간이 충분히 넓지 않으면 뒤에 배치되는 영역이 밑으로 내려갑니다.) 둘의 위치를 반대로 바꾸고 싶다면 컨텐트 영역 설정을 오른쪽으로 바꾸면 됩니다.
이거 어떻게 하는 거냐구요? 이렇게 영역 위치를 바꿀 때는, 스킨에 따라서, 여백을 어떻게 줬느냐에 따라 간격이 너무 붙거나 떨어져 버리는 등의 현상이 생길 가능성이 있습니다. 이거 다 맞춰 수정하려면 귀찮아요. 초보일 때는 하지 마세요. ㅎㅎㅎㅋㅋ
물론 영역 위치를 절대좌표로 지정해서 완전히 엉뚱한 곳에 위치시킨다거나 (java 스크립트와 함께 써서) 움직이는 영역을 만들 수도 있습니다만, 티스토리 기본 스킨 중에 이렇게 만든 건 없습니다.
영역 위치는 전체 스킨 영역(보통 컨테이너(container)라고 부릅니다.) 안에서만 유효하고, 이 밖을 넘어가면 유효하지 않습니다. 따라서 뭔가 수정했는데 영역 오른쪽 끝이 짤린다 싶으면 영역 넓이를 좀 더 넓힐 필요가 있다는 것입니다. 이걸 해결하는 건 전문 디자이너가 아니라면 어려울 것입니다.
3. 가로폭 늘리기
이제 본격적으로 가로폭 늘리기에 대해 알아보도록 하죠.
3.1 네모 상자 만들기
일단 가로폭을 조정하기에 앞서서, 웹브라우저가 네모난 상자를 어떻게 그리는지 알아봅시다.
HTML4와 CSS에는 웹브라우저가 네모난 상자를 그리는 전용 태그가 지정돼 있습니다. 그러나 이 태그는 모양이 이쁘지 않아서 스킨에는 많이 쓰이지 않습니다. 보통은 꼭지를 둥글게 처리한 상자를 많이 쓰는데, 이 둥근 모양은 모두 이미지로 구현합니다. 엄청난 비밀이죠? ㄷㄷㄷㄷ 이렇게 그림을 쓰려면 나머지 직선 부분에도 그림을 넣을 수밖에 없습니다. 반복해서 넣는 거죠. (이렇게 엄청난 노가다를 디자이너들은 매일같이 하십니다. 존경합니다.) 그래서.....
네모난 상자의 가로폭을 바꾸려면 모두 두 가지를 바꿔야 합니다. 꼭지 위치와 세로선 위치!!!!
이해가 가시죠???
새로 만들어지고 있는 HTML5와 CSS3에서는 모서리가 둥근 사각형 상자 등을 지원한다고 합니다. 과연 이게 언제 지원되기 시작할지 궁금하네요.
3.2 본격적으로 가로폭 늘리기
여기까지 읽으셨다면 모든 기본단계를 끝내신 겁니다. 이제 본격적인 가로폭을 늘리는 작업 시작....
가로폭을 늘릴 때는 HTML을 손댈 필요가 전혀 없습니다. 오로지 CSS만 손대면 됩니다. 스킨의 가로폭에 쓰이는 숫자는 다행히도 상대적으로 블로그 스킨에서 다른 요소에 쓰이는 숫자보다 훨씬 큰 편입니다. 그러므로 방법은 간단한 편입니다. 간단하게 몇 단계로 설명하겠습니다.
기본조건으로 스킨위자드에 들어가서 현재 설정된 블로그 가로폭을 알아봅니다. 이 폭과 내가 원하는 폭의 차이를 알아둡니다.
첫 번째, HTML과 CSS 편집 창으로 간다.
두 번째, 웹브라우저의 찾기 기능을 사용한다. (크롭 웹브라우저에서는 Ctrl+F)
세 번째, 찾기 입력창에 px를 입력한다.
네 번째, CSS 입력창 안에 있는 px 앞에는 보통 숫자들이 써져 있다. 그중에 큰 것을 찾는다.
(여기에서 큰 숫자는 특정한 숫자가 아니라 그냥 큰 숫자다.)
다섯 번째, 찾은 숫자에 앞서 알아둔 폭의 차이만큼 더합니다.*주*
여섯 번째, CSS 의 모든 큰 숫자에 대해서 네 번째와 다섯 번째 단계를 반복합니다.
 |
| px 검색으로 필요한 숫자 찾기 (브라우저는 IE보다 크롬을 쓰는 게 편했다.) |
여기서 주의해야 할 게 하나 있습니다. 터무니없이 큰 숫자나 앞에 -가 붙은 숫자는 수정하지 않아야 합니다. 그런 숫자들은 영역 배치를 위해 의도적으로 엉뚱한 값을 쓴 것일 가능성이 크기 때문입니다. (제가 고른 스킨에는 '5000'과 '-5000'이라는 숫자가 몇 군데 쓰였네요.)
간단하신가요? 이 작은꼭지만 알면 다 할 수 있는데 왜 앞의 해골복잡한 이야기까지 다 했냐구요???
근데 이걸 다 했는데 문제가 생긴다거나 하면 어떻게 하시겠습니까? 이런 경우는 위의 지식을 갖고 찾아서 잘못 고친 부분을 옳게 바꿔줘야 합니다. 바꾸면 안 되는데 고친 부분을 되돌리거나, 여러 군대에서 조금씩 나눠서 적용시켜야 하는 곳이거나....등등 스킨에 따라서 간단한 설명으로 해결할 수 없는 이런 예외사항이 생길 가능성이 워낙 높습니다.
3.3 마무리
마지막 마무리를 할 때가 됐습니다.
스킨 가로폭을 다 넓혔으면 입력하는 컨텐트의 가로폭도 그에 맞게 늘려야겠죠? 이걸 위해서 글 관리>글 설정>글쓰기 가로폭에 가서 위에서 바꿔준 가로폭을 입력해 줍니다.
4. 확인
스킨이 정상적으로 수정됐다면, 스킨위자드에 가로폭이 원하는 숫자로 바뀌어 있을 겁니다. 사진을 업로드하면, 사진이 스킨에 딱 맞게 나올 것입니다. 정상적으로 수정된 게 아니라면 끝이 잘리거나 모자라거나 그렇게 되겠죠.
 |
| 정상적으로 수정한 결과 : 스킨 위저드에서 1200으로 정상적으로 표시되지만, 수정은 할 수 없다. |
*주* : 숫자를 바꿔줘야 하는 곳은 주로 이런 곳이었습니다.
헤드 가로폭, 바디 가로폭, 푸터 가로폭, 콘텐트 출력 가로폭, 댓글 출력 가로폭, 댓글 입력상자 가로폭, 댓글 입력단추 가로위치, 안부글 출력 가로폭, 안부글 입력상자 가로폭, 안부글 입력단추 가로위치
댓글 없음:
댓글 쓰기