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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

이전 글 에서 티스토리 스킨을 만들기 위한 환경 설정에 대해서 알아보았습니다. 두가지 방법이 있었는데 가능한한 텍스트큐브를 WAMP서버에 설치하고 작업하는 것이 좋습니다. 코드찾기나 코딩하는데 편리하고 글자도 크게 볼 수 있기 때문이죠. 

이전 글에서 견본으로 제시한 워드프레스 테마 스킨은 중요한 부분이 둥근 모서리 배경이미지입니다. 어려운 작업이기 때문에 CSS기초부분에서 4개의 포스팅을 올렸습니다. 이곳을 먼저 보신 후에 진행하시면 이해가 빠릅니다.

웹사이트 만들기에서 웹브라우저의 선택도 아주 중요합니다. 개발자도구라는 것이 있어서 어떤 부분을 수정할지 찾기 쉽기 때문이죠. 이 개발자도구는 처음에 파이어폭스의 파이어버그(Fire Bug)로 시작해서 이제는 모든 웹브라우저에 기본적으로 추가되어있습니다. 다만 파이어폭스는 아직 별도의 파이어버그 애드온(플러그인)을 설치해야 사용할 수 있습니다. 저는 구글 크롬 플러스를 사용합니다. 지금은 쿨노보(Cool Novo)로 명칭이 바뀌었죠.

1. 글자색상과 배경색상 바꾸기


 
저는 티스토리 테스트 블로그를 만들어서 블로그 기본스킨을 설치하고 변경작업을 진행합니다. 배경에 마우스 우클릭해서 나오는 메뉴에서 요소검사를 선택하면 하단에 html 코드와 우측에 CSS가 나타납니다. 배경색상이 있는 body태그에 color라고 나오고 background라는 속성이 나옵니다. color는 글자의 색상이고 background는 배경색상입니다. 블로그 화면은 두개를 사용해야하는데 수정하기위한 관리자페이지에서 html/css화면이 필요하고 위처럼 확인을 위한 화면이 필요합니다. 두개의 화면을 띄워놓고 작업해야 바로 변경된 것을 확인할 수 있습니다. 

수정할 티스토리 스킨은 기본 스킨인 Basic입니다. 이 스킨은 메뉴추가 기능이 있고 스킨위자드 기능이 있어서 메뉴를 추가하거나 스킨의 일부를 수정할 수 있습니다. 스킨 위자드 기능을 사용하지 않고 CSS에 있는 스킨 위자드를 위한 코드를 제거하려고 했지만 이에 대한 사용법도 알아두는 것이 좋으니 그대로 유지하면서 수정합니다.

 
관리자센터에서 스킨을 클릭하고 2의 세모를 클릭, 3의 스킨위자드를 클릭하면 스킨위자드를 사용할 수 있는 화면이 나옵니다.


배경탭에서 하단에 보면 배경색을 입력할 수 있는 곳이 있습니다. 이곳에 #444를 입력하고 입력버튼을 클릭하면 배경색상이 바뀝니다. 적용버튼을 클릭하고 나옵니다. 


관리자센터에서 좌측메뉴의 HTML/CSS편집을 클릭하면 HTML코드와 CSS를 편집할 수 있는 창이 나옵니다. CSS를 편집할 수 있는 화면이 작아서 2를 클릭드래그하여 아래로 내리면 늘어납니다. body 태그는 첫부분에 나오기 때문에 찾기 쉽지만 대부분의 코드는 Ctrl+F키를 누르면 화면 상단에 검색 창이 나옵니다. 여기에 찾고자하는 태그나 선택자를 복사하여 붙여넣기하면 바로 찾을 수 있습니다. 같은 태그가 많으면 여러개가 나오고 우측에서 화살표를 클릭하여 원하는 부분을 찾아야합니다. 앞으로는 이부분을 생략하니 항상 블로그화면에서 요소검사해서 찾고자하는 선택자를 마우스로 클릭드래그하여 블럭설정하고 Ctrl+C키를 눌러 복사하고 위화면에서 찾아야합니다.

원래의 배경색인 #969696이 스킨위자드에서 바꾼 배경색 #444으로 바뀌어 있을 겁니다. 워드프레스의 글자 색은 #000(검정)이므로 color:#666;을 #000으로 바꿔줍니다. 이전글에서 언급했듯이 스킨위자드에서 수정하면 스킨위자드를 사용하는 CSS부분이 수정되므로 위와 같은 빨간네모박스에 있는 형태의 코드는 스킨위자드에서 수정해야합니다. 저장버튼을 클릭하고 "스킨이 저장되었습니다."라는 메시지가 나오면 블로그화면에서 Ctrl+R키를 눌러 변경된 것을 확인합니다.

2. 컨테이너 박스 배경이미지 바꾸기



새로고침을 했더니 배경색과 글자색은 바뀌었는데 테두리 부분이 색상이 다릅니다. 요소검사를 하니 이미지로 둘러싸여있습니다. 모서리부분을 둥글게 하기 위해 이미지를 사용하였는데 그림자도 만들기 위해서 약간 어두운 색이 경계선에 추가되어있습니다. 모서리를 둥글게 하려면 CSS3에서 소개된 border-radius 속성을 사용하면 됩니다. 워드프레스에서도 이 속성을 사용하여 모서리를 둥글게 했죠. 하지만 이 속성은 대부분의 웹브라우저에서 지원하지만 인터넷 익스플로러는 9버전에서만 지원합니다. 이 속성을 사용하면 ie8버전 이하에서는 모서리가 각지게 나옵니다. 그래서 이미지를 사용할 수 밖에 없습니다.

 
위 압축파일에는 CSS기초부분에서 만든 배경 박스를 만들기 위한 이미지들이 있습니다. 다운받아서 압축해제한 후 HTML/CSS 편집창과 같이 있는 파일업로드 탭을 선택하고 하단에서 추가 버튼을 클릭하여 19개의 파일을 업로드합니다. 압축해제한 폴더로 들어가서 Ctrl+A키를 누르면 모두 선택이 되고 열기를 클릭하면 모두 업로드 됩니다. 


CSS 편집창에서 #wrapTop로 검색을 하면 같은 곳에 배경 이미지 파일이름이 있는 장소가 나옵니다. 비슷한 역할을 하는 선택자들은 같은 장소에 모아두는 것이 이럴때 편리합니다. 8개의 파일이름을 바꿔줍니다. CSS기초부분에서 배경이미지를 만든 것은 이 스킨의 html코드와 CSS코드를 기준으로 만든 것이기 때문에 이미지의 이름만 바꿔주면 바로 적용됩니다. 순서는 좌측상단(top-left)부터시작해서 지그재그 형태로 아래로 내려옵니다. 저장한 다음 웹브라우저에서 새로고침하면 정상적으로 나오게 됩니다.