티스토리 블로그 스킨 만들기 4 - 사이드바 영역 배경이미지 만들기

사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스 선택자를 사용하여 시작태그 부분과 마감태그 부분만 삽입하고 CSS에서는 클래스 선택자를 사용하므로 한번만 적용하면 되니까 컨텐트 영역보다는 쉽습니다.

여러개의 모듈이 사이드바에 배치되어있습니다. 티스토리 블로그는 관리센터의 사이드바 메뉴에서 원하는 모듈을 제거하거나 추가할 수 있습니다. 최근에는 구글 광고가 가로세로 200픽셀과 250픽셀의 정사각형 크기가 추가되어 좁은 사이드바에도 추가할 수 있게 되었습니다.

1. HTML코드 삽입하기

html 편집 창에서 사이드바 부분을 수정하기 위해서는 코드의 구조를 알면 편리합니다. 지금 수정하고 있는 스킨은 사이드바가 하나있습니다. 사이드바에는 2와 3의 두개의 작은 사이드바가 있습니다. 2의 사이드바에는 6과 같은 여러개의 모듈이 있습니다. 여러개의 모듈은 4와 5라는 모듈을 감싸는 태그가 있습니다. 배경이미지 코드를 삽입할 곳은 6의 모듈을 감싸는 7과 8의 위치에 있어야합니다.

flexible-rounded3-final.zip

이전 글과 같은 내용의 압축파일입니다. html파일을 텍스트 에디터에 열고 사이드바 부분에서 1의 코드를 블럭설정하여 Ctrl+C키를 눌러 복사합니다. 2는 간단하니까 직접입력해도 됩니다.

블로그 HTML/CSS 편집 화면에서 id="sidebar로 검색하면 위와 같이 나옵니다. 웹페이지에서 원하는 단어를 검색해서 찾으려면 구체적인 단어를 입력하면 빨리 찾을 수 있습니다. sidebar로 입력하면 수십개가 나옵니다. 사이드바는 주로 id 속성을 사용하기 때문에 구체적인 단어가 되고  id="sidebar로  입력하면 하나밖에 안나옵니다. 

티스토리의 사이드바에 있는 모듈은 모두가 2처럼 <s_sidebar-element>라는 티스토리 고유의 태그를 사용합니다. 텍스트큐브 블로그 프로그램 고유의 태그죠. 이런 고유의 태그는 php 함수로 정의 됩니다. php 함수는 무엇이든 만들 수 있어서 많은 블로그 프로그램이나 CMS 프로그램들은 고유의 함수를 갖고 있습니다. 3의 <s_sidebar>도 티스토리만 사용하는 태그입니다. 사이드바를 만들려면 이 태그를 사용합니다. 지금 수정하고 있는 스킨은 두개의 사이드바가 있는데 위 html페이지에서 아래로 내려가면 <s_sidebar>가 하나 또 나옵니다. 이렇듯 티스토리가 사용하는(정확하게는 텍스트큐브) 고유의 태그는 정해져 있고 규칙이 있습니다. 

그 규칙이라는 것은 그냥 <div> 태그만 삽입해서는 안되고 위처럼  <s_sidebar>나  <s_sidebar-element>가 항상 있어야합니다. 마감태그는 당연히 괄호다음에 슬래시(/)가 있는 태그를 사용합니다.  <s_sidebar-element>는 모듈을 삽입할때 사용하는 태그입니다. 티스토리에서 정해진 모듈은 이 태그를 사용합니다. 나중에 지금 만들고 있는 스킨을 수정해서 두개의 사이드바를 나란히 배치하거나 컨텐트 영역 양쪽에 두개의 사이드바를 배치할때 나오겠지만 사이드바를 추가로 만들때도 <s_sidebar> </s_sidebar>를 사용해야합니다. 이렇게 임의로 만든 사이드바 영역에는  <s_sidebar-element> 라는 태그를 사용하거나 관리자센터의 사이드바 메뉴에서 태그입력기나 html 배너출력기 같은 간편하게 사이드바에 어떤 요소를 추가할 수 있는 모듈을 사용합니다. 이러한 태그입력기가 <s_sidebar-element> 라는 태그를 대신하는 것이죠. 나중에 자세히 설명드리기로 하고 우선 위 과정을 진행합니다.

위에서 시작부분을 삽입했으니 마감부분도 삽입해야죠. 위 화면에서 아래로 스크롤해서 내려가다보면 처음만나는  </s_sidebar-element> 태그가 나옵니다.

