본문 바로가기

▶아이티

티스토리 스킨(Entertainment News ver.1.0) 수정 완료

블로그 스킨 수정도 거의 마무리 지었다.


처음엔 완전히 새로 만들려고 했지만, 너무 어렵다. 생각되로 표현이 않된다. 그래서 최신 티스토리 스킨을 가지고 수정을 했다. HTML5와 CSS3 기술을 접목하려고 노력했다. 이미지 없는 스킨을 만들려고 했는데, HTML5로 도형그리는 것이 숙달되지 않아서, 그건 나중을 기약해본다.


자바스크립에서 한발 더 나아간 jQuery를 많이 사용하는 추세인 것 같다. (어렵더군.)


직접 만들지는 못하고, 책에서 보고 메뉴바를 만들었고, jsdo.it/에서 자바스크립 소스를 빌려왔다. 블로그 좌측에 있는 움직이는 공들이 그것이다. (forked-3d)


언잰가는 HTML5 + CSS3를 사용해서 블로그 스킨을 만들어 보겠다.

처음 수정할때 보다 눈에 잘 보인다. 스킨 수정하는 지식을 잃기 전에 기록을 하는 거다.


가장 최근의 티스토리 스킨(Entertainment News)을 사용했다. 이 스킨을 적용한다.




수정전 스킨 preview수정후 스킨 preview




1. 스킨위자드 



스킨 위자드 - 배경스킨 위자드 - 타이틀스킨 위자드 - 게시물


일단 스킨 위자드로 간단히 수정하는 것이 가장 편하다.

1. 배경 :  배경 이미지 사용하지 않고, 배경은 흰색(#ffffff)으로 한다.

2. 타이틀 : 미리 만든 타이틀 이미지를 선택해서, 원래크기로 조정, 배경은 투명으로 정한다.

3. 게시글 : 글영역 넓이를 800 적용(난 넓은 것이 좋아), 제목 글자색과 게시글 글자색을 정한다.

 그리고 글꼴을 기본값으로 정한다. 게시글 크기만 기본값으로 정한다. 





2. skin.html 수정


스킨 원본 :  

EntertainmentNews_tistorySkin.zip

여기에서 skin.html과 style.css를 수정한다.


처음에는 Notepad++를 사용했는데, 적용시키는 것이 불편해서 블로그에서 바로 수정하고 적용시켰다. 브라우저는 구글크롬, 파이어폭스, 사파리 이 셋중에 하나를 추천한다. (익스플로러는 무겁다.) 크롬에서 탭을 몇 개 띄워서 편집, 수정, 확인을 하면서 스킨을 적용시켰다. 


그럼, 수정한 부분을 살펴 보겠다.


1. <head> ~ </head> : 폰트 추가와 좌측 사이드 자바 스크립 효과 설정   

<head>

<!-- 웹 폰트 추가 : NanumGothicWeb, NanumGothiceExtraBoldWeb, NanumBrushWeb, HeummJungWeb, 'Open Sans' -->

<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb' rel='stylesheet' type='text/css' />

<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicExtraBoldWeb' rel='stylesheet' type='text/css' /> 

<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumBrushWeb' rel='stylesheet' type='text/css' />

<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=HeummJungWeb' rel='stylesheet' type='text/css' />

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 


<!-- 좌측 사이드 효과 -->

<meta name="Description" content="" />

<meta name="Keywords"  content="" />

<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />

</head>


폰트를 추가 했다. 직접 폰트를 웹에 올려서 사용하는 것보다. 무료로 배포하는 것을 사용하는 것이 훨씬 편하고, 속도도 빠르다. 위의 코드만 넣고, 폰트를 적용시키면 된다.  ( 참조 : 블로그에 원하는 글꼴 사용하기 - 한글, 영문 폰트 )

좌측 사이드 효과는 좌측에 여백이 많이 남아서 넣어 본 것이다.



2. 상단 메뉴와 아쿠아 소제목바는 HTML5 책을 보면서 만든 것이다. 

상세보기



3. 구글 애드센스와 알라딘 TTB를 넣었다. 광고가 없으면 왠지 허전하다. 


( 자세한 것은 ityizg.tistory.com에서 ~ )



3. style.css 수정


skin.html이 뼈대라면 style.css는 살이다. 뼈대를 만들고, 살을 붙인다. html에 추가하고, css에서 다듬는다.


/* ******* layout ******* */

body {

background-color:/*@background-color=*/#FFFFFF/*@*/;

background-image:/*@background-image=*/none/*@*/;

background-repeat:/*@background-image-repeat=*/repeat/*@*/;

background-position:/*@background-image-position=*/0 0/*@*/;

        

     /* 폰트 정리*/

font-family: 'NanumGothicWeb','Open Sans', sans-serif;                    /* 폰트 종류 */

font-size:0.9em;                               /* 폰트 크기 */

line-height:2;                                 /* 줄 간격    */

        color:#000;                                                                                         /* 폰트 색    */

}


#container {

width:1300px;                                                                                       /* 블로그 폭  */

margin:0 auto;

word-wrap:break-word;

}


#header {

width:1300px;

height:1%;

padding:/*@title-height:30=padding-top:*/100px/*@*/ 0 5px;

text-align:center;

background:/*@title-background-color=*/transparent/*@*/ /*@title-background-image=*/url("images/TitleImage-m.png")/*@*/ 

                   /*@title-background-image-position=*/center top/*@*/ /*@title-background-image-repeat=*/no-repeat/*@*/;

}


폰트 종류는 무료폰트 중에서 나눔고딕을 선정했으며, 폰트 크기는 여러번 수정해서 0.9em으로 정했다. 줄간격은 2 정도가 적당했다. 폰트색은 검정색.

블로그 폭은 어떻게 수정하다보니 저렇게 커졌다. 1000px정도면 좋을 것 같은데... 나는 본문 크기가 넓은 것이 좋다.


나머지 폰트도 모두 나눔고딕으로 바꾸었다. 


skin.html 뒷 치닥거리하기...


( 자세한 것은 ityizg.tistory.com에서 ~ )