Layout Project

2011. 4. 26. 01:30


이 블로그는 더이상 업데이트하지 않습니다. 

Spider's Web 티스토리 스킨 http://spidersweb.tistory.com


Github

DAUM TISTORY ver 1.4

TEXTCUBE core 1.4

TEXTCUBE google - closed


Download

DAUM TISTORY ver 1.4

TEXTCUBE core ver 1.4

TEXTCUBE google - closed





바탕 글꼴과 최근 코멘트 옆에 넣기

2011. 4. 15. 15:52
모든 분들에게 다 답변을 못해드리는 점 양해 바랍니다. 이 스킨은 직접 커스터마이징해서 블로그 스킨 꾸미는 것을 배워보고자 하시는 분들에게 도움이 되고자 만들었습니다. 때문에 부족한 점이 많습니다. 이 스킨을 그대로 사용하셔도 좋습니다만, 이 스킨을 커스터마이징하는데 답변을 다 드릴 수 없는 사정을 이해해주시기라 믿습니다.

직접 커스터마이징하는 초보자의 방법은 html 소스 보기를 하신 후 해당 사항의 html 태그와 관련된 css 선택자를 찾는 것입니다. 그 후 css에 관한 검색을 해보시면 어렵지 않게 정보를 얻으실 수 있을 겁니다.

예를들자면 본문의 글꼴을 바꾸고 싶을 경우, html 소스보기를 해셔서 본문 전체를 감싸고 있는 html 태그를 찾아보세요. 그것이 <div class="entry">일 것입니다. 그리고 css에서 entry라는 선택자를 찾은 후 속성을 수정해주시면 됩니다. 아래와 같습니다.

1.글꼴 변경하는 방법은 쉽습니다.

css에서 .entry { ... } 부분과 .entry-title { ... } 부분을 찾으신 후 font-family에 "바탕"을 넣어주시면 됩니다. 그대로 font-family:... 부분을 복사해서 넣어보세요.


.entry {
    position: static;
    clear: both;
    display: block;
    padding:5px 0 5px 0;
    border-bottom:1px solid #ccc;
    color:#808080;
    font-family: "바탕", verdana,Georgia;
    font-size: 8pt;
    text-align:justify;
    line-height: 1.5em;
}


.entry-title h2 a { 
    float:left;
    padding:5px;
    background-color:#ffff00;
    color: #999; 
    font-size: 1.5em;
    font-weight: bold;
    font-family: "바탕", Arial, Verdana;
    text-align:justify;
}

2. 메뉴 옆에 최근 코멘트 넣는 방법입니다.

css에서 ul li에 해당되는 css 스타일을 따로 찾아서 커스터마이징 해보시길 바랍니다.
우선 티스토리 스킨가이드를 참고하세요.
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4#3-8

<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
<div class="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="">.</a>
<span class="info_wrap">
<span class="name"></span>
<span class="date"></span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>


위의 코드가 티스토리 공식 최근 댓글이라고 보시면 됩니다. 크게 바뀌는 것은 없구요. 이 스킨의 카테고리 메뉴와 동일하게만 안내를 해드리겠습니다.

html에서 beta 부분에는 카테고리 메뉴만 있으니 추가를 해야겠죠.

<div class="beta">
  <div class="beta-inner">

     ....

  </div>
</div>


카테고리 메뉴 끝나는 </s_sidebar_element> 태그 아래에 다음의 코드를 넣어주세요.

<s_sidebar_element>
<!-- 최근에 달린 댓글 -->
    <div class="menu">
<h2>최근 댓글</h2>
<ul>
<s_rctrp_rep>
<li>
<a href="">. <span class="c_cnt"></span></a>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>

그리고 css에서 <h2>최근 댓글</h2> 제목 부분만 맞춰주면 될 것 같습니다. 앞서 말씀드린 대로 카테고리 메뉴와 크게 다르지 않다는 조건입니다.


