티스토리 모바일웹용 CSS 만들기 - 이미지,폰트,메뉴숨기기

티스토리 블로그 운영 시 참고자료로 올려봅니다.

 

먼저 전 전문 개발자나 퍼블리셔가 아니기 때문에 더 좋은 방법은 얼마든지 있을겁니다... -_-;

특히나 전 디자인이나 색상등은 원체 꽝이기 때문에 방법론적인 것만 보시면 될 듯 합니다.

(혹시 모르니 먼저 면피부터.. ㅋㅋ)

 

티스토리 관리자의 html/css 편집에 있는 CSS는 수정을 해봐야 모바일웹인 경우는 아예 불러오지도 않는 것 같더라고요...

 

그래서 별도의 CSS 파일을 만들어서 글마다 불러올 수 있게 link 태그까지는 삽입을 하였습니다.

- 티스토리 모바일웹용 CSS 파일 넣기

 

이제 이 파일에 CSS를 만들어 넣으면 모바일웹에서도 스타일을 적용할 수 있겠죠?

 

자 우선 상단에 저에게는 불필요한... 보기 싫은 영역을 없애버리겠습니다.

.area_comment {display: none;}

#serviceHead {display: none;}

이제 글 첫 화면에서 상단 메뉴들이 없어져서 바로 글을 집중해서 읽을 수 있게 되었습니다.

 

가장 먼저 써먹었고, 가장 잘 써먹고 있는 이미지 스타일입니다. 

이미지를 그냥 등록해 놓으면 모바일웹에서는 가로세로 비율이 이상하게 깨져 나오더군요. 그래서 글 작성한 이후에 img 태그에 붙어있는 width, height값은 다 지워버리고 CSS로 처리했습니다.

가로폭 기준 100%로 채우는데, 좀 큰 화면에서는 미친듯이 커져서 최대 640px로 제한했습니다.

.area_content img {width:100%; max-width:640px;}

 

그리고 기본 폰트 사이즈를 좀 더 키워줬습니다.

body {
font: 16px/1.5 'Malgun Gothic',sans-serif;
}

 

웹 스킨에서는 본문 글 내용은 article로 되어 있는데 모바일웹 스킨에서는 .area_content 클라스로 되어 있습니다.

본문 내에 <h1> <a href=....> <ol> 등 태그에 스타일을 입히기 위해서는 .area_content 하위에 있는 태그에만 적용되도록 만들어야 다른 부분에 영향이 없습니다.

ul과 ol과 같은 리스트에 저만의(당연하겠죠... 이따위를 누가..ㅋㅋ) 스타일을 만들어 봤습니다.

.area_content ul
{
margin-top:10px;
margin-left:10px;
background-color:#eeeeee;
padding:10px 0px 10px 10px;
}

.area_content ol
{
margin-top:10px;
margin-left:10px;
background-color:#eeeeee;
padding:10px 0px 10px 10px;
}

.area_content ul li {
font-weight:bold;
}

.area_content ol li {
font-weight:bold;
}

 

마찬가지로 h3, h5에도 스타일을 만들어 보고요...

.area_content h3 {font-size:1.7em; text-align:center; color:red;}
.area_content h5 {font-size:1.4em; text-align:center; color:rgba(0,3,119,0.91);}

 

외부 파일로 css를 만들어 놓았기 때문에 원하면 언제든 스타일을 수정해서 모든 글에 한번에 적용할 수 있어서 좋네요.

사실 CSS 라는 것 자체도 그냥 수박 겉핧기 식으로 이상하게 알고 있어서 제대로 써먹지는 못하고 있는 듯.. 쩝..

자신만의 스타일을 만들어 보아요~~~~