이전 글에서 자식테마를 만들고 한글 웹폰트를 사용하는 방법을 알아봤습니다. 이번 글에서는 블로그의 상단부터 시작해서 푸터까지 수정해야할 부분을 모두 수정해보겠습니다. 이전 글에서 한글 폰트를 먼저 설정했는데 왜그러냐하면 기본폰트를 먼저 설정해야 모든 부분에서 레이아웃을 통일적으로 적용할 수 있기 때문이죠. 폰트는 기본 사이즈인 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