#beta .menu h2 {
    font-size: 15px;   
    padding: 4px 6px;
}



'Customize' 카테고리의 다른 글

헤더에 이미지 넣는 방법  (0) 2010.11.06
Layout Project 소개  (0) 2010.09.02
본문 사이즈 넓히기  (0) 2010.06.30
폰트 색상 변경 방법  (0) 2010.06.15
관리자 로그인시 글 관리 메뉴가 출력  (0) 2010.05.09

헤더에 이미지 넣는 방법

2010. 11. 6. 02:29
답변이 많이 늦어져서 죄송합니다.

헤더 부분 전체에 이미지를 넣는 방법은 간단합니다. 배포된 스킨의 전체 가로 사이즈가 800px입니다. 즉 이미지 가로 사이즈도 800px로 맞춰 제작하시면 됩니다.

먼저 html/css편집 메뉴의 html에 해당하는 창에서 <!-- header -->라고 표시된 부분을 찾으신 후 header-alpha와 header-beta로 되어 있는 부분은 싹 지우시면 됩니다. 그리고 이미지 링크를 해주면 되겠지요. 아래와 같습니다.

<!-- header -->
    <div id="header">
    <div id="header-inner">

<img src="./image/lifeisfun.jpg" width="800px" />

    </div>
    </div>

지우시면 되는 부분

 
이미지 링크를 보시면 "./image/...jpg" 처럼 되어있는데요. html/css편집 메뉴의 오른쪽에 이미지 업로드 하는 곳이 있습니다. 스킨에 해당되는 이미지를 업로드하실 수 있습니다.

옆의 width="800px"는 옵션입니다. ^^ 이미지 사이즈가 800px라면 없어도 됩니다. 다만 사이즈가 조금 작을 경우 가로로 강제적으로 800px로 늘려라 하는 html 사용방법입니다.



만약 헤더의 전체에 큰 이미지를 넣는게 아니라 텍스트로 블로그 명칭은 그대로 두되, alpha 영역에만 이미지를 넣고 싶다면 <!-- header-alpha --> 부분의 <p>.</p> 대신에 <img src="./image/...jpg" /> 헤더 이미지 링크로 변경해주시면 됩니다.  alpha 영역의 사이즈는 560px로 설정되어 있습니다.

또한 이미지를 누르면 블로그 홈으로 링크를 걸고 싶으시다면 다음과 같이 하시면 됩니다.

<a href="http://your-site.com"><img src="./image/...jpg" /></a>


주의하실 점은 header-alpha는  css에 visibility:hidden; 속성을 넣어두었습니다. header-beta에는 블로그 명칭이 출력되지만 alpha에는 무엇을 하든 감추어지는 속성이지요. 때문에 html/css편집 메뉴의 style.css에서 아래와 같이 #header-alpha-inner { ... } 부분을 찾으세요.

#header-alpha-inner {
    width:560px;
    visibility:hidden;
}

그리고 visibillity:hidden; 을 삭제하시면 됩니다.

^^





'Customize' 카테고리의 다른 글

바탕 글꼴과 최근 코멘트 옆에 넣기  (5) 2011.04.15
Layout Project 소개  (0) 2010.09.02
본문 사이즈 넓히기  (0) 2010.06.30
폰트 색상 변경 방법  (0) 2010.06.15
관리자 로그인시 글 관리 메뉴가 출력  (0) 2010.05.09

Layout Project 소개

2010. 9. 2. 21:17
취미로 XHTML+CSS로 사이트를 꾸미는 동안 가장 힘들었던 것은 레이아웃입니다. 이제는 익숙해졌지만 그래도 계속 고민을 해봤습니다. 왜 초보자도 쉽게 다룰수 있는 레이아웃 소스가 하나도 없을까 궁금해졌습니다. 물론 구글링을 해보면 몇 가지가 있지만 지속적으로 사용하기 위한 레이아웃 소스는 찾아보지 못했습니다. 튜토리얼로 보여주는 소스가 아닌 확장성을 가지고 실제로 사용할수 있는 소스가 제공되야하지 않을까 싶습니다. 이름만 프로젝트지 현실은 그간 나름 고생하며 익힌 레이아웃에 대한 정리일 뿐입니다. 물론 최대한 친절한 설명을 위해 노력해보겠습니다. 쉽게 접근해주세요.

