자. 이제 시작해 봅시다.ㅋㅋ
(다음주 부터 한다매!!! -_-++ )
1. 구조 살펴보기
- wordpress(이하, 워프)의 구조는 아래와 같이 4개의 기본 영역을 필요로 합니다.
| 헤더 | |
| 컨텐츠 | 사이드바 |
| 풋터 | |
- 나머지 부분은 모두 위의 영역 안에서 정의 됩니다.
그리고; 각 영역에 대한 ‘css 파일’과 function을 지정해 주는 ‘function 파일’,
마지막으로 에러페이지에 대한 ’404 파일’을 필요로 합니다.
1,2 번을 제외한 나머지 테마파일들에 있는 수많은 function 들은 오히려 , 잘알려진 플러그인과의 충돌을 가져
올 수도 있습니다. (그래서 아예 만들기로 한겁니다. ㅋㅋ)
2. 나만의 구조 결정하기.
나만의 구조에서는 기본 레이아웃도 중요하지만 어떤 용도로 컨텐츠를 만들 것인가도 중요합니다.
저는 사진과 이미지를 올려야 하므로 기본 컨텐츠영역의 넓이를 넓게 잡도록 하겠습니다.
2-1. 컨텐츠 영역 크기 결정하기
컨텐츠 영역을 먼저 정하는 이유는, 사실 모든 블로그에서 메뉴의 배열이나 하단에 뭐가 써있는가는
그닥 중요하지 않습니다. 따라서, 컨텐츠 영역을 먼저 결정하게 되면,
블로그의 기본은 만들 수 있는 것이 되겠습니다.앗싸~ ^^
대세는 와이드 이므로 이미지 크기를 16:9의 화면비를 가져가는 것이 맞지만, 대부분의 카메라는
3X5 기준이므로 저 또한 이를 지켜서 기본 이미지 영역은 640 * 384의 비율을 유지하도록 하겠습니다.
글이 예쁘게 놓여질 것을 생각하여 , 여백+이미지크기 = 컨텐츠 영역이 될 것이므로
여백 = 좌,우 각각 20px 씩, 그리고 이미지 크기인 640픽셀을 적용하면 ” 20+20+640 = 680″ px 이 되겠네요 ^^
2-2. 사이드바 영역 결정하기
사이드 바는 각각의 위젯을 놓일 것을 고려하는게 가장 중요합니다. 요즘 , 트위터, 블코 등의 위젯들을 많이
설치 하게 되는 데 그놈들의 가장 적절한 크기는 220px로 보면 됩니다. 역시 이놈의 크기 또한 여백 + 컨텐츠=사이드바
가 되므로 여백을 좌,우 각각 5씩 잡겠습니다. 그렇다면 5+5+220 = 230이겠네요.
저는, 각 사이드바 좌,우에 테두리를 쓸 것이기 때문에 5씩 더 더하도록 하겠습니다.
그래서? 10+10+220 = 240이 되겠네요 ^^
2-3 헤더 , 풋터 영역 결정하기
헤더는 이제 사이드바와 컨텐츠영역의 크기가 결정되었으니 말 그대로 모자를 쓴다고 생각하면 되겠습니다.
사이드바 = 240 , 컨텐츠 = 680
사이드바 + 컨텐츠 = 헤더 or 풋터 즉,680 + 240 = 720
제가 만들 테마는 이전 테마에서 크게 벗어나지 않고, 모바일 환경에서도 볼 수 있도록
(테스트 장비는 아직 제 LH2300 아르고 입니다.ㅋㅋ)하기 위해서 양옆에 사이드 바를 세우도록 하겠습니다.
그래서, 제가 만들 테마의 크기는 680 + (240 x 2) = 1160
3.기본 레이아웃 살펴보기
위의 내용대로 구성한 레이아웃이 아래 처럼 나왔습니다~ ^^;;