1의 태그 위에 보면 2의 테이블태그가 있습니다. 끝에 클릭하고 엔터키를 쳐서 스페이스바를 여러면 눌러 3의 위치에 마감 </div>태그를 두개 만듭니다. 그러면 하나의 배경이미지가 삽입되는 것입니다. 4를 보면 다시 태그가 시작됩니다. 바로 아래에 5처럼 배경이미지 시작부분을 복사해 넣습니다. 아래로 내려가면 이런 일을 열번정도 반복해야하는데 요령이 있습니다. 파란색부분을 6에서부터 클릭드래그하여 5의 마지막 부분까지 블럭설정합니다. 6의 줄 시작부분부터 하는 이유는 다른 곳에 복사해 붙여넣을 때 태그가 위치를 원래의 위치에 배치되도록 하기 위한 것이죠. 이렇게 복사한 후 아래로 내려갑니다.

그다음 마감태그인 1과 시작태그인 2을 3에서부터 클릭드래그하여 위 이미지처럼 블럭설정합니다. Ctrl+V키를 누르면 위 이미지처럼 붙여집니다. 이처럼 나머지 태그에 대해서도 붙여넣습니다. 계속내려가다보면 </s_sidebar>라는 사이드바 마감태그가 나옵니다.

1의 사이드바 마감태그가 나오면 바로전에 모듈 마감태그가 있습니다. 바로 앞에 3처럼 두개의 마감 div태그를 입력합니다. 마지막 모듈 태그인 4를 블럭설정해서 Ctrl+V키를 눌러 복사해 넣고 5부분을 복사해서 6처럼 붙여넣으면 됩니다. 

2. CSS 코드 삽입하기 

html 코드는 한곳에만 삽입하면 간단하겠지만 여러곳에 삽입하다보면 헷갈리므로 조심해서 해야합니다. 코드 수정이 처음인 분들은 html부분이 어려울 경우 CSS부터 삽입하고 html코드를 하나씩 삽입하고 저장한 후에 웹브라우저에서 잘 됐는지 확인하면서 계속 html 코드를 추가하면 오류를 방지할 수 있습니다. CSS부터 삽입하고 html코드를 한곳에 삽입하면 바로 확인이 가능합니다.

첨부파일에서 style2.css파일을 텍스트 에디터에 열면 위와 같이 나옵니다. 블로그의 사이드바는 이미 1의 속성이 있으므로 이부분을 제외하고 2부분만 블럭설정하여 복사합니다. 그전에 3의 폴더명에서 7을 제거해줍니다. 3곳에서 제거합니다. 

블로그의 CSS편집창에서 #sidebar로 검색하면 1이 나옵니다. 끝부분인 2에 클릭하고 엔터키를 친다음 Ctrl+V키를 눌러 붙여넣습니다. 아래에 footer가 보입니다. 수정할 부분은 4의 width를 264로 바꾸고 5의 패딩을 0으로 해준 다음 저장버튼을 클릭합니다. 웹에서 블로그 화면을 보면 사이드바의 폭이 넓어서 아래로 밀려서 다음과 같이 나옵니다.

스크롤바를 내려서 보면 두개의 요소가 겹칩니다. 컨테이너요소의 폭을 늘려야하는 상황입니다. 칫수를 정확히재야하는데  이부분을 캡쳐해서 포토샵에서 픽셀을 재야합니다. 겹치는 부분과 두 요소의 마진을 포함해서 27픽셀이면 적당할 것 같습니다.

CSS 편집화면에서 #container로 검색합니다. 1의 수치를 290+27=317을 입력하고 " = "을 제거합니다. 이부분을 고치면 2,3,4도 수정해야합니다. 각각 27을 더하고(341, 317, 305), " = "을 제거한 다음 저장하고 스킨위자드로 갑니다.

처음 들어오면 1부분이 계속 어긋나 있습니다. 하지만 2의 게시글 탭을 선택하고 3과 4의 적용버튼을 클릭하고 나간뒤 다시 스킨위자드 버튼을 클릭해서 들어오면 1처럼 잘 맞습니다. 글영역 넓이의 슬라이더를 좌우로 클릭드래그하면 컨텐트 영역이 변동되면서 컨텐트영역과 컨테이너영역의 배경이미지가 같이 늘어나거나 줄어듭니다. 수치를 다시 700으로 입력하고 적용버튼 두개를 클릭하고 나옵니다. CSS 편집창에 들어가면 수치들이 변경되어있을 겁니다.

이제 둥근 모서리의 배경이미지 부분은 다 끝났습니다. 어려운 작업이었지만 여러가지 관계를 숙지하고나면 여러번 들락거리지 않고도 한번에 끝낼 수 있게 됩니다.

다음 글에서는 헤더의 어긋난 부분을 제거하고 다른 부분도 수정하는 작업을 진행합니다. 구글광고 250픽셀짜리 정사각형을 사이드바에 추가하고 가로 728픽셀 직사각형 광고를 컨텐트 영역에 삽입하는 방법도 알아봅니다.