그리드(grid) 구조
티에디션은 사용자마다 서로 다른 content 영역의 너비를 지원하기 위해 css 프레임웍(css framework)인 blurprint 기반으로 제작되었습니다.
1. 지원되는 content 영역의 너비
티에디션은 350px부터 35px 간격을 두고 1050px까지의 너비를 지원하고 있습니다. 사용하고 있는 스킨의 content 영역이 710px인 경우, 티에디션 영역의 너비는 700px이고, content 영역에 가로 기준으로 가운데 정렬됩니다.
2. 아이템 그룹 = 3단
티에디션은 content 영역을 3단으로 나누고, 각 단을 다시 4개의 컬럼으로 나눕니다. 따라서 개별 아이템은 기본적으로 1단(4 컬럼), 2단(8 컬럼), 3단(12 컬럼) 너비를 기준으로 제작되었습니다.
3. 1단 = 4 컬럼
위에서 각 단은 4개의 컬럼으로 나누어진다고 설명했는데요, 각 컬럼은 스킨의 content 영역 값에 따라 너비값(px)을 가집니다. 임의의 너비값을 가지는 12개의 컬럼이 스킨의 content 영역을 채웁니다.
각 컬럼은 너비값(span) + 오른쪽 여백(margin)의 너비값(= span / 2)으로 구성됩니다. content 영역의 너비가 630인 스킨을 적용한 블로그의 경우, 컬럼 1개의 너비는 아래와 같은 공식으로 구할 수 있습니다.
맨 오른쪽에 위치하게 될 12번째 컬럼은 오른쪽 여백값이 없습니다.
티에디션의 html 구조를 보면, tt-span-4, tt-span-12와 같은 클래스 이름을 확인할 수 있습니다. tt-span-#에서 #는 컬럼 수를 가리킵니다. 즉, tt-span-4는 컬럼 4개의 너비(1단)를 가지고, tt-span-12는 컬럼 12개의 너비(3단)를 가지게 됩니다.
따라서 아이템을 제작할 때, 원하는 아이템 너비에 맞게 tt-span-# 클래스로 html 구조를 표현할 수 있습니다.
티에디션에서 사용 가능한 tt-span-# 클래스 목록은 아래와 같습니다.
body.tistory_grid_630 div#ttCanvas {
width: 630px; /* Total width */
}
body.tistory_grid_630 div#ttCanvas .tt-column,
body.tistory_grid_630 div#ttCanvas .tt-span-1,
body.tistory_grid_630 div#ttCanvas .tt-span-2,
body.tistory_grid_630 div#ttCanvas .tt-span-3,
body.tistory_grid_630 div#ttCanvas .tt-span-4,
body.tistory_grid_630 div#ttCanvas .tt-span-5,
body.tistory_grid_630 div#ttCanvas .tt-span-6,
body.tistory_grid_630 div#ttCanvas .tt-span-7,
body.tistory_grid_630 div#ttCanvas .tt-span-8,
body.tistory_grid_630 div#ttCanvas .tt-span-9,
body.tistory_grid_630 div#ttCanvas .tt-span-10,
body.tistory_grid_630 div#ttCanvas .tt-span-11,
body.tistory_grid_630 div#ttCanvas .tt-span-12 {
float: left;
margin-right: 18px;
}
body.tistory_grid_630 div#ttCanvas .tt-span-1 { width: 36px;}
body.tistory_grid_630 div#ttCanvas .tt-span-2 { width: 90px;}
body.tistory_grid_630 div#ttCanvas .tt-span-3 { width: 144px;}
body.tistory_grid_630 div#ttCanvas .tt-span-4 { width: 198px;}
body.tistory_grid_630 div#ttCanvas .tt-span-5 { width: 252px;}
body.tistory_grid_630 div#ttCanvas .tt-span-6 { width: 306px;}
body.tistory_grid_630 div#ttCanvas .tt-span-7 { width: 360px;}
body.tistory_grid_630 div#ttCanvas .tt-span-8 { width: 414px;}
body.tistory_grid_630 div#ttCanvas .tt-span-9 { width: 468px;}
body.tistory_grid_630 div#ttCanvas .tt-span-10 { width: 522px;}
body.tistory_grid_630 div#ttCanvas .tt-span-11 { width: 576px;}
body.tistory_grid_630 div#ttCanvas .tt-span-12 { width: 630px; margin: 0; }
...
스킨의 content 영역 너비에 따라 티에디션 영역의 너비값이 계산되면 스킨의 body 태그에 tistory_grid_영역의 너비값 클래스가 붙게 됩니다.
스킨의 css와 충돌을 피하기 위해 티에디션의 스타일 선언은 높은 우선순위를 가집니다.