작성일자
카테고리 워드프레스/워드프레스 완벽입문 워밍업

이전 글에서 자식테마를 만들고 한글 웹폰트를 사용하는 방법을 알아봤습니다. 이번 글에서는 블로그의 상단부터 시작해서 푸터까지 수정해야할 부분을 모두 수정해보겠습니다. 이전 글에서 한글 폰트를 먼저 설정했는데 왜그러냐하면 기본폰트를 먼저 설정해야 모든 부분에서 레이아웃을 통일적으로 적용할 수 있기 때문이죠. 폰트는 기본 사이즈인 12px이라하더라도 종류에 따라서 웹페이지에 나타나는 크기가 모두 다릅니다. 어떤 폰트를 기준으로 수정을 했는데 다른 폰트로 바꾸면 작은 부분에서 크기가 달라지기 때문에 높낮이를 다시 수정해야하는 상황이 발생하죠. 


1. 헤더의 수정



예를들어 메뉴부분을 보면 현재 각 메뉴의 좌우 폭이 넓어서 우측 두개의 메뉴가 하단으로 내려와 있습니다. 이것을 한줄로 만들어야하는데 현재의 폰트를 기준으로 수정한 다음 다른 폰트를 사용한다면 폭이 달라지므로 다시 메뉴가 아래로 내려올 수 있습니다. 현재 메뉴를 보면 순서가 뒤바뀌어있는데 외모-->메뉴-->테마위치 메타박스-->Header Menu에서 설정하면 됩니다.


그러면 우선 로고의 폭이 넓으니 폭을 조정합니다. 



로고를 대상으로 요소검사를 하면 폭 크기가 나옵니다. CSS 창에서는 폭은 정해져있지 않고 상하 마진만 정해져있습니다. 실제 이미지는 바로 아래의 a 태그 안에 img 태그에 있습니다. 그러면 이 이미지를 감싸고 있는 logo라는 이름을 가진 div 태그에 대해서 폭을 설정해주면 됩니다.



편집기 화면에서 위처럼 로고에 대해 폭을 지정합니다. 이전에 선택자에 대해서 언급했는데 CSS에서 HTML로 명령을 전달하기 위한 매개체 역할을 한다고 했습니다. 선택자는 아이디 선택자와 클래스 선택자가 있습니다. 아이디 선택자는 HTML에서는 id라고 표시하지만 CSS에서는 #로 표시합니다. 그래서 위 코드의 의미는 logo라는 아이디 선택자에 대해 폭을 300픽셀로 한다는 선언입니다. 파일 업데이트 버튼을 클릭하고 블로그 화면에서 보면 로고가 작아집니다.



다시 블로그 화면에서 요소검사를 하면 폭이 줄어들었는데 메뉴 부분은 좌측으로 이동하지 않습니다. 왜냐하면 로고를 감싸고 있는 다른 div 태그의 폭이 그대로 이기 때문이죠. 그래서 상위의 div 태그를 클릭해봅니다.



CSS 창에 39.1%의 폭이 설정돼 있습니다. 이 폭은 로고와 메뉴부분이 차지하는 전체의 폭에서의 비율입니다. 폭을 얼마나 줄일기 대략적으로 계산해보면 전체 39.1% 중 3분의 1만 줄이면 되겠네요. 직접 입력하기 귀찮으면 CSS창에서 빨간 네모친 부분을 클릭드래그해서  블럭 설정해서 복사하면 됩니다. 또한 코드를 처음 다루는 경우 뭐든 하나씩 빼먹게 되죠. 그러면 뭐때문에 안되는지 누군가를 원망하게 됩니다. 이런 일을 방지하기 위해서 처음 할 때는 복사해서 붙여넣는 방법이 좋습니다. 고수들도 다 그렇게 합니다. 본격적으로 코드를 배울 때는 복사 붙여넣기를 지양해야합니다. 하나라도 코드를 더 많이 입력해본 사람이 더 잘 하거든요.


.row .five {

width: 27%;

}


편집기 화면에서 붙여넣고 27%로 수정한 다음 저장하고 블로그 화면에서 확인합니다. 



로고의 영역은 줄어들었는데 아직도 메뉴가 좌측으로 이동하지 않고 있습니다. 그래서 메뉴부분의 div 태그를 클릭하니 float:right; 로 돼 있습니다. 이것은 무조건 우측에 붙이라는 속성이죠. 그러면 이 부분의 폭을 늘려주면 됩니다. 현제 56.5%로 돼 있는 것을 로고에서 줄인 12.1%를 더해줍니다. 이들과 좌측 마진인 4.4%를 더하면 100%가 됩니다.


