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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

스킨을 만들때는 방문자를 항상 우선 생각해야하므로 가능한한 모든 웹브라우저를 설치해서 시험해봐야하지만 최소한 5대 브라우저(인터넷 익스플로러, 구글 크롬, 파이어폭스, 애플 사파리, 오페라)는 설치해 놓는 것이 좋습니다. 최근에는 구글 크롬의 사용자가 많이 늘었죠. 웹브라우저는 옛날 버전도 시험해봐야하는데 모든 버전을 설치해서 사용할 수 없으니 이를 시험할 수 있는 사이트에서 URL을 입력하면 어떻게 보이는지 알 수 있습니다.  이곳 을 클릭하면 무료로 시험할 수 있는 사이트로 가는데 스크린샷을 보려면 한참 기다려야합니다. 유료로 사용하면 바로 확인이 가능하죠. 시험삼아 해보는 것도 좋겠습니다.


1에 사이트 주소를 입력하고 2의 None버튼을 클릭하면 3의 SeaMonkey를 제외하고 체크되어 있는 곳이 모두 해제됩니다. 3도 체크해제하고 원하는 브라우저 4에 체크한 다음 5의 Submit 버튼을 클릭하면 다음화면으로 넘어가서 기다리라고 합니다. Queue 시간이 4분 남았다고 하는데 더 기다려야 되더군요.


어쨋든 기다려서 파일을 다운 받아 봤더니 웹호스팅에 설치한 워드프레스의 스킨이 둥근모서리가 아닌 각지게 나옵니다. 워드프레스의 테마 스킨은 CSS3의 border-radius 속성을 사용하므로 IE8 이전 버전에서는 적용이 안된다는 것이 증명되는 것입니다.

본론으로 들어갑니다.


이번 글에서 만들게 될 컨텐트 영역과 사이드바 영역의 모듈 배경 이미지를 추가한 후의 화면입니다. 이미지를 클릭하면 크게 볼 수 있습니다. 이곳 을 클릭하면 테스트 블로그로 이동하고 실제 웹페이지를 볼 수 있습니다. 모두가 모서리가 둥근 이미지로 되어있습니다. CSS 기초 에서 만든 이미지를 그대로 사용하게 되며 삽입하는 방법이 주된 내용입니다. 또한 글이 길어지지만 스킨위자드를 사용하여 배경이미지를 자동으로 늘리는 방법도 알아봅니다. 이것만 하면 큰 레이아웃은 끝나게 되고 나머지 세부적인 부분의 수정은 다음글로 넘어갑니다.

1. 컨텐트 영역의 배경이미지 추가하기




CSS기초부분에서 만든 이미지와 코드가 있는 압축파일을 풀고 html 파일을 클릭하면 위와같은 화면이 나옵니다. 이미지로 만든 배경이기 때문에 최근에 사용되는 모든 웹브라우저에서 동일하게 보이게 됩니다. 이전 글에서 컨테이너부분의 배경을 만들때 모든 이미지를 추가했으므로 별도로 이미지를 업로드하지 않아도 됩니다. 


html 파일을 텍스트 에디터에 열고 사용할 코드를 복사합니다. 우선 시작부분인 1부분을 블럭설정하여 Ctrl+C키를 눌러 복사합니다.


블로그 스킨 편집창에서 wrapC로 검색을 하면 1처럼 나옵니다. 마지막 부분인 2에 클릭하고 엔터키를 치면 커서가 아래로 내려갑니다. Ctrl+V키를 누르면 붙여집니다. 텍스트 에디터에서 마감부분의 두번째 코드를 같은 방법으로 복사합니다.


content close로 검색을 하면 1과 같이 나오는 부분에서 2에 클릭하고 엔터키를 친 다음 Ctrl+V키를 눌러 붙여넣습니다.


첨부파일에서 style2.css파일을 텍스트 에디터에 열고 1부분을 블럭설정하여 복사합니다. 52번째 줄의 #content부분의 내용은 블로그 CSS에서 수정할 것입니다.


