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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그


이번 글에서 진행할 내용은 세가지입니다. 컨테이너 영역 외부에 있던 Footer를 내부로 들여오고 이 footer와 페이징을 CSS기초에서 만든 배경이미지로 둥근 모서리를 만듭니다. 그리고 검색 모듈을 헤더로 이동하고 이미지를 삽입합니다. 검색 박스는 평상시에는 Search라는 단어가 나오고 클릭하면 검색어를 입력할 수 있도록 사라지게 합니다. 이것은 자바스크립트를 사용합니다. 간단한 내용이니 알아두는 것도 좋습니다. 검색버튼은 워드프레스의 아이콘으로 교체할 예정입니다. 그동안 설명이 길어서 마무리가 늦어졌는데 이전 글들과 중복되는 내용들이 있고 그동안의 내용을 잘 파악하시면 바로 할 수 있는 것들입니다. 되도록 간결하게 해서 이 세가지를 이 포스팅으로 끝내고 다음 글에서 각 아이콘을 삽입한 후에 메뉴부분에 제이쿼리를 삽입한 후 마무리 하겠습니다.

1. Footer 영역을 컨테이너 영역으로 이동하고 배경 이미지 삽입




압축파일을 풀고 html 파일을 텍스트 에디터에 열면 html 부분에 위처럼 나옵니다. 1과 2를 복사하여 원하는 부분의 배경에 둥근 모서리의 박스를 삽입할 것입니다. 그리고 하단에는 검색박스에 들어갈 코드가 있습니다. 그대로 교체만 하면 되는데 이 파일을 클릭하여 웹에 열면 하단에 검색 박스가 나옵니다. Search라는 글자가 보이는데 안에 클릭하면 사라집니다. 티스토리의 코드를 수정한 것이니 그대로 복사해서 붙여넣으면 됩니다. 위의 html 코드 상단에는 CSS가 있습니다. 이것도 그대로 복사해서 사용할 것입니다. 배경이미지를 만드는 방법이나 내용에 대해서는 CSS 기초부분을 참고하세요


HTML 펀집창에서 스크롤바를 마지막으로 내리면 footer 부분이 있습니다. 위처럼 블럭설정하고 Ctrl+X키를 누르면 잘라집니다. 2의 wrapContent close 마지막 부분에 클릭하여 엔터치고 Ctrl+V키를 누르면 붙여집니다. 컨테이너 내부의 박스로 들어간 것입니다.


텍스트 에디터에서 1부분을 복사해서 3에 클릭 엔터치고 붙여넣습니다. 2부분의 코드는 4의 위에 삽입합니다. 5의 파일업로드 링크를 우클릭해서 새탭에서 열기를 선택하면 브라우저의 새 탭에서 열립니다. 하단에서 추가를 클릭해서 첨부파일 이미지인 corner.png파일을 업로드합니다.

 
텍스트 에디터에서 CSS 부분을 수정합니다. 1에 있던 width 부분을 제거합니다. 2의 마진은 위처럼 해줍니다. 상단 마진을 10픽셀로 하고 좌우 마진을 3픽셀로 하면 다른 배경 박스와 잘 어울립니다. 2의 아래에 있던 패딩도 제거합니다. 3에서 배경이미지를 사용하는 부분의 폴더이름에서 7을 제거합니다. 12번째 줄에서 클릭하여 51번째 줄의 괄호까지 드래그하여 Ctrl+C키를 눌러 복사합니다.


CSS 편집창에서 스크롤바를 아래로 내려서 1부분에 클릭하고 Ctrl+V키를 눌러 붙여넣습니다. 저장버튼을 클릭하고 블로그 화면을 보면 하단에 다음과 같이 나옵니다. 위의 순서대로 이미지를 업로드하고 CSS 코드를 붙여넣은 다음 저장버튼을 클릭해야 되고 이미지를 나중에 업로드한 경우 CSS를 다시 붙여넣고 저장버튼을 다시 클릭해야합니다. 알 수 없는 버그네요.


글자가 흰색이라서 안보입니다. 요소검사를 하면  #footer a 와  #footer .copyright, #footer .copyright a 부분이 흰색으로 되어있습니다. CSS(이전 이미지 참고)에서 #fff를 #000으로 바꿔줍니다. 그리고 #footer의 상단 패딩이 30픽셀로 되어있는데(이전 이미지 참고) 이것을 10으로 바꿔주고 저장한 다음 웹에서 보면 정상으로 나옵니다.

2. 페이징 영역을 컨텐트 영역 밖으로 이동 배치하고 배경이미지 삽입



<s_paging>으로 검색을 하여 <s_paging>~</s_paging>부분을 위처럼 블럭 설정하여 Ctrl+X키를 눌러 잘라냅니다. 1에 클릭하여 엔터치고 Ctrl+V키를 눌러 붙여넣습니다.


1과 2는 페이징을 만드는 치환자입니다. 이 안쪽에 텍스트에디터에서 html 코드를 복사해서 붙여넣습니다. 저장을 하고 웹에서 보면 아래로 공간이 부족합니다.


#paging으로 검색을 하여 CSS창에서 위처럼 고쳐줍니다. 패딩 값이 두개만 있으면 앞의 것은 상하 패딩이고 뒤의 것은 좌우 패딩입니다. 저장을 하고 보면 하단 패딩이 추가됐습니다.

3. 검색 모듈을 헤더 영역으로 이동하고 배경이미지 삽입



관리자센터의 메뉴에서 사이드바를 선택하고 사이드바 1부분에서 검색모듈의 1의 마이너스 버튼을 클릭하면 기본모듈 패널로 이동합니다. 우측상단의 저장버튼을 클릭하고 웹에서 블로그 화면을 보면 검색모듈이 안보이게 됩니다. 하지만 html 코드는 그대로 남아있습니다. html 편집창에서 "검색모듈"로 검색하여 위처럼 블럭설정하고 Ctrl+C키를 눌러 복사합니다.