레 이아웃을 만드는 방법은 다양합니다. 정석이란 없다고 생각합니다. 하지만 웹표준의 권고사항을 최대한 지키면서 크로스브라우징을 지원한다면 모든 방법이 옳다고 봅니다. 가끔 웹표준에 대한 논란이 있는 곳을 살펴보면 디자이너라는 분들조차 테이블 테그를 써왔으니 굳이 CSS로 바꿀 필요도 없고, 테이블 테그로 레이아웃 만드는 것이 웹표준에 어긋나는 것은 아니다라고 말씀하십니다. 그정도니 일반인들이 자기 마음껏 사이트를 꾸미는 것이 얼마나 힘들겠습니까. 다음 티스토리만 하더라도 마음껏 자유자재로 디자인을 꾸밀 수 있다는 것이 포인트인데, 실제로 일반인이 도전할 수 있는 범위는 폰트, 색상, 이미지 같은 것을 수정하는 정도가 아닐까요? 레이아웃만 마음껏 할 수 있다면 많은 변화가 있으리라 생각합니다.


레이아웃이란 무엇일까요? 사전적 정의는 "문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일, 또는 그 기술."

좀더 자세하게 아래의 그림을 통해 보자면 Header,  Contents, Footer로 크게 구분됩니다. 흔히 사용되는 레이아웃입니다. 간단한 레이아웃처럼 보이지만 레이아웃의 전부이기도 합니다. 때문에 CSS로 쉽게 구조화 할 수 있고 확장할 수도 있습니다.


                        (via HTML5의 모든 것 http://channy.creation.net/blog/776)

앞으로 HTML5에서는 보시는 바와 같이 레이아웃도 구조화된 마크업이 가능하다고 합니다. 하지만 CSS 없이는 아무것도 아닌 것과 같습니다. 때문에 CSS로 레이아웃을 만드는 것은 언제나 유효할 것입니다. 간단하게 초보자 분들도 이해하기 쉬운 레이아웃 프로젝트의 사용법을 알려드리겠습니다.

위의 그림에 노란색 Header가 제일 위에 있습니다. 그런데 Header의 레이아웃만 사용하고 싶다면 어찌하면 좋을까요?


XHTML
<div id="header"> ... </div>
<div id="header"> ... </div>

위와 같이 동일한 header 선택자를 반복 사용하면 안되고 선택자의 이름만 바꿔주는 것만으로도 척척 만들 수 있어야겠지요.


XHTML
<div id="header1"> ... </div>
<div id="header2"> ... </div>
<div id="header3"> ... </div>
<div id="header4"> ... </div>


CSS
div#header1 { ... }
div#header2 { ... }
div#header3 { ... }
div#header4 { ... }

레이아웃은 선택자 header에 번호를 매기는 것처럼 추가 및 수정을 할 수 있게끔 쉽게 만들 수 있는 것입니다. 저 역시 처음 CSS를 가지고 놀 때 여기저기 사이트를 돌아다니며 마음에 드는 레이아웃을 따라해본 적이 많았습니다. 그렇게 하려면 레이아웃의 각 부분이 달라서 적용하는데 무척 힘들었지요. 지금 설명드린 레이아웃의 기초는 제 사이트의 메인 페이지를 보시면 이해가 쉽게 되실 겁니다. 색상만 다른 똑같은 영역이 다섯 열(5 row)로 되어있습니다. 열(row)과 행(column)이 헷갈릴 수 있으니 주의하세요. 열(row)은 Navigation(검정바탕), ElseWhere(흰바탕), Project(회색바탕), Entries(흰바탕), Foot(검정바탕) 순으로 세로로 채워지는 걸 뜻하며, 행(column)은 ElseWhere - Profile 그리고 Project, Github, Download 순으로 가로로 채워지는 걸 뜻합니다.







본문 사이즈 넓히기

2010. 6. 30. 23:00
이전에 포스팅 해두었던 가로 사이즈 수정하기도 참고하시면 도움이 될 겁니다. 동영상으로 만들어두었는데요. 본문을 넓히려고 문의하는 분들이 계시니 자세히 설명을 드리도록 하겠습니다.

우선 CSS를 확인할 수 있는 GitHub에 올려둔 티스토리 스킨을 보시면서 따라해보세요. CSS에서 레이아웃 부분부터 살펴보면 container - content - alpha - beta 로 제작되어 있습니다.

본문이 alpha(알파)에 해당됩니다. 본문을 넓히고 싶으시다면 alpha의 width(가로)의 크기를 높게 해주시면 됩니다. 디폴트(기본)으로 alpha는 580px로 되어있습니다. 580 픽스에 100 픽스 만큼 가로 사이즈를 넓힌다면 #alpha { width 680px; }

그리고 #alpha-inner에도 마찬가지로 #alpha-inner { width:660px; }로 수정해주시면 됩니다. 즉 100 픽스 만큼 넓힌다면 다음과 같습니다.

#alpha {
              width 680px;
}
#alpha-inner {
               width:660px;
}


