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 | 정찬명 | 댓글: 20개 |
트랙백URI - http://naradesign.net/wp/2012/02/22/1754/trackback/

20개의 댓글이 있습니다.

  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

댓글 쓰기

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

필수 아님

필수 아님