간단한 HTML 코드를 이용해서 브라우저에 오프라인 메모장을 만들 수 있다. 이 방법은 웹 페이지의 어느 부분이나 텍스트 편집을 위한 인터렉티브 영역으로 바꿀 수 있는 ‘콘텐츠 편집이 가능한’ HTML의 특징을 활용한 것으로, 구글 크롬, 모질라 파이어폭스, 오페라에서 이용할 수 있다.
먼저 앞서 언급한 브라우저 중 하나에서 빈 탭을 연다. 그리고 아래의 HTML 코드를 복사한다. 사실, 온라인에는 HTML 메모장 코드가 존재하지만, 이 코드가 가장 잘 작동한다. 이 HTML 코드는 런던의 웹 디자이너이자 개발자인 마이크 프란시스가 지난 5월 말에 트위터에 올린 것이다.
data:text/html, <body contenteditable style="font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;">
이 코드를 복사한 다음, 새 브라우저 탭에 이를 붙여넣고, 엔터를 누른다.
메모 저장하기
이 방법의 단점은 브라우저 전체나 메모 탭을 닫을 때마다 메모 내용이 사라진다는 것이다. 그래서 이 방법은 저장할 필요가 없는 메모를 할 때 유용하다. 예를 들어 필자는 모아둘 필요가 없는 오늘의 할 일 목록을 적을 때 사용한다.
하지만 메모를 저장하고 싶다면, 몇 가지 방법을 이용할 수 있다. 먼저 모든 브라우저는 해당 메모를 HTML 문서로 저장하도록 지원한다. 크롬에서는 오른쪽 상단의 메뉴 아이콘(가로줄 3개 모양)을 클릭한 다음, ‘페이지를 다른이름으로 저장’을 선택하면 된다. 원하는 파일이름을 넣고 나중에 메모를 브라우저에서 열어 볼 수 있다.
또는, 메모 내용을 일반 메모장을 열어서 복사/붙여넣기를 하고 저장할 수도 있다.
파이어폭스의 경우엔 탭을 텍스트로 저장하는 기능을 보유하고 있어서, 저장을 목적으로 할 때에는 가장 좋은 브라우저가 될 것이다. 윈도우 8.1에서 파이어폭스 29.0.1을 구동하는 경우에, 파이어폭스의 메뉴 아이콘을 클릭하고, ‘페이지 저장’을 선택한다.
탐색기 창이 열리면, 파일 형식의 드롭다운 메뉴에서 ‘텍스트 파일’을 선택한다. 다음에 해당 메모를 열 때에는 일반 메모장에서 열 수 있다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<iframe name="TextBody" id="TextBody" style="border:1px solid #f00; width:700px; height:300px;"></iframe>
<script type="text/javascript">
frames.TextBody.document.designMode="On";
</script>
</body>
</html>
위의 내용을 test.html로 저장하신 후 브라우저로 열면 웹에디터가 됩니다.
파일로 저장은 안 됩니다만...