반응형 웹은 어떤 기기에서도 최적의 화면을 보여주는 것입니다. 더 깊게 말하면 기기의 해상도에 상관없이 최적의 화면을 보여줍니다. 이 블로그는 반응형이 아니라 스마트폰에서 아래 그림처럼 보여줍니다. 보듯이 스마트폰에 최적화된 화면이 아닙니다. PC에 최적의 화면을 스마트폰에 축소해서 눈이 아픕니다.예를 반응형 티스토리 블로그를 들도록 해보겠습니다.비반응형에서는 PC(컴퓨터)의 11280×800 해상도에서http://learn7.tistory.com/를 본다면 아래처럼 보일 것입니다. 위와 같이 글자가 작고 PC에 최적화된 화면이라 다른 점이 없습니다. 아래 그림은 스마트폰에서 본 것이 아니라 PC에서 본 것이고 아래 그림 이후가 4.3인치(베가레이서)스마트폰에서 본 그림입니다. 요즘 나오는 대부분이 폰은 5인치가 넘을 것입니다.그러나 위를 반응형으로 만들면 ..

제가 모바일기기인 스마트폰으로 많이 접속한다는 것을 생각하면 사진을 저장할 곳은 PC와 모바일로 사진을 올리고 볼 수있는 플리커(Flickr)가 좋을 것 같습니다. 사진은 플리커같고동영상인 경우는 유튜브(YouTube)같습니다. 아래 그림은 저의 스마트폰에 설치된플리커와 유튜브 앱입니다. 유튜브의 경우는 언론에서 많이 나와 알 것이고 플리커는 낯설 것인데 사진을 저장하는 공유하는 곳이고 야후가 운영합니다. 두군데 모두 PC(컴퓨터)와 모바일(스마트폰,태블릿 등)에서 모두 접근이 가능합니다.아래에서 플리커와 유튜브가 사진과 동영상 올리기에 적절한지 알아보겠습니다. 아래를 보고서 플리커와 유튜브를 선택하세요.플리커야후! 코리아가 한국에서 철수하기 전에는Play 스토어에서 플리커 앱을 받아 설치했었습니다. 절수후 저의 스마트폰에서 ..

PC(컴퓨터)에 최적화된 블로그과 아닌스마트폰과 태블릿PC에 적절한 블로그를 선택하라면 블로그는 아래와 같다고 생각합니다. 요즘에는 PC만큼 스마트폰이나 태블릿PC로 블로그에 접속하는 경우가 많아지니 스마트폰이나 태블릿PC에 적절한 블로그를 선택하는 것도 무시할 수 없을 것입니다. 그래서 스마트폰과 태블릿PC에 적절한 블로그가 무엇인지 제 생각을 몇자 적어 보겠습니다. 참고로 여기에서 말하는 태블릿PC는 아이패드,갤럭시노트,갤럭시탭,넥서스 등을 말하는 것입니다. 그럼 시작하겠습니다. 티스토리 블로그 티스토리 블로그의 경우는 아래 그림처럼 모바일웹 스킨 설정을 OFF로 한다면 스마트폰에서 모바일페이지가 아닌 PC 페이지로 접속하게 된다. 그러면티스토리에서 제공한 모바일스킨이 아닌 PC에 적용된 스킨이 그대로 보입니다. 그..

저는 전에 스킨을 만들 때 티스토리에서 제공한 스킨에서 아래 그림의 빨간색 사각형의 스킨에서 기초로 합니다. 그 스킨을 블로그에 적용해서HTML/CSS 페이지의 skin.html은 그냥 놔두고 style.css를 빈공간이 되게 모두 지우고 어떤 부분은 어떻게 제어되는지 봅니다. 그래서 그 스킨의 style.css의 카테고리,댓글, 방명록 등이 어떻게 제어되는지알게 되어 http://learn7.tistory.com처럼 만들었습니다. 단지 티스토리에서 제공하는 스킨가이드 설명만 보고서 스킨을 만들고자 한다면 만들기 어렵다고 생각합니다. 그렇게 해서 스킨을 만들 때 알아낸 것이 있으면 다음에 잊지 않기 위해서 style.css에 아래와 같이 주석을 넣으면서 css를 만들고 있습니다. css에서 주석은 /* 들어갈 말 */이고 HTML에서는 입니다. 주석을 넣으면 알기 쉽다는 장점이 있으나 파일이 커지는 ..

