이번 글에서 진행할 내용은 세가지입니다. 컨테이너 영역 외부에 있던 Footer를 내부로 들여오고 이 footer와 페이징을 CSS기초에서 만든 배경이미지로 둥근 모서리를 만듭니다. 그리고 검색 모듈을 헤더로 이동하고 이미지를 삽입합니다. 검색 박스는 평상시에는 Search라는 단어가 나오고 클릭하면 검색어를 입력할 수 있도록 사라지게 합니다. 이것은 자바스크립트를 사용합니다. 간단한 내용이니 알아두는 것도 좋습니다. 검색버튼은 워드프레스의 아이콘으로 교체할 예정입니다. 그동안 설명이 길어서 마무리가 늦어졌는데 이전 글들과 중복되는 내용들이 있고 그동안의 내용을 잘 파악하시면 바로 할 수 있는 것들입니다. 되도록 간결하게 해서 이 세가지를 이 포스팅으로 끝내고 다음 글에서 각 아이콘을 삽입한 후에 메뉴부분에 제이쿼리를 삽입한 후 마무리 하겠습니다.
1. Footer 영역을 컨테이너 영역으로 이동하고 배경 이미지 삽입
one-image-flexible-rounded-corner-final2.zip
압축파일을 풀고 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 버튼 사이에 공간이 생깁니다. 위수치를 한꺼번에 입력하지 말고 하나씩 입력하면서 저장하고 블로그 화면에서 어떻게 변화하는지 보는 것이 좋은 방법입니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
