컴퓨터를 사용하다가 메모할 내용이 있다면 윈도우에 기본적으로 설치되어있는 메모장을 많이 사용합니다
이 메모를 현재 사용 중인 브라우저에서도 할 수 있다는 사실을 알고 계신가요??
크롬을 메모장으로 사용하기
현재 사용하고 있는 크롬, 파이어폭스 등 다양한 브라우저에서 사용 가능하며 단 한 줄의 주소만 입력하면 됩니다
data:text/html, <html contenteditable>
주소를 붙여 넣은 뒤에는 원하는 내용을 입력하기만 하면 됩니다
해당 기능은 모바일 브라우저에서도 사용이 가능합니다
작동원리
일반적으로 사용자는 HTML요소를 편집하거나 변경할 수 없습니다
하지만 data:text/html, '안녕하세요'와 같이 입력 후 이동하면 브라우저에서 안녕하세요 라는 텍스트가 출력됩니다
이게 가능한 이유는 contentEditable이라는 HTML5 기능을 사용하기 때문입니다 contentEditable은 HTML 요소를 수정할 수 있도록 만들어주는 속성입니다
파일 저장하기
크롬 메모장에 내용을 전부 입력 후 ctrl+s 단축키를 입력하면 입력한 내용을 저장할 수 있습니다
저장된 파일을 열어보면 html 파일 형식으로 저장되며 기본 파일 이름은 dataurl이라고 설정되어있습니다
저장된 파일을 열어보면 내용만 저장되는 게 아닌 html의 모든 요소들이 포함되어 저장되어있습니다
파일 깔끔하게 저장하는 방법
그래서 불필요한 요소는 제거하고 내가 작성한 내용만 원하는 이름으로 txt로 저장할 순 없을까? 싶어서 구글링을 통해 직접 만들어봤습니다
GitHub - Blue-B/Browser-Notepad
Contribute to Blue-B/Browser-Notepad development by creating an account on GitHub.
github.com
위에 접속하셔서 내용을 전부 복사한 뒤에 브라우저에 입력 후 들어가 주세요
해당 코드로 이동된 메모장 페이지에서 내용을 작성 후에 위에 작은 텍스트 박스에 저장될 이름을 입력 후 save버튼을 클릭하면 지정된 이름으로 txt 파일 형식으로 저장됩니다
참고자료
Convert your Browser into a Notepad with HTML5 contenteditable Attribute
We all use a browser for browsing our favorite websites. However, now you can convert any modern browser into a notepad. Moreover, it seems the days are not far when it will become an ideal choice for seasoned bloggers and writers to use it as a tool for w
www.encodedna.com
HTML Global contenteditable Attribute
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML contenteditable Attribute
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
[javascript] input text값 가져오기, 인풋값 가져오기, input 미리보기 기능
- html 기본적인 text타입의 input태그를 만든다 placeholder를 이용하면 미리보기기능을 넣을 수 있다 - script var anText_sub1 = document.getElementById('info').value; 이처럼 id값을 이용하여 input..
orange056.tistory.com
[javascript] data : URI를 사용할 때 제안 된 파일 이름을 지정하는 방법이 있습니까? - 리뷰나라
예를 들어 링크를 따라 가면 data:application/octet-stream;base64,SGVsbG8= 브라우저는 하이퍼 링크 자체에서 base64로 보관 된 데이터로 구성된 파일을 다운로드하라는 메시지를 표시합니다. 마크 업에서 기
daplus.net
One line browser notepad (Example)
A protip by jjperezaguinaga about browser, html5, and notepad.
coderwall.com
TextEditor Webpage with Save - Pastebin.com
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
pastebin.com