예전에 티스토리가 제공하거나티스토리 블로거가 배포한 스킨에서 사이드바 여러 개 있을 때 어떻게 여러 개 있는 것에 대해 확실히 이해를 못 했습니다. 그러나 이제는 확실히 이해하게 됐습니다. 티스토리 블로그의 치환자중에~이 사이드바 영역에 관련된 것인데 스킨에 사이드바를 만들어주고 싶다면 이 치환자를 써주면 된다는 것을 알았습니다. http://learn7.tistory.com은 제가 반응형 블로그를 만들면서 스킨 공부를 하고 있는데 아래처럼 4개의 사이드바를 만들었습니다.여담으로 이 블로그에서 실험하면 블로그를 망치므로 여기서는 실험하지 않습니다. 참고로 이 블로그는 사이드바 치환자로 만든 것은 하나입니다. 전에 치환자는 모든 티스토리 블로그에 해당된다고 말했습니다. 티스토리 스킨가이드사이드바 설명에 이 있다고 모든 스킨이 ..

이 블로그의 댓글창은아래 그림을 보듯이 3개입니다. 지금은 두개입니다. 페이스북 댓글창을 쓰지 않아 제거했습니다. 나중에 다시 페이스북 댓글창을 달지 모르겠습니다.그나저나아래 그림의 댓글창이어떻게 동작하는가는 이 블로그 하단에 있으니 직접 해보기 바랍니다. 네이버나 다음 블로그는 이런 것을 할 수 없으니 하지 말기 바랍니다. 각 탭을 클릭하면 그 탭에 있는 댓글창을 이용하여 댓글을 적을수 있습니다. 이 글을 적는 이유가 나중에 제가 이것을 어떻게 했는지 기록으로 남겨 놓을까 해서 적는 것이지 보여주기 위한 강좌가 아니니 저만 알기쉽게 요점만 적겠습니다.아래에서 설명할 것은 강좌가 아니라제가 어떻게 했는지 기록하는 것이라 요점만 적으니 따라 하려면 jQuery,CSS 등을 모르면 굉장히 힘들 것입니다. 골치아프고 싶다면따..

제가 티스토리 스킨을 만들 때 참고한 것은 아래와 같습니다. 먼저 기본적으로 티스토리 스킨의 구조,치환자 등을 알아야 되니 티스토리에서 설명한 티스토리 스킨 가이드인http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin을 봤습니다. 다음으로 아래 그림에 보듯이티스토리에서 제공한 2단스킨에서 인기있는 스킨을 기본으로 해서 HTML,CSS를 기본으로 했습니다. 제가 현재 만들고 있고 적용하는 블로그가 http://learn7.tistory.com인데 아래 스킨을 적용한 블로그와 유사할 것입니다.스킨을 만들 때 그 스킨의 HTML을 그대로 사용하면서 모든 CSS가 아닌 일부 사용했습니다. 이 블로그의 스킨은남의 만든 스킨을 수정사용했고,http://learn7.tistory.com을 부트스트랩(Bootstrap)프레임워크로 직접 스킨을 만들어보고 있으면서 간단히 블로그를 반응형으로 운영하고 있습..

티스토리에는 제한이 전혀 없어 스크립트,CSS 등을 마음대로 쓸 수 있습니다. 우리나라 사람들이 많이 사용하는 익스플로러 낮은 버전에서 보면 엉터리로 나오는 경우가 상당히 많습니다.이 블로그는 jQuery 플러그인과 CSS3를 굉장히 많이 사용하는데 익스플로러 6,7,8,9에서 지원하지 않는 것이 많이 골치아픕니다.골치아픈 익스플로러 6,7,8,9에 대한 얘기는 많이 했으므로 여기에서 줄일까 합니다. 예로 얼마전에 해상도에 따라 변하는 아래와 같은반응형 애드센스를 익스플로러8에서 봤는데 아래 광고가 가로폭이 800보다 큰 화면에서는 갸로폭이728인 광고가나와야 하는데 426인 것이 나오더라고요. 보통 PC에서는 728,태블릿PC에서는 426, 스마트폰에서는 320가 나오는데 말입니다. 광고아래 사진 가로폭이 541이니 자신이 어떤 브라우저를 사용하는지 짐직할 ..