.row .seven {

width: 68.6%;

}


편집기 창에서 위와 같이 입력, 저장하고 블로그 화면에서 확인합니다.



이동은 했는데 마지막 메뉴가 아직 안올라가고 있습니다. 메뉴를 보면 각 메뉴의 폭이 넓습니다. 요소검사를 해보면 마진이 설정돼 있는데 상하 0, 좌우로 13픽셀입니다. 이를 줄여주면 됩니다. 마진의 수치가 두개만 있으면 앞의 것은 상하, 뒤의 것은 좌우 마진입니다.


#nav_menu > li {

margin: 0 7px;

}


float:left;는 제거하고 좌우 마진을 7픽셀로 줄이고 저장한 다음 블로그 화면에서 새로고침하면 이제 정상으로 나오게 됩니다. 


2. 글 박스 수정



현재 글 박스를 보면 제목과 글 사이가 넓고 하단의 Edit 상하로도 여백이 많습니다. 이 두 부분을 줄여보겠습니다. 요소검사를 하면 제목의 하단 마진이 32픽셀이나 됩니다. 복사해서 편집기에 붙여넣고 다음과 같이 수정합니다.


h2.posts_title {

margin-bottom: 15px;

}



그 다음으로 어떤 것이 자리를 차지하고 있는지 하나씩 클릭해서 내려오다 보면 clear라는 것이 있는데 이것은 어떤 요소를 좌측이나 우측으로 float(뜨게 만듬)하면 아래에 있는 요소가 자리를 차지하는 것을 방지하기 위한 속성입니다. 그런데 이것이 18픽셀의 공간을 사용하고 있습니다. 편집기에서 다름과 같이 높이를 0으로 설정합니다.


.clear {

height:0;

}



마지막으로 글박스 자체의 하단 마진이 40픽셀이 있습니다. CSS를 복사해서 편집기에 붙여넣고 아래처럼 수정합니다. 수정할 것을 제외하고 다른 것은 제거합니다.


.post_container {

margin-bottom: 20px;

}


오늘은 여기까지 하겠습니다. 다음 글은 이미지에 둥근 모서리 적용하기와 포지션에 대해 알아보겠습니다. 제가 어제부터 티스토리 스킨을 만들고 있는데 부트스트랩 부류의 프로젝트 중에 Fbootstrapp이란 것이 있습니다. 트위터 부트스트랩 플랫폼이 워낙에 인기가 있다보니 관련 프로젝트가 아주 많이 생겨나고 있는데 그 중 하나로서 페이스북 형태의 웹페이지를 만들 수 있는 플랫폼이죠. 여기에 더해서 페이스북의 타임라인을 만들 수 있는 파일을 참고해서 페이스북의 타임라인 형태의 티스토리 스킨이 완성될 것 같습니다. 완료가 되면 이전 스킨처럼 조건부 공개하겠습니다. 현재 사용하고 있는 스킨을 조건부 공개하니 아무도 요청을 하지 않는군요. ㅋ 이번 작업중인 스킨은 제가 봐도 보기 좋아서 아마도 인기가 있을듯합니다. 현재 진행중인 부분을 구경하시려면 -->http://saaien.tistory.com/ 제 테스트 블로그입니다.




지금까지의 코드-->

테마수정코드1119.txt



저작자 표시 비영리 변경 금지
신고
BlogIcon Meeting Table

관리자의 승인을 기다리고 있는 댓글입니다

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 조건부 공개란 희망나눔에서 5천원 기부하고 인증 메일 보내는 것과 스킨 하단에 희망나눔 위젯을 설치하는 것이죠. 그러면 제가 이메일로 보내드립니다. 이전글 참고--> http://martian36.tistory.com/1069

마음에 드신다니 다행입니다. 더 작업해서 각종 아이콘도 삽입하면 정말 페이스북 같은 기분이 날겁니다.^^

비밀댓글입니다

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 페이징은 글박스 안에 있는 것이라서 밖으로 벗어나지 못합니다. 아마도 다른부분에서 폭이 설정된 것 같은데요. 현재 작업중인 테마 폴더를 압축해서 이메일로 보내주세요. martian36@naver.com
점검후에 알려드리겠습니다.

비밀댓글입니다

BlogIcon 베누시안

2차메뉴란 것은 무엇을 말씀하시는지요? 제가보기에는 안보이는데요.
어떤 웹브라우저를 사용하시는지 알려주시고요.
푸터에서 제거방법은 푸터 파일이 foot.php와 footer-front.php 파일이 있습니다. 이 두개의 파일에서 다음의 코드를 제거하세요.

