이제는 아래와 같이 해서 반응형이 안 되고 http://namsieon.com/1624하면 반응형이 된다고 합니다. 그러니 아래 글을 읽을 필요 없습니다. 읽는 것은 말리지는 않겠습니다.


 

아래에서 보는 것이 티스토리 블로그에 설치할 수 있어서 볼 수 있는 페이스북 댓글창이다. 아래와 같은 것은 이 블로그에도 설치됐다. 그런데 이 페이스북 댓글창을 일반 스킨을 적용한 블로그에서는 아무런 설정 없이 그대로 설치하면 된다. 그러니 반응형 블로그에서도 일반 블로그에서처럼 설치하면 된다고 생각하게 된다. 그러나 반응형 블로그에서는 그대로 설치하면 반응형이 안 되고 무엇을 해주어야 한다. 이 글에서는 그것에 대해 설명한다.



그러면 위와 같은 것을 이 블로그처럼 일반 블로그가 아닌 반응형에서 반응형이 되도록 하는 것은 간단하다. 아래 첨부한 소스를 블로그의 관리로 들어가서 HTML/CSS 편집를 클릭한 후 아래 그림처럼 style.css에 삽입하면 된다. 


페이스북댓글창 반응형 소스.txt



그러면 페이스북 댓글창은 반응형이 된다. 직접 보기 위해서 http://dpug.tistory.com를 보기 바란다. 그 블로그는 티스토리로 반응형이다.  여담으로 티스토리 블로그에 기본으로 있는 댓글,LiveRe(라이브리)와 Disqus(디스커스) 등은 따로 설정할 필요없는 반응형이다. 블로그를 반응형으로 만든다고 모든 것이 반응형이 되는 것이 아니라는 것을 알았으면 한다. 위와 같이 설정해야 하는 것도 있다. 


예로 아래는 유튜브 동영상인데 PC 페이지에서 반응형이 되려면 style.css에 iframe { max-width:100%; } 를 삽입해야 하는 귀찮음이 있다. 이렇듯 블로그를 반응형으로 한다는 것은 여러 모로 귀찮은 것이 있다.

예전에는 iframe { max-width:100%; }를 했지만 이제는 아래 class="vid"라는 것을 더해 완벽한 반응형이 되게 했다.



위에서 보았던 페이스북 댓글창은 네이버나 다음 블로그에서는 설치할 수 없으니 설치하려 노력하면 헛고생이라는 사실을 알기 바란다. 전에도 말했지만 이런 자유성때문에 티스토리 블로그를 하는 것이다.

약도 문자


'정보' 관련된 글

  1. BlogIcon Hansik's Drink 2014.01.15 09:57 신고  댓글주소  수정/삭제  댓글쓰기

    요렇게 소개해주면 참 쉽게 가능한데 말이죠~ ^^
    잘 알아 갑니다~~

  2. BlogIcon 작가 남시언 2014.01.15 10:29 신고  댓글주소  수정/삭제  댓글쓰기

    관련 글이 있어 트랙백 날리고 갑니다.^^

  3. BlogIcon 누에고치 2014.01.16 12:20 신고  댓글주소  수정/삭제  댓글쓰기

    뭔가 '반응형'이라 하면 어려운 기술 같은데 width:100%만 해도 일종의 반응형 스킨이네요.. ^^

    • BlogIcon . 백전백승 2014.01.16 16:47 신고  댓글주소  수정/삭제

      누에고치님 말에 100% 동의하지 못하겠는데요. 비반응형을 접하다 반응형을 접하는 사람에게는 반응형이라는 것이 골치아플 것 같아서요. :)

    • BlogIcon 누에고치 2014.01.17 11:46 신고  댓글주소  수정/삭제

      폭에따라서 변하는 것이 반응형 아닌가요? 죄송합니다 제가 반응형 개념이 부족하거든요..

    • BlogIcon . 백전백승 2014.01.17 14:17 신고  댓글주소  수정/삭제

      전 좀 다르게 보거든요. 반응형은 폭보다는 최적화라는 개념으로 생각하거든요. 예로 스마트폰에서 반응형 웹사이트를 본다면 폭도 줄어들고 글자도 스마트폰에 맞게 커지고요. 반응형을 폭보다는 최적화된다는 개념으로 보면 좋을 것 같아요.
      ps. 저도 반응형에 대한 개념이 많이 부족합니다.

    • BlogIcon 누에고치 2014.01.17 16:34 신고  댓글주소  수정/삭제

      아.. 그렇군요 이글의 경우엔 폭만 다루고 있어서 제가 오해한것 같습니다. 다른글들도 좀 봐야겠어요 :)

    • BlogIcon . 백전백승 2014.01.17 19:34 신고  댓글주소  수정/삭제

      누구나 위 글만 보면 반응형 웹디자인이 폭에 국한된 것이라 이해하게 될 것입니다. 저도 그럴 것 같습니다. 그러나 아래 글을 본다면 아니라는 것을 이해할 수 있을 것입니다. 아래 글은 폭만 아니라 메뉴,높이,글자크기 등 최적화에 대한 글이거든요.
      http://min-blog.tistory.com/1334

  4. BlogIcon 오함마 2014.06.14 20:45 신고  댓글주소  수정/삭제  댓글쓰기

    PC에서는 유튜브 동영상이 잘 조절이 되는데 막상 모바일에선 그렇지가 않네요. ㅠㅠ

    • BlogIcon . 백전백승 2014.06.15 09:14 신고  댓글주소  수정/삭제

      티스토리 모바일 페이지 CSS를 수정할 수 있으면 좋겠지만 그럴 수 없는 것이 안타깝습니다. 그러니 모바일웹 스킨을 사용하지 마시기 바랍니다.

      다음 앱으로 보니 반응형 스킨을 사용하면서 모바일웹 스킨을 사용하시네요. 모바일웹 스킨을 사용하지 않기 위해서는 관리 > 꾸미기 : 모바일웹 스킨 >모바일웹 스킨을 OFF하면 됩니다. 단 모바일웹 스킨을 사용하지 않으면 모바일 관리나 글쓰기는 안 됩니다. 여하튼 티스토리에서는 반응형에 문제가 많습니다.

    • BlogIcon 오함마 2014.06.15 11:16 신고  댓글주소  수정/삭제

      아, 지금 대표블로그말고 http://emocore.tistory.com/ 블로그를 사용중이거든요. 위 블로그는 당연 모바일 웹스킨 OFF 설정을 해놓았구요. 현재 사용중인 스킨 말고도 패스트부트,스켈레톤등등을 사용해보았지만 똑같더군요.

      반면에 모바일 웹스킨에서는 폭에 맞게 설정이 되는거같더라고요.ㅠㅠ

    • BlogIcon . 백전백승 2014.06.15 12:40 신고  댓글주소  수정/삭제

      그것에 대해서는 저도 모릅니다. PC 페이지와 모바일 페이지에 유튜브 동영상이 반응형 적용 관계는 정확하지는 않지만 부트스트랩과 관련이 있나 봅니다.

      참고로 패스트부트, 스켈레톤, 지금 사용하시는 스킨도 부트스트랩으로 만들었는데 티스토리 모바일웹 스킨은 부트스트랩과 상관없거든요.
      PS. 티스토리에서 반응형을 구현하는데 골치 아픕니다.