위와 같이 고쳐주시면 됩니다. 그런데 문제는 본문 부분만 넓히면 어찌될까요? 전체를 감싸주는 contanier의 크기가 820px로 설정되어 있기 때문에 본문을 제외한 다른 부분은 본문에 밀려서 beta(베타) 메뉴가 밑으로 내려가게 됩니다. 때문에 #container-inner의 크기  820px에도 100px를 더해주셔야 합니다.

#container-inner {
               width:920px;
}


위와 같이 920px가 되겠습니다. 마찬가지로 #beta(메뉴)의 크기도 수정하고 싶다면 #beta와 #beta-inner의 width의 값을 바꾸고, 변경된 값만큼 #container-inner의 width 값을 알맞게 맞춰주어야합니다.

더불어 본문과 함께 header(윗부분)footer(아랫부분)의 크기도 동일한 디폴트 값을 가지고 있습니다. 본문의 가로 값 width에 100px 씩 더해주었으니 header와 footer의 width 값에도 100px 씩 더해주면 좋습니다. (아마도 header와 footer를 신경쓰지 않으셔도 사용하는데 불편한 점은 없을 것입니다)

그런데 #alpha 하나만 있어도 되는데, 왜 #alpha-inner를 따로 만들어두어서 번거럽게 했으냐 물으실 수도 있을 겁니다. 그에 대한 대답은 Default XHTML+CSS 두번째 글에 포스팅해둔 이미지를 보시면, 각 영역별로 간격이 있는 것을 보실 수 있을 겁니다. 각 영역마다 간격을 다르게 할 수도 있다는 것을 뜻합니다.

어려울 수도 쉬울 수도 있을 텐데, 어렵게 느끼시는 분은 한 번 도전해보세요. ^^


 




(720p HD 재생시 버퍼링이 심하면 로딩이 다 끝난후 재생해서 보세요.)

폰트 색상 변경 방법

2010. 6. 15. 01:53
원하는 색상으로 변경을 하고싶을 때 다음의 위치를 찾아서 변경해보세요. 누락된 부분의 색상을 변경하고 싶으시다면  언제든지 코멘트해주시면 바로 추가하도록 하겠습니다. 설명한다는 것은 어렵군요! 달리 좋은 방법을 생각하지 못하겠고, 게다가 제가 요즘 바빠서 시간을 내기도 힘든 상황입니다. 특정 부분의 색상이나 폰트 등을 다르게 변경하고 싶으시다면, 그 특정 부분을 알려주시면 좀더 자세하게 설명드리느 것이 좀더 수월할 것 같습니다. 아래의 사항이 도움이 될지는 모르겠습니다. 변경하고 싶은 부분을 자세히 지적해주시면 자세히 설명드리겠습니다. 

