스킨 수정해 보기 - 메뉴바, 블로그 제목 옮기기
머리말 보기
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
3편에서 계속하여 메뉴바의 RSS피드와 검색 박스를 수정해 봅시다.
style.css파일을 열고 다음 코드 항목을 찾아갑니다.
/* mainbody > blogmenu : 블로그 메뉴 + 검색 */
수정은 위의 그림에 나와 있는대로 설정을 하였습니다.
".blogmenu.search input" 코드가 두 번 나옵니다. 위의 것은 검색 메뉴 전체를 포함하는 border 영역으로
검색창, 검색 버튼을 포함합니다. 이 코드를 아래의 코드에 삽입해 보면 검색창과 버튼에 영역이 지정되는 것을
볼 수 있습니다. 그렇게 보기 좋지 않습니다. 그래서 따로 코드를 만들었나 봅니다.
파일을 저장하고 다시 브라우저를 실행해 보면 아래와 같이 수정이 되었습니다.
이것으로 백그라운드, 배경화면, 블로그 제목, 메뉴바에 올려져있는 항목들의 수정을 해 보았습니다.
다음은 메뉴바의 이미지를 제거하고 메뉴들의 글자 크기를 변경해 보겠습니다.
style.css 파일을 열고 다음 항목을 찾아갑니다.
.blogmenu 항목에 있는 이미지 경로를 삭제합니다. "background ~ no-repeat "까지 삭제해도 됩니다.
메뉴바의 이미지가 사라졌습니다.
RSS피드와 아이콘도 삭제해 봅시다.
style.css 에서 아래의 항목을 찾아 가서 주석 처리를 하든지 지웁니다.
그리고 저장을 합니다. 앞에서도 설명했지만 저장을 하지 않으면 새로 설정된 것이 적용되지 않습니다.
skin.html 파일을 열고 아래의 코드를 주석 처리하든지 삭제하고 저장합니다.
아래와 같이 RSS피드와 아이콘이 사라 졌습니다.
이제는 메뉴 글자의 크기를 변경해 봅시다.
style.css 파일을 열고 아래의 항목을 찾아갑니다.
size를 110%로 변경하고 "font-weight: bold를 추가합니다.
그리고 margin-top을 5px 로 설정하고 아래의 항목에 있던 padding을 삭제하거나 값을 0으로 합니다.
padding, margin 은 콘텐츠의 정렬을 하기위한 것으로 스킨을 수정하기 위해서는 속성을 반드시 알아 두세요.
아래의 코드는 검색 박스와 검색 버턴으로 이것도 보기 좋게 정렬하기 위해 수정을 한 것입니다.
수정을 마치고 파일을 저장하여 브라우저를 실행해 보면 아래와 같습니다.
이렇게 메뉴바에 있는 메뉴를 삭제할 수도 있고 추가를 할 수도 있습니다.
일부 메뉴를 사이드바로 옮길 수도 있습니다. 옮기는 것은 사이드바에 대해서 이해를 해야하니 사이드바의
설명을 마친 후 알아보기로 합니다.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
다음은 블로그 제목의 위치를 옮겨봅시다.
아래의 그림을 보면 제목(스킨 수정하기)의 위치는 좌측에 정렬되어 있습니다.
먼저 오른쪽으로 위치를 바꾸어 보겠습니다.
* 참고로 위의 그림은 이 스킨의 디자인을 알아보기 위해 각 콘텐츠에 border를 삽입한 것입니다.
제목의 배경(분홍색) 폭은 header 폭과 높이를 정해서 나타낸 것이고, 좌측 사이드바의 초록색 박스는 사이드바
영역을 나타낸 것이며 본문의 빨강색 박스는 content 영역을 나타냅니다.
그리고 아래의 녹색 박스는 footer 영역을 나타냅니다.
style.css파일을 열고 다음 항목을 찾습니다.
* container의 width: 710px는 설명을 위해 임의로 설정된 것으로 자신이 원하는 폭을 설정하면 됩니다.
header에는 참고에서 말한 제목 영역을 알아보기 위해 배경색을 나타내는 코드를 삽입했습니다.
이것도 수정하지 않아도 됩니다. 혹시 제목에 배경 이미지를 넣거나, 배경색을 넣을 때 사용하면 됩니다.
여기서 수정할 것은 "header h1" 의 float:left ->right로 바꾸어 줍니다.
그러면 블로그 제목이 오른쪽으로 수정되어 나타납니다.
제목 우측에 공간을 주고 싶다면 "padding"을 사용하여 오른쪽에 공간을 확보하고 제목을 좌측으로 밀어냅니다 .
블로그 제목이 좌측으로 250px만큼 이동하였습니다. 이런식으로 제목을 이동시켜 원하는 장소에 위치시킵니다.
제목이 "left"로 정렬되어 있을 때는 "padding-left"로 공간을 확보해야겠지요.
fioat : 요소를 좌우정렬시킬 때 사용합니다. none, left, right 가 있습니다.
* IE에서는 float 속성을 적용하면 요소에 지정된 position 속성을 무시합니다.
"fioat"를 사용하면 속성이 사용안함, 좌, 우 밖에 없어 중앙 정렬을 할 수가 없습니다.
그래서 "fioat"가 아닌 "text-align"를 사용하여 중앙 정렬을 합니다. (제목이 텍스트임으로 가능)
이미지를 사용할 경우는 "position" 속성을 사용합니다.
"padding"은 지우거나 값을 주지않아야 겠지요.
정 중앙으로 정렬이 되었습니다.
다음 편은 본문 폭을 넓혀보고 이에 따른 메뉴바의 크기를 변경해 봅니다.
1편으로 바로가기
'Programming > Skin & Tip' 카테고리의 다른 글
| 블로그 스킨 수정하기 - 본문 폭, 메뉴바 (0) | 2009/05/08 |
|---|---|
| 블로그 스킨 수정하기 - 메뉴바, 블로그 제목 옮기기 (0) | 2009/05/07 |
| 블로그 스킨 수정하기 - 백그라운드,블로그 제목, 메뉴바 (0) | 2009/05/06 |
| 블로그 스킨 수정하기 - CSS 소스의 내용 보기 (0) | 2009/05/04 |
