티스토리 블로그 운영 시 참고자료로 올려봅니다.
먼저 전 전문 개발자나 퍼블리셔가 아니기 때문에 더 좋은 방법은 얼마든지 있을겁니다... -_-;
특히나 전 디자인이나 색상등은 원체 꽝이기 때문에 방법론적인 것만 보시면 될 듯 합니다.
(혹시 모르니 먼저 면피부터.. ㅋㅋ)
티스토리 관리자의 html/css 편집에 있는 CSS는 수정을 해봐야 모바일웹인 경우는 아예 불러오지도 않는 것 같더라고요...
그래서 별도의 CSS 파일을 만들어서 글마다 불러올 수 있게 link 태그까지는 삽입을 하였습니다.
이제 이 파일에 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 라는 것 자체도 그냥 수박 겉핧기 식으로 이상하게 알고 있어서 제대로 써먹지는 못하고 있는 듯.. 쩝..
자신만의 스타일을 만들어 보아요~~~~
'개발TIP - DEVELOPMENT' 카테고리의 다른 글
Mysql DB 쿼리 결과를 CSV 파일로 저장하기 (2) | 2014.07.03 |
---|---|
MAC OSX에서 PHP 사용하기 (PHP 실행 안되고 소스만 보일때) (0) | 2014.06.24 |
티스토리 모바일웹 스킨 CSS 적용 (1) | 2014.06.10 |
PHP에서 텍스트 파일 읽어서 Mysql Insert 시 인코딩 문제 해결 (0) | 2014.06.09 |
클라우드 서버 CPU 속도 비교 (0) | 2014.06.08 |