우선 블로그의 전체에서 링크에 해당되는 색상은 다음과 같이 지정되어 있습니다.

a:link,
a:visited,
a:active {
    color:#000;
    text-decoration: none;
}
a:hover {
    background-color:#ffff00;
}


링크는 검정색이고 마우스오버 시 배경색이 노란색입니다. 각 영역별로 색상을 달리 하시고자 한다면  이 부분을 삭제하세요. 각 영역별 폰트색상은 header, body(alpha, beta), footer 순서입니다.

기본적인 html과 css를 사용하는 방법은

skin.html에서 <div id="header"> ... </div> 안의 폰트 색상을 변경하고자 한다면
style.css에서 #header 부분을 찾아서 color:#111;과 같이 넣어주면 됩니다.

물론 header 전체가 아닌 header-alpha 부분만 폰트색상을 다르게 적용하고 싶다면
style.css에서 #header-alpha 부분에 color:#111;을 수정해주시면 됩니다.



1. header

#header p { color:#ccc; } header의 일반적인 p 태그 속에는 회색으로 되어있습니다.
#header h1 a { color:#f1f1f1; } 헤더의 블로그 제목이 표시되는 블로그 링크는 연한 회색으로 되어있습니다.
#header h1 a:hover { color: #ccc; } 헤더의 블로그 링크에 마우스오버시 회색으로 되어있습니다.


2. body(alpha)

.entry { color:#808080; } 블로그의 본문에 해당되는 부분은 전체 808080 색상이 지정되어 있습니다.
.article a:link,
.article a:visited,
.article a:active {
    color: #b0c4de;
}
.article a:hover {
    background-color:#ffff00;
}

블로그 본문에 링크에 해당되는 부분은 연한 파랑색 그리고 마우스오버시 노란색 배경으로 표시됩니다.

.entry-title h2 a {
    background-color:#ffff00;
    color: #999;
}
.entry-title h2 a:hover {
    background-color:#ffff00;
    color: #000;
}

블로그 글의 제목이 표시되는 부분입니다.

.actionTrail .cnt {
    color: #6b8e23;
}

.actionTrail 부분은 코멘트와 트랙백 펼침/닫힘 링크의 C T의 부분입니다.


3. body(beta)

검색창의 색상을 바꾸고 싶다면

#beta input {
    border:1px solid #ccc;
    background-color: #ffff00;
    color: #000;
    font-size: 11px;
}

#beta input:focus {
    background-color:#fff;
}

노란색 #ffff00으로 된 부분을 변경하시면 됩니다. input:focus는 검색창에 텍스트를 입력하기 위해 클릭했을 때 노란색에서 흰색으로 변하게하는 역할을 합니다.


카테고리 리스트를 변경하고 싶으시다면

#beta .menu ul li a {
    color:#...;
}

#beta .menu ul li a:hover {
    background-color: #...
}

위의 부분을 수정하시면 되고,

#beta .menu .c_cnt {
   color: #999;
   font-size:7pt;
}

#beta .menu .c_cnt 이것은 카테고리의 글수를 표시할 경우 카테고리(n) 숫자 n의 색상을 지정해둔 것입니다.


4. footer

#footer a {
   color:#ccc;
}
#footer a:hover {
    background-color:#ffff00;
}

footer 부분의 링크 색상은 와과 같습니다. 일반 텍스트는

#footer-inner {
    color:#ccc;
}

#footer-inner 전체에 회색 #ccc로 지정해두었습니다. 



사사라삼님의 질문에 대한 답변 내용입니다.

