컴퓨터를 사용하다가 메모할 내용이 있다면 윈도우에 기본적으로 설치되어있는 메모장을 많이 사용합니다
이 메모를 현재 사용 중인 브라우저에서도 할 수 있다는 사실을 알고 계신가요??
크롬을 메모장으로 사용하기
현재 사용하고 있는 크롬, 파이어폭스 등 다양한 브라우저에서 사용 가능하며 단 한 줄의 주소만 입력하면 됩니다
data:text/html, <html contenteditable>
주소를 붙여 넣은 뒤에는 원하는 내용을 입력하기만 하면 됩니다
해당 기능은 모바일 브라우저에서도 사용이 가능합니다
작동원리
일반적으로 사용자는 HTML요소를 편집하거나 변경할 수 없습니다
하지만 data:text/html, '안녕하세요'와 같이 입력 후 이동하면 브라우저에서 안녕하세요 라는 텍스트가 출력됩니다
이게 가능한 이유는 contentEditable이라는 HTML5 기능을 사용하기 때문입니다 contentEditable은 HTML 요소를 수정할 수 있도록 만들어주는 속성입니다
파일 저장하기
크롬 메모장에 내용을 전부 입력 후 ctrl+s 단축키를 입력하면 입력한 내용을 저장할 수 있습니다
저장된 파일을 열어보면 html 파일 형식으로 저장되며 기본 파일 이름은 dataurl이라고 설정되어있습니다
저장된 파일을 열어보면 내용만 저장되는 게 아닌 html의 모든 요소들이 포함되어 저장되어있습니다
파일 깔끔하게 저장하는 방법
그래서 불필요한 요소는 제거하고 내가 작성한 내용만 원하는 이름으로 txt로 저장할 순 없을까? 싶어서 구글링을 통해 직접 만들어봤습니다
위에 접속하셔서 내용을 전부 복사한 뒤에 브라우저에 입력 후 들어가 주세요
해당 코드로 이동된 메모장 페이지에서 내용을 작성 후에 위에 작은 텍스트 박스에 저장될 이름을 입력 후 save버튼을 클릭하면 지정된 이름으로 txt 파일 형식으로 저장됩니다
참고자료
'프로그래밍 > 코딩 정보' 카테고리의 다른 글
특수 영어문자, 유니코드 공백 문자, 카릴문자, 타자크어 (0) | 2024.02.18 |
---|---|
VS Code 파이썬 자동완성 설정 방법 (2) | 2023.01.16 |
소스코드를 아름다운 이미지로 만들어주는 사이트 | 코드블록 스타일 (0) | 2022.10.25 |
설치없이 바로 사용가능한 온라인 컴파일러 TOP3 (C,Python,Java,C#등) (3) | 2022.09.27 |
비주얼스튜디오 NuGet 무한 정보 검색 중 해결방법 (1) | 2020.12.29 |
브랜드 이름을 지어주는 네이밍 사이트 (4) | 2020.11.30 |
앱인벤터(App Inventor) - 에뮬레이터에서 앱 실행하는법 (3) | 2020.09.01 |