오페라 브라우저의 활용 팁(I) 소스보기로 편집까지

[목차(도우미)]
오페라 브라우저(Opera Browser)는 다양하고 재미있는 기능을 가지고 있다. 물론 내가 좋아하는 이유도 그중 마음에 드는 기능이 있기 때문이다. 그중 깜찍한 기능이 있는데 편집기능이다.

오페라는 소스보기로 변경을 저장한다

오페라(Opera) 웹브라우저는 어느 버전 부터 인지 잘 기억하지 못하지만 소스보기 창이 탭으로 열리면서 "저장"과 "변경적용" 버튼이 생겼다. 네트위크상의 페이지를 볼 때는 별로 쓸일이 없겠지만 컴퓨터 상의 HTML 문서를 열어 두고 소스보기 창에서 수정을 할 수 있다. 그런 다음 "변경 저장"을 하면 열어둔 HTML문서도 변경된 상태로 갱신된다. 인터넷상의 HTML파일의 소스보기를 통해서 "변경 적용"을 하면 오페라 브라우저에서만이 느낄 수 있는 매직을 경험할 수 있다. 즉 인터넷 문서가 메모리상에서 변경되어 표시된다.

그럼 화면을 보면서 설명해 봅시다. 먼저 검색 엔진을 써서 보통의 웹페이지를 열어 봅니다.

 


검색결과의 블로그 페이지를 보면 한때는 제 블로그 글이 상단에 다수 차지했는데, 이제는 첫페이지의 하단에 위치하고 있군요.  오른쪽에  보면 검색 추천 블로그라는 글상자가 있는데 여기에 제 블로그가 없지만 "소스보기"와 "변경저장"의 기능을 써서 한번 랭킹 조작을 해봅니다. (이 조작은 설명을 위한 것일뿐 검색 엔진사의 내용이 바뀌는 것은 아닙니다. )
소스보기
  
원래 소스는 이렇게 생겼는데 상위 5개 랭킹을 전부 글자 치환을 해서 변경 저장 버튼을 누르면 어떻게 될까요?
변경적용후

보시다 시피 이렇게 HTML내용이 변경되어 브라우저 상에 표시됩니다.(이것은 이미지 편집이 아니라 브라우저의 표시가 직접 바뀐 것을 화면 갈무리 한 것입니다.)

이런 기능을 어디에 쓰는고?

이런 기능을 어디에 쓰려고 오페라사는 제공했을까? 지금까지 써본 바로는 스타일시트(CSS)를 바꿀 때 편리했다. 블로그의 스타일을 바꾸려면 CSS를 바꿔주어야 하는데 바꿀 때마다 미리보기를 실행하는 것도 번거롭고 시간이 많이 든다. 그럴 때 블로그 페이지를 컴퓨터에 저장해 둔다. 오페라에서 열어 두고 소스보기를 하면 소스, 또는 CSS를 열수 있다. 테스트하려는 부분을 수정하고 변경저장을 하면 순식간에 바뀐다. 몇번의 시행착오를 거치면 마음에 드는 스타일이 얻어진다. 최종 결과를 업로드 하든지 복사해서 붙이면 오프라인 상태에서도 손쉽게 가능하다.

또한 HTML작성의 디버깅이 손쉽게 가능하다. 서기 직원이 작성한 HTML파일이 원하는 대로 표시되지 않는다고 하여 임시로 공개된 파일을 보면서 수정해 줄때 다른 브라우저는 소스를 아무리 고쳐도 제대로 고쳐졌는지를 확인하려면 서버에 올려서 확인할 수 밖에 없지만 오페라 브라우저를 통해서 보면 서버의 파일이 바뀌지 않고 충분히 PC에서 확인을 해보고 최종본을 서버에 올릴 수 있다.

이런 방법을 읽고 있는 독자중에는 자바스크립트, CSS의 디버깅에 아이디어가 떠오를 것이다. 자바스크립트를 디버깅하기 위해서 서버에 올리지 않고도 로컬상에서 충분히 디버깅할 수 있는 것이다. 

관련된 내 블로그:
[경험과 리뷰] - 내가 오페라 인터넷 브라우저를 쓰는 이유

관련 블로그에 관하여

내가 오페라 브라우저를 거의 10년 가까이 쓰고 있다고 생각하지만 블로그를 시작한 것이 얼마 안되어 글을 올리지 못했다. 그런데 오페라 인터넷 브라우저에 관한 상세한 글을 공개한 블로그를 발견하고서 매우 감탄하였다. 앞으로도 나만의 글을 공개할 생각이지만 굳이 다른 블로거에 의해 공개된 글을 중복하여 올리는 것은 무의미하기 때문에 이하에 참조를 메모해둔다. 그리고 오페라관련 팁등의 웹자료는 [내가 오페라 인터넷 브라우저를 쓰는 이유]의 댓글에 통합해 두고  있다.

관련 URL: http://mihuwang.tistory.com/176 --- 오페라의 세세한 기능을 연재하고 있는 글

by 금메달.아빠 on 2010.06.07 00:20 주요 단어: , , , ,
  • BlogIcon 미후왕 2010.07.06 11:55 신고 주소 수정/삭제 답글

    안녕하세요. Kata Pro님 트렉백 따라 들어왔습니다.
    개발자 도구의 소스 보기를 이렇게 활용하시는군요.
    역시 프로와 아마추어의 차이입니다. ^^
    방금 글 내용 보자마자 만져보니 상당히 활용성이 좋습니다.
    앞으로 유용하게 사용하게 될 것 같습니다.
    이런 훌륭한 기능들과 우수성에도 불구하고 마이너인 이유가 몹시 궁금해 집니다.
    하지만 그래서 더 애틋한지도 모르겠습니다. 10년 가까이 오페라를 사용하신
    분이니 자주 들러서 좋은 지식 많이 배워 가겠습니다. ^^
    게다가 제 블로그 소개까지 해 주셔서 감사합니다.
    좋은 하루 보내시길 바랍니다.

    • BlogIcon 금메달.아빠 2010.07.07 00:02 신고 주소 수정/삭제

      미후왕님의 블로그에 가서도 댓글을 남기고 왔습니다. 저야말로 많이 배우겠습니다. 블로그 방문 감사합니다.
      혹시 이미 아셨겠지만, 구독자에 추가하였습니다. 블로그에는 네이버 이웃커넥트 위젯이 안보이지만 링크 부분에 "이웃커넥트"에 가면 알수 있습니다.
      행복한 하루되세요.

  • 지나가다가.. 2011.11.02 11:27 신고 주소 수정/삭제 답글

    그뿐만아니라...
    오페라는 간단한 쿠키수정도 가능하죠
    요긴할수도 위함할수도있는 칼같은 기능이죠

  • BlogIcon 찌쿙 2012.01.22 22:35 신고 주소 수정/삭제 답글

    개발자이신가요?
    정말 너무 많은걸 알고 계시는거같아요 존경해요 ㅜㅜ

체크하면 비공개 댓글이 됩니다