검색- oo에 해달하는글 부분에 대한 폰트 사이즈 변경방법입니다.

oo에 해당하는 글 폰트 크기는 style.css에서

.search-list h3, .searchRplist h3 { } 부분을 찾으신 후 font-size: oo px; 를 추가해주시면 됩니다.

참고 - http://github.com/minordev/layout-project-tistory/blob/master/style.css#L270

그아래 목록의 폰트 크기는

.search-list li, .searchRplist li { } 부분을 찾으신 후 font-size: oo px;를 추가하시면 됩니다.


참고- http://github.com/minordev/layout-project-tistory/blob/master/style.css#L258





관리자 로그인시 글 관리 메뉴가 출력

2010. 5. 9. 22:16
로그인 했을 때 관리자 페이지로 들어가지 않고 바로 글 수정 및 새글쓰기를 원하시는 분들이 계시네요. 코드를 간단히 붙여넣으면 되니까 천천히 따라해보세요. 티스토리와 텍스트큐브 둘 다 동일합니다.

스킨편집 -> skin.html


<s_ad_div>
        <div class="admin">
            <a href="">수 정</a> : <a href="#" onclick=""> 수정(창으로)</a> |
()→ <a href="#" onclick=""></a> | <a href="#" onclick=""> 관련글(트랙백)</a> | <a href="#" onclick=""> 삭제</a>
       </div>
</s_ad_div>
 
 








그리고 style.css 에서 아무곳에나 다음의 코드를 넣어주세요.

.admin {
     clear:both;
     padding:5px 0;  
     text-align:left;     
}

간단하죠? ^^ style.css의  .admin { } 부분에서 폰트 색상이나 크기 등을 설정할 수 있습니다.

그리고 새글쓰기 버튼은 skin.html 에서 아래로 쭉~ 내려오시면 "footer"라는 부분이 있습니다.

<li><a href="https://layoutproject.tistory.com/manage">admin</a></li> 의 바로 아래에

<li><a href="https://layoutproject.tistory.com/manage/entry/post">글쓰기</a></li> 를 붙여넣으면 됩니다.



'Customize' 카테고리의 다른 글

본문 사이즈 넓히기  (0) 2010.06.30
폰트 색상 변경 방법  (0) 2010.06.15
맑은고딕과 나눔고딕 폰트 적용하는 방법  (0) 2010.05.09
가로 사이즈 수정하기  (0) 2010.05.09
구글 텍스트큐브의 차이  (0) 2010.05.09

맑은고딕과 나눔고딕 폰트 적용하는 방법

2010. 5. 9. 22:13
두 분이 동시에 맑은고딕과 나눔고딕을쓸 수 있으면 좋겠다는 문의를 주셨네요. 불행이도 윈도우즈 기본 폰트가 아니라면 웹폰트를 사용하는데 몇가지 번거러운 작업이 필요합니다.

다만 맑은고딕은 윈도우즈 비스타부터 마이크로소프트에서 기본폰트로 포함되기 시작했습니다. 글을 맑은고딕 폰트로 사용하시고자 한다면 style.css 편집에서 .entry 선택자에 font-family:  "Malgun Gothic";을 추가해주시면 됩니다. 다음과 같습니다.


.entry {
            ...
            font-family:  "Malgun Gothic", 돋움, verdana;
}


블로그 전체에 맑은고딕을 적용하고자 하신다면

body { }  안에  "Malgun Gothic"을 추가하시면 됩니다.

아직 윈도우즈XP 이용자가 아직은 월등히 많기에 맑은고딕을 개인적으로 PC에 설치하지 않은 사람들에게는 폰트가 적용되지 않습니다.

