NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


iPhone에서 HTML(CSS, JS) 소스 보기.

본문 건너 뛰기

가끔은 아이폰에서 블로깅도 하고 싶고 웹 페이지 소스 코드를 보고 싶을 때가 있습니다. 제가 오늘 그 둘을 모두 해보려고 해요. 몇 글자 쓰지도 않았는데 벌써 손가락에 쥐가 나네요. 아래 코드를 아이폰 사파리에 북마크 해보세요.

javascript:location='http://shauninman.com/vs/?url='+escape(location)

북마클릿은 원래 책갈피 등록이 되지 않기 때문에 아무 주소나 먼저 즐겨찾기에 추가한 다음 등록된 URL을 이 북마클릿 코드로 교체하면 됩니다. 그 다음 소스 보기를 원하는 페이지에서 이 북마클릿을 실행합니다.

스크린샷은 데스크탑에서 넣어야겠네요. 이런 짓을 왜 하냐고 물으신다면 다른 사람의 소스 코드가 미치도록 궁금해서 애달아 그럽니다.

단계1: 북마클릿을 아이폰 사파리 책갈피에 추가

단계2: 소소 보기를 원하는 페이지에 접속

단계3: 책갈피에서 북마클릿 실행

단계4: HTML 소스를 볼 수 있다

단계5: CSS 소스를 볼 수 있다

참고: http://goo.gl/LyRxH

분류: CSS,생활의 발견,웹 표준,자바스크립트 | 2012년 2월 22일, 0:37 | 정찬명 | 댓글: 22개 |
트랙백URI - http://naradesign.net/wp/2012/02/22/1754/trackback/

22개의 댓글이 있습니다.

  1. BNU 댓글:

    사용 할 일은 그리 많지 않지만 http://stevesouders.com/mobileperf/mobileperfbkm.php 이것도 유용합니다.

  2. 정찬명 댓글:

    @BNU
    사용할 일이 생기면 참고할께요. 링크 고맙습니다. ^^

  3. majinidf 댓글:

    저도 아이폰으로 소스를 보고 싶다라고 생각한적이 있어요 ㅋㅋㅋㅋㅋ 좋은 정보 감사합니다.

  4. 동치미 댓글:

    와우. 좋은 정보 감사합니다.~

  5. plaintext 댓글:

    안드로이드도 찾아보고 싶네요..^^

  6. 정찬명 댓글:

    @plaintext
    아이폰과 동일한 방법으로 시도해 보시면 아마 될껍니다. 제가 가진 안드로이드폰(갤러시S2)에서는 잘 되네요. ^^

  7. 녹풍 댓글:

    우와 이거 대박! 저도 이런 걸 찾고 있었어요! ㅋ

  8. 배추장수 댓글:

    왠지 안드로이드도 될 것 같아서 해보니 잘되네요. 사실 얼마전에 어플을 찾아보니 소스보기 어플이 있더라구요. 문제는 소스보기 실행만 하면 강제종료 되는 문제가 있었는데. 이 방법으로 하니 간편하고 좋네요. 대박.

  9. 호이 댓글:

    전 저주소로 저장을 하면 등록이안된다고 나오네요..제가 잘못한건지..
    저도 갤스2인데..ㅠㅠ

  10. 아크몬드 댓글:

    아니… 이런 방법이?? 신기하네요.

  11. 조현진 댓글:

    HTML Viewer라는 아이폰 앱도 있습니다.
    주소 입력을 하면 페이지가 아니라 소스를 보여줍니다.
    무료라서 받아둔 기억이;;

  12. 소림 댓글:

    우앗! 안드로이드 잘되요~오.. 감사합니다.

  13. 꼼순 댓글:

    전 갤스2 쓰는데용.. WebPageSource 라는 앱으로 사용하는데. 괜찮더라구요. ^^

  14. 정찬명 댓글:

    @꼼순
    소개 감사합니다. ^^

  15. 이효리 댓글:

    안녕하세요? 제가 해결하지 못하는 부분이 있어 도움을 부탁드려요…
    현재 prettyPhoto 플러그인으로 iframe 동영상을 팝업형식으로 재생하고 있습니다.
    HTML 소스는 [a herf=”동영상주소” width=”가로” height=”높이” rel=”prettyPhoto[]”]PLAY[/a] 이런식이고요
    PLAY 를 클릭하면 동영상이 재생되는데 rel=”prettyPhoto[]” 라는 요소로 플러그인을 작동시킵니다.
    문제는 저 rel=””값이 HTML5 유효성 검사에 걸리기 때문에 특정 클래스를 정해 주려고 합니다.

    예를 들어 [a href=”동영상주소”…class=”hello”]play[/a] 라고 HTML을 서술하고
    hello 클래스는 rel 값이 항상 prettyPhoto[]가 되게끔 자바스크립트를 만들면 플러그인이 작동하지 않을까요?
    혹시 이게 가능한지 가능하다면 스크립트 소스는 어떻게 표현해야 하는지 부탁드립니다ㅜㅜ;;

  16. 정찬명 댓글:

    @이효리
    HTML5 부터 data- 라는 사용자 정의 속성을 사용할 수 있습니다. class 대신 data 속성을 이용하면 좋습니다. 제가 직접 코드를 작성해 드리지는 않아요.

  17. 머리 댓글:

    고맙습니다 !

  18. 눈팅하는오승환 댓글:

    아 너무 감사합니다~
    봤는데.. 아이폰 화면이 작은게 이럴때 짜증이 나네요..ㅠㅠ

  19. code monkey 댓글:

    @오승한 +

    모바일 코딩을 시작하시려는 다른분들을 위해서.

    저는 아도비 Edge Inspector 베타로 나왔을때부터 사용해 왔는데요,

    http://html.adobe.com/edge/inspect/

    데스트탑에서 소스코드를 확인할 수 있고, 여러가지 좋은 기능들이 있습니다.

    무료입니다.

    또 다른 솔루션은 크롬 UA Spoofer 라는 것 입니다

    https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US

    “이런 짓을 왜 하냐고 물으신다면 다른 사람의 소스 코드가 미치도록 궁금해서 애달아 그럽니다.”

    정찬명님 뿐만 아니라 모든 코더들은 소스코드부터 보고 싶은게 정상이 아닐까 싶은데.. (새로운 사이트를 방문하게 되면 아무런 생각도 없이 F12 키 부터 누르지 않나요? ㅎㅎㅎ)

    쉽고 간편한 방법들이 있어서 알려드립니다. 오늘도 모두 해피 코딩 하세요. :D

  20. 익명 댓글:

    안녕하세요. 오래된 글인데 문의드려도 될지 모르겠네요..
    마지막 5단계에서 css 코드 보는 방법이 안나와있는데 어떻게 봐야 하나요?ㅜㅜ
    원하는 페이지 주소 치니까 html 소스는 바로 보이는데 여기서 어떻게 해야 css가 보이는지 모르겠네요.. 답변 부탁드립니다

  21. 정찬명 댓글:

    @익명
    4단계(HTML 소스 보기) 에서 CSS 파일에 링크가 걸려 있을거예요. 그 링크를 클릭하면 CSS 코드를 확인할 수 있습니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님