블로그 CSS 편집창에서 #content 로 검색을 하면 1과 같이 나옵니다. 마감부분인 2에 클릭하고 엔터키를 친 다음 Ctrl+V키를 눌러 붙여넣습니다. 아래에 #sidebar가 있습니다.

4를 보면 content와 sidebar의 부모요소인 #wrapContent가 있습니다. 이것은 두개의 요소를 감싸서 배경색을 흰색으로 하고 우측인 사이드바 부분(right)에 이미지(sidebarbg_img.gif)를 삽입하여 세로로 반복(repeat-y)하고 있습니다. 이것은 필요없으니 전체를 제거하고 대신에 #content 에 background: #fff; 를 삽입하고 텍스트 에디터의 CSS에 있던 height: 100%;를 #content에 추가합니다. padding은 현재의 것을 수정해서 상하 20픽셀, 좌우 10픽셀인 padding:20px 10px;로 수정합니다. 

그리고 5를 보면 텍스트 에디터에서 그대로 복사해와서 폴더명이 images7로 되어있습니다. 8곳의 이미지 파일이름 앞의 폴더이름에서 7을 제거합니다. 여기까지 하고 하단에서 저장버튼을 클릭해서 저장한 다음 블로그화면을 새로고침하면 다음과 같이 나옵니다.

 
컨텐트영역은 배경이미지가 적용되서 둥근 모서리가 나오지만 1과 2의 영역이 배경테두리의 색과 다릅니다. 요소검사를 해보면 사이드바 영역과 컨테이너 영역의 배경색입니다. 


블로그의 CSS 편집화면에서 #container로 검색하여 배경 색상을 f0f0f0로 바꿔주고  #sidebar로 검색하여 배경색상이 필요없으니  2 부분을 제거해줍니다. 저장하고 웹에서 새로고침하면 정상적으로 나옵니다.

2. 컨텐트 영역 늘리기 - 스킨위자드 사용하는 방법



티스토리에서 스킨위자드를 사용할 수 있는 스킨은 게시글의 넓이를 기준으로 다른 영역도 늘어납니다. 스킨위자드에서 게시글 탭을 선택하고 글영역 넓이를 현재의 630에서 700으로 입력하고 옆의 적용버튼을 클릭하면 3처럼 컨텐트 영역이 늘어납니다. 하지만 4는 그대로 있어서 어긋나죠. 이부분도 같이 늘어나게 수정해야합니다. 5의 적용버튼을 클릭하고 나옵니다.


스킨위자드는 게시글의 넓이(@post-width, 현재 위 이미지상에서는 700픽셀임)를 기준으로 다른 요소의 넓이도 같이 변하는 구조입니다. 위의 1부터 4까지 확대한 것은 아래의 이미지입니다. 우선 1을 블럭설정하여 2, 3, 4에 붙여넣습니다. 여기서 700px라는 숫자는 무시합니다. 나중에 스킨위자드에서 수치를 설정하면 이 수치는 변경됩니다. 2,3,4에서 " = "을 제거하고 그 자리에 2에서는 :44를, 3에서는 :20을, 4에서는 :8 을 입력합니다. 이 수치는 CSS기초부분에서 배경이미지를 만들면서 말씀드렸던 부분입니다. 현재 #content의 넓이는 700픽셀이죠. 여기에 5의 좌우 패딩이 있어서 720픽셀이 됩니다. 그러면 #content의 총 넓이는 720픽셀이므로 3은 720픽셀이 되어야합니다. 게시글의 넓이인 700픽셀에 20을 추가하려면 3처럼 :20만 입력하면 됩니다. 2는 3의 수치보다 24가 많아야하고 4는 3의 수치보다 12가 적어야합니다. 6의 700픽셀은 스킨위자드에서 설정하고 나서 다시 위화면으로 오면 수치는 변경이 됩니다.