스크롤바를 상단으로 이동하고 조금 아래로 내려오면 header가 보입니다. blogMenu div 태그 앞의 1에 클릭 엔터치고 Ctrl+V키를 눌러 붙여넣습니다.


텍스트 에디터의 html 하단에서 <s_search> 부분을 복사해서 같은 부분과 교체합니다. 원래 있던 코드와 다른 것은 1에 있던  value="[.##_search_text_##.]" 부분을 제거하고 2에 붙여넣은 다음, 치환자  "[.##_search_text_##.]" 를 Search로 수정했습니다. 이렇게 하면 Search라는 글자는 평상시에 나타납니다. 그 다음의 코드는 자바스크립트인데 3의 onfocus는 서치박스에 클릭했을 때를 의미하고 4의 onblur는 다른 곳에 클릭했을때를 의미합니다. 서치박스를 클릭했을때는 value값의 Search가 따옴표안의 값이(' ') 아무것도 없는 것으로 나오게 하고 다른 곳에 클릭하면 아무것도 없는( ' ' )것이 Search 값이 나오게 하는 기능입니다.

저장하고 웹브라우저에서 보면 좌측으로 배치됩니다. 이를 우측으로 배치하고 메뉴바와 나란히 놓으려고 합니다.


압축파일을 다운 받으면 서치박스를 만든 포토샵 psd파일과 이를 png파일로 저장한 것이 있습니다. search-box.png와 btn_search.gif는 블로그에 업로드하고 CSS화면에서 #searchBox로 검색하여 다음과 같이 수정합니다.


search-box.png 파일을 배경이미지로 넣기 위해서 폭을 210픽셀로 합니다. float:right;로 하면 우측으로 배치되면서 아래에 있던 메뉴바가 위로 올라오고 둘다 나란히 놓이게 됩니다. 8픽셀의 패딩은 input 박스를 우측으로 밀어넣는 역할을 합니다. input의 넓이는 145픽셀로 수정합니다. border는 0으로 하거나 제거합니다. 7의 input:focus는 구글 크롬에서 input 박스에 클릭하면 오렌지색으로 나타나는 것을 제거합니다. 다른 브라우저에는 기본적으로 안나타납니다. 돋보기처럼 생긴 submit 버튼은 파일이름을 변경해서 업로드했으니 이름 수정을 안하고 이미지의 폭인 width를 24픽셀로 수정합니다. 마지막으로 submit에 좌측 마진을 15픽셀을 설정하면 input 박스와 submit 버튼 사이에 공간이 생깁니다. 위수치를 한꺼번에 입력하지 말고 하나씩 입력하면서 저장하고 블로그 화면에서 어떻게 변화하는지 보는 것이 좋은 방법입니다.

댓글 (13)

댓글 목록

Eco_Hong access_time

잘 읽어습니다. 항상 도움이 많이 됩니다. :)

베누시안 access_time

안녕하세요. 반갑습니다. 도움이 되신다니 다행입니다. 댓글 감사드려요.~~

小山소산 access_time

좋은 정보 감사합니다.
한번 연습해 봐야겠는데요...

베누시안 access_time

안녕하세요. 반갑습니다. 하시다가 안되는 부분이 있거나 어려운 부분이 있다면 댓글 부탁드립니다. 감사합니다.~

access_time

비밀댓글입니다

베누시안 access_time

안녕하세요. 반갑습니다. 현재까지 진행한 내용으로 수정했습니다.

학마을사람들 access_time

베누시안님 은혜 절대 안 잊겠습니다. 언제고 저희 마을 들려 주십시오. 팬션은 무료로 제공해 드리겠습니다. 맛있는 과일이 출하될 시기에 아무때나 오세요.^^ 홍보성 멘트가 아니라 고마워서 드리는 말씀입니다.^^

베누시안 access_time

별말씀을요.. 그냥 있는 것 그대로 수정만 했을 뿐인데요.. 펜션하시나 보네요. 공짜로 사용하려면 블로그에 더 공을 들여야할텐테요. ㅎㅎ 넝담이구요. 어디 다니길 싫어해서요. 블로그 스킨만들기 완성되는대로 어려우시면 다시 수정해드리겠습니다.

베누시안 access_time

스킨 하단에 배경이미지 어긋나는 것 수정했으니 확인하세요.

어세즈 access_time

후~ 어렵네요~
지금 어느 부분인지 잘 모르겠지만, 저 같은 경우는 애드박스를 아래로 이동시켜서 사용하고 있거든요. 그런데, 태그 부분이랑 뭐가 겹치는지, 자꾸 태그 부분이 애드박스 부분을 침범하려고 그러네요. ㅠㅠ 뭐가 잘못된 것일까요...

베누시안 access_time

안녕하세요. 반갑습니다. 지금 사용하고 계신 블로그에서 그런건가요? 어느부분인지 정확히 집어주시면 좋겠습니다.

knmidal access_time

자세하게 올려주셨는데 해볼려니 엄두가 안나네요..ㅎㅎ
일단 제 아이디 추가하는것으로 만족하고 천천히 공부해봐야겠네요
학조리 체험마을님 블로그도가 봤는데 너무 멋졌습니다.
그 왼쪽에 달린 하트모냥도 너무 이뿌구요~
공부 열심히 해야겠습니다~^ ^

베누시안 access_time

웹디자인이 좀 까다롭습니다. 그렇다고 전문적인 지식이 많이 필요한 것도 아니죠. 필요한 만큼만 배워서 사용할 수 있답니다.