<span class="pull-right"><a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a></span>

이상우

저는 크롬 브라우저를 사용합니다..
ie에서는 우측사이드바의 뉴스슬라이더가 않보이네요..ㅠㅠ

BlogIcon 베누시안

ie를 아마 8 버전으로 봐서 그런 것 같은데요. 같은 테마인데 제가 설치한 웹호스팅에서는 ie 8이라도 잘 나옵니다. 데모 사이트를 확인하시면 됩니다.
그리고 2차메뉴란 것이 어떤 부분을 언급하는지 알려주세요.

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 1단 메뉴를 클릭했을 때 나오는 2단 서브메뉴가 이미지 슬라이더와 겹친다면 책에는 나오지 않았지만 z-index 속성을 사용하면 됩니다.
.dropdown-menu { z-index:10000; }을 스타일시트에 삽입하고 해보세요.

그리고 페이지를 만들 때 사이드바가 있는 템플릿을 선택해서 그런데요. 사이드바가 없는 기본템플릿을 사용할 경우에 대비해서 양쪽 폭을 20%씩 패딩을 사용했습니다.

사이드바가 있는 상태로 페이지를 만들면 새로운 페이지 템플릿 파일을 만들어야하나 이미 있는 상태에서 줄이고자 한다면 해당 페이지 아이디가 있는 클래스 선택자를 사용하면 됩니다. 요소검사를 하면 body태그에 해당 페이지의 고유한 클래스 선택자가 인사말 페이지는 page-id-756이고 캘린터는 page-id-801입니다. 그래서 다음과 같이 하면 됩니다.

.page-id-756 article, .page-id-801 article { padding:30px; }

위 내용을 스타일시트에 추가하세요.

비밀댓글입니다

BlogIcon 베누시안

넓히는걸 원하는게 아닌가요? 지금보니 제대로 나오던데요.

이상우

사이드바템플릿으로 수정한 순간에 보신것 같습니다..ㅠㅠ
기본템플릿을 수정해야 하나요?..
급합니다..ㅎㅎㅎ

BlogIcon 베누시안

에고.. 제가 해드릴테니 비번하고 아이디 알려주세요.

비밀댓글입니다

BlogIcon 베누시안

제가 어제 알려드린대로 했더니 잘 나옵니다.

장병철

eclips child 에 logo 픽셀을 조정하고 똑같이 편집기에 복사해서 붙였는데
사이트 보기로 하면 그대로입니다 ^^; 무엇을 빼먹은걸까요?

BlogIcon 베누시안

안녕하세요. 자식테마는 활성화시키셨겠죠? 코드를 처음 다루시는 경우 제공된 코드를 복사해서 붙여넣기 해보세요. 글자 하나라도 다르면 적용이 안됩니다. 그래도 안되는 경우 제게 해당 테마를 압축해서 보내주세요. 해결점을 찾아드립니다. martian36@naver.com

워프

테마를 하나 사서 설치했는데 폭이 너무 좁아서 넓히고 싶은데 혹시 가능할까요?
better background라는 플러그인을 설치했는데 이 플러그인을 활성화할때마다 다른 플러그인들이 멈춰버려요ㅜㅜ

BlogIcon 베누시안

테마는 얼마든지 수정해서 사용할 수 있지만 테마에 따라서 한곳만 변경해서는 안되고 여러곳을 변경해줘야할 때도 있습니다. 워낙 다양해서 그렇죠. 테마를 이메일로 보내줘보세요. 위에 이메일 주소 있습니다. 그리고 얼마나 넓힐 것인지 말씀해주세요.
그리고 플러그인은 서로 충돌을 일으킬 때가 많습니다.

hj

관리자의 승인을 기다리고 있는 댓글입니다

hj

관리자의 승인을 기다리고 있는 댓글입니다

hj

관리자의 승인을 기다리고 있는 댓글입니다

블러

제일 위에서
#logo{
margin-bottom : 5px;
}
의 속성을 자식테마의 style.css에서 지우려면 어떻게 해야하나요? ㅜㅜ
추가하는건 베누시안님이 하신거처럼 그냥 추가해서 써주면 되는데, 지우고싶은 속성은 어떻게 해야할지 모르겠어요. 부탁합니다.

BlogIcon 베누시안

자식테마의 스타일시트를 선택해서 원하는 코드를 그냥 제거하면 될텐데요.

이윤학

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바