위와같이 입력하고 저장한 다음 스킨위자드로 갑니다.


스킨위자드에 들어오니 이미지가 엉망입니다. 이것은 CSS에서 700픽셀이 모두 적용되어 있어서 그렇습니다. 3의 700픽셀을 그대로 두고 옆의 적용버튼을 클릭합니다. 아무런 변화가 없지만 데이터베이스에는 입력이 됩니다. 4의 적용버튼을 클릭하면 빠져나옵니다.


다시 스킨위자드버튼을 클릭해서 들어오면 배경이미지가 정상으로 됩니다. 3의 슬라이더를 좌우로 움직이면 컨텐트 영역이 변동되면서 배경이미지도 자동으로 조절됩니다. 원하는 사이즈인 700을 4에 입력하고 적용버튼을 클릭하고 다시 하단에서 적용버튼을 클릭하고 나옵니다.


CSS화면으로 다시 들어오니 1,2,3의 수치가 변경되어있습니다. 또한 앞의 44,20,8 뒤에는 " = " 이 생겨났습니다. 나중에 4의 패딩값의 변경에 의해 다시 변경할때는 이 수치도 변경해줘야합니다.

사이드바 배경이미지 삽입은 다음글로 이어집니다.

댓글 (10)

댓글 목록

까움이 access_time

사이드바에 배경이미지... 정말 관심가는 분야이네요 ㅎㅎ잘 보겠습니다.

베누시안 access_time

안녕하세요. 둥근 모서리 배경이미지 넣기가 좀 까다롭죠. 댓글 감사드려요.

이츠하크 access_time

스킨위자드에 700px 입력하고 적용누루고 보니까 수치가 그대로에요. '='도 안생기고 바꾼것도 그냥 700px 그대로 있는 데요. 사이드바는 왼쪽으로 다 밀려 있구요. 여태 시름하다 잡니다.
^^

베누시안 access_time

안녕하세요. 위에 있는 이미지에서 회색 배경의 이미지가 있는데 파란글자의 2,3,4에 있는 빨간 글자부분을 잘보시면 이퀄싸인이 없습니다. 이 이퀄싸인을 제거해야합니다. 아니면 CSS부분을 복사해서 보내줘보세요.

렌시아 access_time

안녕하세요 잘 보고 연습하고 있는데 오른쪽은 괜찮은데 left-side2.png 이 왼쪽 이미지만 자꾸 콘텐츠 높이보다 조금 더 높게 삐죽 나오네요..

베누시안 access_time

안녕하세요. 반갑습니다. 아주 어려운 부분을 하고 계시네요. 대부분의 경우 위치가 안맞는다든가 div태그가 빠진 경우 그련 현상이 나오기도 합니다. 블로그 주소를 알려주시면 점검해보겠습니다.

access_time

비밀댓글입니다

베누시안 access_time

안녕하세요. 소스를 복사해서 둥근 모서리 테두리 부분만 남기면 제대로 나옵니다. 그런데 코드가 길어서 찾기가 쉽지는 않지만 어딘가에서 div 태그가 엉켜있을겁니다. div 태그가 빠지거나 서로 엉켜있으면 그런 현상이 나옵니다. 지금 현재 상태를 보더라도 form 태그중 마감태그부분이 둥근 테두리를 형성하는 마감부분의 밖으로 나가 있습니다. 모든 요소는 둥근 모서리를 만드는 시작부분과 마감부분 안에 들어가 있어야하는데 말이죠. 이곳( http://martian36.tistory.com/831 )을 보면 설정하는 방법이 있으니 참고하세요.

베누시안 access_time

마지막 부분을 다음처럼 고치세요.


<br />

</div>
</div>
</form>
</div>

</div>

<div id="wrapBtm-content">

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

</div>

<script type="text/javascript">~~</script>

</body>

</html>

렌시아 access_time

정말 감사합니다 말끔히 고쳐졌네요 ㅎ