텍스트큐브의 레이아웃에 대해서 간단한 분석.
코덕질/만든것들 2009/01/08 20:48
이 글에서는 제가 텍큐 레아이웃을 어떻게 변경시켰고, 또 어떤 원리로 변경시키는지 설명드리려고 합니다.
이미 그 전에도 설명드렸었던 것 같은데, 이해하시는 분이 전혀 없으신 것 같아서 -_-. 다시 이번엔 도식화 해서 설명드리려고 합니다 (만 역시나 결과는 똑같을 듯 orz)
뭐 굳이 스킨 뜯으시려는 분이 아니더라고 해도, 텍스트큐브 스킨의 레이아웃을 파악하고 CSS에 대해서 알아보기에도 좋을 듯 해서 올려보는 포스팅이니, 시간이 남으시거나(..엇?) 흥미 있으신 분은 읽어 보시기 바랍니다 ^^..
먼저, 제가 베이스로 사용하고 있는 기본 스킨입니다. 이름은 TC_Textcube 기본 스킨. CSS 파일은 다음과 같고, 레이아웃을 도식화해보면 위와 같습니다.
그림만 봐서는 이해가 불가능합니다. 위에 링크 걸어진 CSS 파일을 notepad(메모장)으로 열어주시고, 제가 설명한 부분을 하나하나 찾아가보도록 할게요.
먼저, body입니다. css파일의 내용을 보시면 -
요런 식으로 나와 있을 겁니다. 해석하자면, 폰트는 돋움으로, 폰트 크기는 0.75em으로, 줄간격은 1.5로, 글씨색상은 #555으로, 배경 이미지는 bg_body.gif로 왼쪽 위에 가로로 반복시켜서 위치하게 하고, 배경색상은 #eee[회색]으로 놓는다는 뜻입니다.
.. 음, 시작부터 너무 어려웠나요. 쉽게 설명드리려고 했는데 -_-.
다음으로 #container을 살펴봅시다. 잘 보시면 아시겠지만 이것은 #header, #menu,#content, #sidebar을 모두 포함하고 있는 중요 구성 요소이죠.
CSS파일을 보시면 아시겠지만, 이 부분들은 블로그의 전체적인 레이아웃을 구성하는 요소이기 때문에 붙어서 묶여 있습니다. 이 부분만 따로 때서 설명할게요.
가로 길이는 780px만큼, 내부 여백은 20px만큼, 위치는 화면 가운데로, 배경 색상은 하얀색으로라는 뜻입니다. 원래 margin속성은 외부 여백을 뜻하는데, auto가 붙으면 가운데로 정렬(=float:middle;와 같지만, float속성에는 middle이 없으니 margin:auto로 대체해야 합니다)하게 됩니다.
overflow:hidden; 속성은 만약 레이아웃에 넘치는 요소가 있으면 그것을 보여주겠냐라는 뜻인데, 기본 스킨에서는 있어도 상관없고 없어도 상관없는 구성요소이죠.
float 속성은 언급했듯이 좌우에서의 위치를 설정합니다. 이 설정을 반대로 바꾸면 사이드바를 왼쪽에, 본문을 오른쪽에 둘 수 있는데 김철호님의 텍큐가 바로 그 예이죠.
계속해서 titleWrap에 대해서 설명드리겠습니다.
color은 글자 색상이고 border-bottom은 밑쪽 부분의 테두리의 스타일을 지정하는 속성입니다. dashed는 점선으로 표시하라는 뜻인데 solid와 반대되는 속성이죠. padding과 margin은 위에서 언급드렸습니다.
이 외에, #sidebar에는 수많은 속성들이 수정이 가능합니다. 위에서 보이는 #profile속성, #sidebar h3와 같은 사이드바의 머릿말의 속성 등이 있고 무엇보다 중요한 것은 이 텍큐 기본스킨의 사이드바의 특성에는 사이드바 안에 2번째 사이드바가 들어가 있습니다. 이름은 .sidebar-1인데 텍큐 기본 스킨에만 존재하는 듯 싶더라고요.
위쪽의 /* ~ */ 사이는 주석처리입니다. 어차피 CSS 파일 만들때 실제로 읽혀지지 않는 부분이란 뜻이고 -_-.
여기서 border 속성이 있음을 발견할 수 있는데, 다시 위에 첨부하신 스크린샷을 보시면 .sidebar-1이라고 표시된 부분 주위를 보면 엷은 테두리가 있음을 보실 수 있습니다. 실제로 이 속성이 효과를 발휘함을 볼 수 있는 것이죠.
전 이 스킨을 토대로 제 멋대로 다시 구성했습니다. 이젠 제 스킨을 분석해 보도록 할게요.
제 스킨의 CSS는 여기에 있습니다.
body 속성을 먼저 참고하겠습니다.
폰트는 마찬가지로 돋움입니다.
폰트 크기는 75%를 기준으로 잡도록 하였고,
외부 간격/내부 간격은 모두 0으로 잡았습니다. 그리고
배경사진은 이것으로 정했고, 반복하지 않게 위쪽 우측으로 위치를 잡았습니다. 또 배경색상은 흰색(#ffffff)으로 설정해 주었습니다.
줄간격은 1.6em으로 맞췄고 본문의 텍스트 색상은 #454545[회색]로 잡았습니다.
이제 #container부분을 살펴보도록 하겠습니다. 제가 위에서 언급드렸듯이 이 속성은 블로그의 레이아웃을 결정하는 중요한 요소라고 말씀드렸습니다. 많이 뜯은 만큼 소스가 꽤 기네요 -_-...
#container의 가로 길이가 1050px로 무려 300px나 늘어났습니다.
그리고 저는 본문을 강조하기 위해서 사이드바와 본문을 따로 떼어 보이도록 하는 효과를 주도록 #container의 배경 색상을 없앤 후 #header, #menu, #content가 일체형으로 보이게끔 이 셋의 가로 길이(width)속성을 같게 설정하였습니다. (#content같은 경우에는 내부 여백(padding)을 주었기 때문에 width 길이를 계산해 보니 660px가 나오더라고요)
또한, 본문의 글씨체를 맑은 고딕으로 설정하기 위해서 #content의 font-family 속성을 맑은 고딕으로 설정하였습니다. [CSS에서 폰트를 설정할 때, 띄어쓰기를 포함하는 폰트는 작은 따옴표로 묶어줍니다]
또 본문의 크기가 길어진 대신 사이드바를 작게 하기 위해서 사이드바의 가로 크기를 기존보다 작은 190px만큼 준 것도 기본 스킨과의 차이점이죠.
하지만 제 사이드바는 보시면 2단으로 구성되어 있습니다. 이는 2단처럼 보이지만 실은 2단이 아니라고 말씀드릴 수 있네요. 앞에서 말씀드린 .sidebar-1 속성을 확인해보도록 합시다.
position:absolute; 속성은, 레이어(div)의 위치를 자유자재로 이동시킬 수 있게 하는 속성입니다. 즉 저는 사이드바에서 이 부분만 떼내어서 x좌표(?) 1100px, y좌표 300px이 되는 곳으로 이동시킨 겁니다.
또한 글 제목 부분(titleWrap)부분의 스킨도 변화가 있었음을 알 수 있습니다.
text-align:center;는 글 제목을 가운데 정렬 시킨다는 뜻이고,
폰트를 돋움, 크기를 1.5em, 자간을 -2px 줄인 것입니다.
이 외에도 저는 스킨에 통일감을 주기 위해서 .counter 등 여러 부분에 변화를 주었습니다. a:link, a:hover, a:visited에도 별도 처리를 하였는데 이 부분은 직접 열어보셔서 확인하시는게 좋을 듯 싶네요 ^^...
이상으로 길고 조잡한 글을 마칩니다. 원래 스킨의 레이아웃에 관한 스크린샷만 올리고 끝내려고 했는데 잡다하게 주석들을 붙이다 보니 글이 길어져 버렸네요 ㅠ...
이미 그 전에도 설명드렸었던 것 같은데, 이해하시는 분이 전혀 없으신 것 같아서 -_-. 다시 이번엔 도식화 해서 설명드리려고 합니다 (만 역시나 결과는 똑같을 듯 orz)
뭐 굳이 스킨 뜯으시려는 분이 아니더라고 해도, 텍스트큐브 스킨의 레이아웃을 파악하고 CSS에 대해서 알아보기에도 좋을 듯 해서 올려보는 포스팅이니, 시간이 남으시거나(..엇?) 흥미 있으신 분은 읽어 보시기 바랍니다 ^^..
먼저, 제가 베이스로 사용하고 있는 기본 스킨입니다. 이름은 TC_Textcube 기본 스킨. CSS 파일은 다음과 같고, 레이아웃을 도식화해보면 위와 같습니다.
그림만 봐서는 이해가 불가능합니다. 위에 링크 걸어진 CSS 파일을 notepad(메모장)으로 열어주시고, 제가 설명한 부분을 하나하나 찾아가보도록 할게요.
먼저, body입니다. css파일의 내용을 보시면 -
body { font-family: dotum, AppleGothic, Arial, Tahoma, Verdana, sans-serif; font-size:0.75em; line-height:1.5; color:#555; background:url(images/bg_body.gif) left top repeat-x #eee;}
요런 식으로 나와 있을 겁니다. 해석하자면, 폰트는 돋움으로, 폰트 크기는 0.75em으로, 줄간격은 1.5로, 글씨색상은 #555으로, 배경 이미지는 bg_body.gif로 왼쪽 위에 가로로 반복시켜서 위치하게 하고, 배경색상은 #eee[회색]으로 놓는다는 뜻입니다.
.. 음, 시작부터 너무 어려웠나요. 쉽게 설명드리려고 했는데 -_-.
다음으로 #container을 살펴봅시다. 잘 보시면 아시겠지만 이것은 #header, #menu,#content, #sidebar을 모두 포함하고 있는 중요 구성 요소이죠.
CSS파일을 보시면 아시겠지만, 이 부분들은 블로그의 전체적인 레이아웃을 구성하는 요소이기 때문에 붙어서 묶여 있습니다. 이 부분만 따로 때서 설명할게요.
#container { width:780px; padding:20px; margin:10px auto; background-color:#fff;}
#header { width:780px; overflow:hidden; background:url(images/bg_header.gif) #fff;}
#menu { background-color:#d9dee1; height:40px; clear:both; position:relative;}
#body { padding-top:10px;}
#content { width:520px; overflow:hidden; float:left; padding:10px; margin-top:10px; margin-right:20px;}
#sidebar { width:200px; overflow:hidden; float:right;}
#footer { clear:both; padding:20px 0 0 0; }
#header { width:780px; overflow:hidden; background:url(images/bg_header.gif) #fff;}
#menu { background-color:#d9dee1; height:40px; clear:both; position:relative;}
#body { padding-top:10px;}
#content { width:520px; overflow:hidden; float:left; padding:10px; margin-top:10px; margin-right:20px;}
#sidebar { width:200px; overflow:hidden; float:right;}
#footer { clear:both; padding:20px 0 0 0; }
가로 길이는 780px만큼, 내부 여백은 20px만큼, 위치는 화면 가운데로, 배경 색상은 하얀색으로라는 뜻입니다. 원래 margin속성은 외부 여백을 뜻하는데, auto가 붙으면 가운데로 정렬(=float:middle;와 같지만, float속성에는 middle이 없으니 margin:auto로 대체해야 합니다)하게 됩니다.
overflow:hidden; 속성은 만약 레이아웃에 넘치는 요소가 있으면 그것을 보여주겠냐라는 뜻인데, 기본 스킨에서는 있어도 상관없고 없어도 상관없는 구성요소이죠.
float 속성은 언급했듯이 좌우에서의 위치를 설정합니다. 이 설정을 반대로 바꾸면 사이드바를 왼쪽에, 본문을 오른쪽에 둘 수 있는데 김철호님의 텍큐가 바로 그 예이죠.
계속해서 titleWrap에 대해서 설명드리겠습니다.
.titleWrap { color:#ccc; border-bottom:1px dashed #ddd; padding-bottom:3px; margin-bottom:5px;}
color은 글자 색상이고 border-bottom은 밑쪽 부분의 테두리의 스타일을 지정하는 속성입니다. dashed는 점선으로 표시하라는 뜻인데 solid와 반대되는 속성이죠. padding과 margin은 위에서 언급드렸습니다.
이 외에, #sidebar에는 수많은 속성들이 수정이 가능합니다. 위에서 보이는 #profile속성, #sidebar h3와 같은 사이드바의 머릿말의 속성 등이 있고 무엇보다 중요한 것은 이 텍큐 기본스킨의 사이드바의 특성에는 사이드바 안에 2번째 사이드바가 들어가 있습니다. 이름은 .sidebar-1인데 텍큐 기본 스킨에만 존재하는 듯 싶더라고요.
/* sidebar element */
.sidebar-1 { width:198px; border:1px solid #d9dee1; margin-top:10px; overflow:hidden;}
.sidebar-1 { width:198px; border:1px solid #d9dee1; margin-top:10px; overflow:hidden;}
위쪽의 /* ~ */ 사이는 주석처리입니다. 어차피 CSS 파일 만들때 실제로 읽혀지지 않는 부분이란 뜻이고 -_-.
여기서 border 속성이 있음을 발견할 수 있는데, 다시 위에 첨부하신 스크린샷을 보시면 .sidebar-1이라고 표시된 부분 주위를 보면 엷은 테두리가 있음을 보실 수 있습니다. 실제로 이 속성이 효과를 발휘함을 볼 수 있는 것이죠.
전 이 스킨을 토대로 제 멋대로 다시 구성했습니다. 이젠 제 스킨을 분석해 보도록 할게요.
제 스킨의 CSS는 여기에 있습니다.
body 속성을 먼저 참고하겠습니다.
body {
font-family:Dotum,돋움, 'Lucida Grande', AppleGothic, sans-serif;
font-size:75%;
margin:0;
padding:0;
background:url(http://fs.textcube.com/blog/0/1892/attach/XbaBxG3nOd.jpg) left top no-repeat #ffffff;
line-height:1.6em;
color:#454545;
}
font-family:Dotum,돋움, 'Lucida Grande', AppleGothic, sans-serif;
font-size:75%;
margin:0;
padding:0;
background:url(http://fs.textcube.com/blog/0/1892/attach/XbaBxG3nOd.jpg) left top no-repeat #ffffff;
line-height:1.6em;
color:#454545;
}
폰트는 마찬가지로 돋움입니다.
폰트 크기는 75%를 기준으로 잡도록 하였고,
외부 간격/내부 간격은 모두 0으로 잡았습니다. 그리고
배경사진은 이것으로 정했고, 반복하지 않게 위쪽 우측으로 위치를 잡았습니다. 또 배경색상은 흰색(#ffffff)으로 설정해 주었습니다.
줄간격은 1.6em으로 맞췄고 본문의 텍스트 색상은 #454545[회색]로 잡았습니다.
이제 #container부분을 살펴보도록 하겠습니다. 제가 위에서 언급드렸듯이 이 속성은 블로그의 레이아웃을 결정하는 중요한 요소라고 말씀드렸습니다. 많이 뜯은 만큼 소스가 꽤 기네요 -_-...
#container { width:1050px; padding:20px; margin-left:50px; }
#header {
width:820px;
/*background:url(http://fs.textcube.com/blog/0/1892/attach/XBsFo8yeNm.png) top left no-repeat*/;
padding: 120px 200px 0px 0px;
margin:-10px 0 0px 0;
height:100px;
overflow:hidden;
font-weight:normal;
font-family:Arial;
font-size:1.3em;
line-height:1.6em;
letter-spacing:-1px;
}
#menu { background:url(http://fs.textcube.com/blog/0/1892/attach/XNu5nLUmAa.png) top left no-repeat; width:820px; height:40px; clear:both; position:relative; margin-top:-40px; /*filter:alpha(opacity:70);opacity:0.7;*/}
#body { padding:0 0 0 0; }
#sidebar { background-color:transparent; width:190px; overflow:hidden; float:right; margin-right:30px; margin-top:0px; }
#content { font-family:'맑은 고딕', 'Malgun Gothic', 돋움, dotum, 'Lucida Grande', AppleGothic, sans-serif; background:url(http://fs.textcube.com/blog/0/1892/attach/XBsFo8yeNm.png) #ffffff top left no-repeat; width:660px; overflow:hidden; float:left; padding:50px 80px 10px 80px; margin-top:0px; }
#footer { clear:both; padding:20px 0 0 0; }
#header {
width:820px;
/*background:url(http://fs.textcube.com/blog/0/1892/attach/XBsFo8yeNm.png) top left no-repeat*/;
padding: 120px 200px 0px 0px;
margin:-10px 0 0px 0;
height:100px;
overflow:hidden;
font-weight:normal;
font-family:Arial;
font-size:1.3em;
line-height:1.6em;
letter-spacing:-1px;
}
#menu { background:url(http://fs.textcube.com/blog/0/1892/attach/XNu5nLUmAa.png) top left no-repeat; width:820px; height:40px; clear:both; position:relative; margin-top:-40px; /*filter:alpha(opacity:70);opacity:0.7;*/}
#body { padding:0 0 0 0; }
#sidebar { background-color:transparent; width:190px; overflow:hidden; float:right; margin-right:30px; margin-top:0px; }
#content { font-family:'맑은 고딕', 'Malgun Gothic', 돋움, dotum, 'Lucida Grande', AppleGothic, sans-serif; background:url(http://fs.textcube.com/blog/0/1892/attach/XBsFo8yeNm.png) #ffffff top left no-repeat; width:660px; overflow:hidden; float:left; padding:50px 80px 10px 80px; margin-top:0px; }
#footer { clear:both; padding:20px 0 0 0; }
#container의 가로 길이가 1050px로 무려 300px나 늘어났습니다.
그리고 저는 본문을 강조하기 위해서 사이드바와 본문을 따로 떼어 보이도록 하는 효과를 주도록 #container의 배경 색상을 없앤 후 #header, #menu, #content가 일체형으로 보이게끔 이 셋의 가로 길이(width)속성을 같게 설정하였습니다. (#content같은 경우에는 내부 여백(padding)을 주었기 때문에 width 길이를 계산해 보니 660px가 나오더라고요)
또한, 본문의 글씨체를 맑은 고딕으로 설정하기 위해서 #content의 font-family 속성을 맑은 고딕으로 설정하였습니다. [CSS에서 폰트를 설정할 때, 띄어쓰기를 포함하는 폰트는 작은 따옴표로 묶어줍니다]
또 본문의 크기가 길어진 대신 사이드바를 작게 하기 위해서 사이드바의 가로 크기를 기존보다 작은 190px만큼 준 것도 기본 스킨과의 차이점이죠.
하지만 제 사이드바는 보시면 2단으로 구성되어 있습니다. 이는 2단처럼 보이지만 실은 2단이 아니라고 말씀드릴 수 있네요. 앞에서 말씀드린 .sidebar-1 속성을 확인해보도록 합시다.
.sidebar-1 { position:absolute; width:200px; top:300px; left:1100px; overflow:hidden;}
position:absolute; 속성은, 레이어(div)의 위치를 자유자재로 이동시킬 수 있게 하는 속성입니다. 즉 저는 사이드바에서 이 부분만 떼내어서 x좌표(?) 1100px, y좌표 300px이 되는 곳으로 이동시킨 겁니다.
또한 글 제목 부분(titleWrap)부분의 스킨도 변화가 있었음을 알 수 있습니다.
.titleWrap h2 { text-align:center; margin-bottom:20px; }
.titleWrap h2 a {
font-weight:normal;
font-family:Dotum,돋움,'Lucida Grande',AppleGothic, sans-serif;
font-size:1.5em;
line-height:1.3;
letter-spacing:-2px;
}
.titleWrap h2 a {
font-weight:normal;
font-family:Dotum,돋움,'Lucida Grande',AppleGothic, sans-serif;
font-size:1.5em;
line-height:1.3;
letter-spacing:-2px;
}
text-align:center;는 글 제목을 가운데 정렬 시킨다는 뜻이고,
폰트를 돋움, 크기를 1.5em, 자간을 -2px 줄인 것입니다.
이 외에도 저는 스킨에 통일감을 주기 위해서 .counter 등 여러 부분에 변화를 주었습니다. a:link, a:hover, a:visited에도 별도 처리를 하였는데 이 부분은 직접 열어보셔서 확인하시는게 좋을 듯 싶네요 ^^...
이상으로 길고 조잡한 글을 마칩니다. 원래 스킨의 레이아웃에 관한 스크린샷만 올리고 끝내려고 했는데 잡다하게 주석들을 붙이다 보니 글이 길어져 버렸네요 ㅠ...
댓글을 달아 주세요
컴퓨터가 아닌 웹을 해킹하고있는 당신은 욕심쟁이
우후훗!
p.s 그나저나
http://kuna.wo.tc/guestbook/666380#comment666380
ㅋㅋㅋ 감사합니다
하지만 스킨편집기능이 제공된다면(....)
이랄까,, 저도 한번 해봐야 겠습니다..ㅋㅋ
머지 않아 지원되겠죠? ㅋ
네 저는 저걸 책 안보고 마스터 했스빈다... [퍽퍽]
는 훼이크고 사전 찾아 가면서 했습니다 ㄷㄷ
ㄷㄷ 열심이시군요 ㅋㅋ
...멍합니다. <- 응?
ㅠㅠ
+_+ 이런 것이 있었군요. 잘 보고 갑니다~
난잡한 포스팅 봐주셔서 감사합니다 ㅠㅠ
오오... 피와 살이 되는 포스트, 잘 봤습니다.
부족한 포스트 참고 되셨다면 감사합니다 ..
잘봤습니다~ 어서 빨리 텍큐닷컴에도 스킨기능이 지원되면 좋을텐데요~
한달간 업데이트는 커녕 텍큐닷컴팀 소식도 없는;;;;
솔직히 텍큐닷컴 너무 업데이트가 느려졌습니다. 스킨 뜯어서 사용하는 유저들이 많아질수록 그에 부응하는 대책을 1%라도 내놔야지, 너무 진전이 없네요 -_-a
와우,,,대박입니다. 예전에 올려주신...js파일도 잘쓰고는 있었는데...문제가 그거 때문에 일부 카테고리 보기 부분에서 에러가 발생하여 현재는 사용안하고 있습니다.
http://blog.textcube.com/guestbook/1140858#comment1140858
이 포스팅은 그야말로 뼈가되고 살이되는 것 같네요...감사합니다!