대안은 웹폰트입니다. 개인이 폰트를 설치하지 않아도 해당 사이트에 접속하면 웹폰트를 가장 먼저 다운로드 후 텍스트를 출력하게 되지요. 몇가지 번거럽다는 작업이란 해당 사이트에 맞게 웹폰트를 설정해줘야 한다는 것입니다. 즉 해당 사이트의 도메인에만 웹폰트가 적용됩니다. 맑은고딕이나 나눔고딕을 자신의 사이트에 맞게 웹폰트를 설정해야하는데, 자세한 내용은 웹폰트 만드는 방법을 참고해주세요. 어렵지 않습니다.

'Customize' 카테고리의 다른 글

폰트 색상 변경 방법  (0) 2010.06.15
관리자 로그인시 글 관리 메뉴가 출력  (0) 2010.05.09
가로 사이즈 수정하기  (0) 2010.05.09
구글 텍스트큐브의 차이  (0) 2010.05.09
Layout 만들기 #3  (0) 2010.05.09

가로 사이즈 수정하기

2010. 5. 9. 22:12
Layout Project 스킨을 설치하시면 디폴트로 왼쪽으로 정렬된 레이아웃을 만날 수 있습니다. 전체가 float: left; 속성이 사용되는 것입니다. 그런데 왼쪽으로 정열되어 있어서 오른쪽으로 썰렁한 느낌이 들어서 마음에 들지 않는다면 다음과 같이 간단하게 수정하실 수 있습니다.

첫째 skin.html에서 <body class="layout-left"> 이 부분을 layout-center로 설정하는 방법이 있습니다. 자세한 것은 Layout 만들기 #3 편의 동영상을 보면서 따라해보세요.

둘째 style.css에서 가로 사이즈의 값을 수정해주는 방법입니다. 디폴트인 layout-left 왼쪽 정렬 방식을 따르고 전체 가로 사이즈를 400px 만큼 크게 한다면 수정해주어야 할 부분은 다음과 같습니다. 동영상을 함께 보면서 따라해보세요.




'Customize' 카테고리의 다른 글

관리자 로그인시 글 관리 메뉴가 출력  (0) 2010.05.09
맑은고딕과 나눔고딕 폰트 적용하는 방법  (0) 2010.05.09
구글 텍스트큐브의 차이  (0) 2010.05.09
Layout 만들기 #3  (0) 2010.05.09
Layout 만들기 #2  (0) 2010.05.09

구글 텍스트큐브의 차이

2010. 5. 9. 22:11
* 구글 텍스트 큐브는 서비스 중단되었습니다.

구글 텍스트큐브는 사이드바 위젯에 프로필과 관심블로그를 강제로 사용하게끔 되어있습니다. 어떤 의도인지는 모르겠으나 없어도 될 위젯인 만큼 반강제로 위젯을 출력되지 않게 하는 방법이 있습니다. XHTML에서는 프로필과 관심블로그가 사용되지만, CSS에서 그 부분을 표시하지 않는 방법입니다.


.tt-default-sidebar-profile-experTag { display: none; clear:both; }
.tt-default-sidebar-profile-blogInfo { display: none; clear:both; }
.tt-default-sidebar-profile-blogroll { display: none; clear:both; }
.tt-default-sidebar-following { display: none; clear:both; }
 
display 속성의 값을 none로 설정하면 화면에는 출력되지 않습니다. 덧붙여서 상당에 표시되는 메뉴바의 크기를 조절하기 위해서는 다음의 선택자에 값을 변경하면 됩니다.

#tt-GNB { font-size: 7pt; } 

메뉴바의 크기를 작게하기 위해서 폰트의 크기를 7pt로 값을 넣었습니다. http://minordev.textcube.com/ 에서 확인할 수 있습니다.



'Customize' 카테고리의 다른 글

맑은고딕과 나눔고딕 폰트 적용하는 방법  (0) 2010.05.09
가로 사이즈 수정하기  (0) 2010.05.09
Layout 만들기 #3  (0) 2010.05.09
Layout 만들기 #2  (0) 2010.05.09
Layout 만들기 #1  (0) 2010.05.09