워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

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


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


1. HTML코드 삽입하기



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



이전 글과 같은 내용의 압축파일입니다. 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픽셀 직사각형 광고를 컨텐트 영역에 삽입하는 방법도 알아봅니다.

댓글 (20)

댓글 목록

milaero access_time

티스토리 스킨 꾸미기가 좀 힘들었는데 많이 도움되겠군요.
감사합니다. 즐거운 주말 되세요. :D

베누시안 access_time

안녕하세요. 둥근모서리의 배경넣기가 좀 어려운데 해보시다가 안되면 댓글 달아주세요.

이츠하크 access_time

지금 여기까지 따라 했습니다.
사이드바 만들차례입니다. 정말 재밌습니다. 쉽게 설명을 잘 해 주셔서 걍 따라하기만 하면 되네요.
고맙습니다.

베누시안 access_time

재미있으시다니 다행입니다. 관심이 있으면 재미도 생기더군요.^^

access_time

비밀댓글입니다

access_time

비밀댓글입니다

베누시안 access_time

안녕하세요. 아주 잘 하셨네요. 제글을 똑같이 따라하는 것 보다는 자신이 원하는 디자인으로 컨텐트 영역을 조절한 것은 아주 바람직한 공부이십니다. 상이라도 드리고 싶군요. ^^ 컨텐트 영역 하단 부분이 이상하게 나오는 것은 점검해보겠습니다.

베누시안 access_time

요소검사를 해보니 하단에 컨텐트 영역의 하단 배경이미지가 또하나 나오는 것은 <div id="wrapBtm-content">이 하단에 추가 되었기 때문입니다. 위 검색어로 검색하면 두개가 나올겁니다. 그러면 두번째의 코드부분을 모두 제거하세요.

<div id="wrapBtm-content">
<div class="bCenter-content"></div><div class="bRight-content"></div>
</div>

위에 나온 것이 두개 있습니다. 이것은 컨텐트 영역의 하단 배경이미지를 만드는 것인데 이것이 두개나 있는 것이죠. 두번째 것의 위부분만 지우면 됩니다.

썬샤인 access_time

아 그러쿤요~ 수정하니깐 바로 고쳐지네요^^ 처음의 밋밋했던 기본스킨이 바꾸니 참 맘에 드네요~ 베누시안님 덕분입니다.

시간내주셔서 블로그 체크까지 해주시고 감사드립니다. 다음글이 너무 기대되네요~ :)

베누시안 access_time

제 포스팅이 블로그 스킨 만들기 부분만 하면 좀 어렵지만 차근차근 따라하시면 되고 되도록이면 CSS기초부분과 연계되어있으니 그부분을 참고하시면 더 쉽습니다.

access_time

비밀댓글입니다

베누시안 access_time

제가보기에는 처음 두개의 단어가 들어간 것은 스페이스키를 눌러서 단어로서 역할을 하기 때문이고 두번째 글자가 안들어간 것은 단어가 너무 길어서 그런 것 같습니다. 세번째줄은 br태그가 들어가서 그런 것이구요. 단어를 정상으로 만들어서 입력해보세요.

access_time

비밀댓글입니다

by아자 access_time

이제야 댓글을 남기지만 항상 많은 걸 배워갑니다^^
자주 들리겠습니다~!

베누시안 access_time

안녕하세요 반갑습니다. 제글이 도움이 되신다니 다행이네요. 문제가 있으시면 꼭 댓글을 남겨주시면 감사하겠습니다.

민들레~ access_time

베누시안님 여기까지 잘 따라왔는데 content영역이 회색으로 되네요.
처음부터 다시 반복해도 똑같이 나오는데 이유를 모르겟어요. 조언 부탁드려도 될가요?
http://dallante.tistory.com/

베누시안 access_time

스킨 만들기기 좀 어려운 작업입니다. HTML과 CSS에 대해 지식이 있어야 합니다. CSS에 대해 공부하시면 좋습니다. 제 블로그 카테고리를 보시면 됩니다. 제가 시간이 안돼서 도움 드리기 어렵습니다.

STRAWBERRY_XOXO access_time

질문이있습니다 ㅠㅠ 제가 티스토리 스킨에서 뒷배경으로 사진하나를 넣고싶은데요 아주 큰 그건 어떻게 해야할까요ㅠㅠ....아무리 찾아도 방법이 없네요 ㅠㅠㅠㅠㅠ

베누시안 access_time

파일 추가 화면에서 배경 이미지를 업로드 하고 style.css에서 아래처럼 입력하세요.
body { background:url(./images/파일이름.jpg) }

STRAWBERRY_XOXO access_time

감사합니다ㅠㅠㅠㅠㅠ드디어 !!! 많은 정보 알아갑니다♡