모바일 페이지에 CSS를 적용하기

이제는 아래와 같이 하면 렉시새봄이 적용되지 않습니다.

이 글에서 설명할 것 

티스토리에서 블로그를 하면 모바일 페이지의 CSS를 수정할 수 없다. CSS를 수정할 수 있다는 말은 PC 페이지의 CSS를 수정할 수 잇다는 말이다. 어려운데 쉽게 말하면 모바일웹 스킨을 사용하면 컴퓨터에서 보는 페이지의 CSS는 편집이 가능해도 스마트폰에서 보는 페이지의 CSS는 불가능하다. 그래서 이 글에서 내 블로그에서 적용하는 모바일 페이지 CSS를 사용할 사람에게 어떻게 적용할 것인지 설명하기 위해 적었다. 

적용하기

모바일 페이지에 접속하면 아래와 같이 보인다. 아래 그림을 보듯이 글꼴(폰트)은 렉시새봄 폰트이다. 그리고 아래 그림을 보듯이 목록, 링크, 더보기 등에 CSS로 적용 안됐는데 적용했다. 목록은 적용 안돼고  링크는 검정이고 더보기에 이미지가 없다. 즉 스마트폰으로 자신의 블로그에 접속하면 아래처럼 보이게 된다는 말이다. 참고로 스마트폰이 아닌 컴퓨터로 보고 싶다면 http://min-blog.tistory.com/m에 접속해보기 바라며 아래 그림은 모바일 크롬에서 본 것이니 모든 모바일 브라우저에서 아래와 같이 된다고 생각하지 말았으면 한다.

티스토리에서 모바일 페이지에서 CSS를 편집할 수 없으니 글을 작성할 때마다 CSS를 넣어야 된다. 그러니 아래 파일 안 소스를 아래 그림처럼 글 시작에 삽입하기 바란다. 

모바일CSS.txt

위에서 소개한 CSS는 내 블로그에서 사용하므로 소스가 지저분하니 CSS를 수정하도록 파일을 아래에 올린다. 아래 파일의 용량이 10KB니 소스를 수정하면 10KB이하를 줄일 수 있을 것이다. 그리고 나는 정식으로 웹디자인을 공부하지 않아 CSS가 정확하지 않으니 이해하리라 생각한다.

mobile.css

이런 자유성이 티스토리에서 블로그를 하는 이유 중 하나이기도 하다. 그러나 이런 자유성은 어떤 사람에게는 단점일 것이다. 모든 사람에게 자유로운 것이 좋은 것이 아니다. 

마치면서

티스토리에서는 PC 페이지와는 달리 모바일 페이지에서는 CSS를 수정을 지원하지 않는다. 참고로 아래에서 제공하는 CSS는 내가 이 블로그에서 사용하는 것이다. 그리고 스킨을 변경하지 않는 한 아마 CSS 주소는 이상이 없을 것이다.  이 블로그 스킨을 많이 수정해서 내가 티스토리를 계속하는한 이 블로그의 스킨을 변경하지 않을 것이다.

위에서 말했듯데 일반적으로 PC 페이지는 컴퓨터에서 보는 페이지이고 모바일 페이지는 스마트폰이나 태블릿PC에서 보는 페이지를 말한다. 

끝으로 아래에서 렉시새봄 폰트를 다운로드할 수 있는 곳을 소개하니 관심있으면 다운로드 받기 바란다. 개인에게는 무료 폰트인데 상업적으로 사용 가능한지는 모르겠으니 정확한 사실을 알면 가르쳐 주기 바란다. 렉시테크 홈페이지가 아닌 폰트 사이트에서 개인과 기업에서 자유롭게 사용할 수 있다고 한다. 그러나 렉시테크 홈페이지는 연결이 안돼 정확한 저작권 정보를 구할 수 없으니 기업에서도 자유롭게 사용 가능한지 모르겠으니 주의하기 바란다. 폰트 저작권을 확실히 모르고 사용하면 고소당하니 조심하기 바란다. 무조건 무료라고 사용하면 안 된다. 참고로 아래에서 TTF는 포토샵 등 그래픽 프로그램에서 사용할 수 있는 폰트이다.

• 렉시새봄R 다운로드 : http://kldp.net/projects/linuxlexifont2/download (TTF)
• 렉시새봄R 웹폰트 다운로드 : http://www.cmsfactory.net/node/10036 (EOT,WOFF)
• 렉시굴림 다운로드 : http://kldp.net/projects/linuxlexifont/download (TTF)