본문 바로가기

[IT|Programming]/HTML related

인터넷에서 예쁘게 코드 입력하기 (google code prettify) : > }, { & : & } 같은 것들. 'less than', 'greater than', 'ampersand'의 약자일듯. JavaScript - String - replace(RegExp, txt) method 쓰면 편함. 하지만 여전히 escaping은 미리 신경써줘야 함. script 안에 들어가 있지 않는 한. HTML document가 이상하게 rendering 될수도 있음."># 인터넷에서 예쁘게 코드 입력하기 (Syntax Highlighter - google code prettify)유지 보수가 더이상 안되는 코드라 prism.js 로 갈아탐.뭐 여러가지 js가 있는거 같긴한데 개인적으론 이거 쓰면서 만족하고 있음. Google 직원이 만들었으니 잘 만들었겠지. 뭔가 에.. 더보기
VtoV Back-end 개발자용 과제 테스트 # VtoV Back-end 개발자용 과제 테스트VTOV 백엔드 개발자용 과제 테스트.## TOC##/ 목차는 자동으로 완성됨.## 서울 주차장 정보인증키: 4e4f6764766b6970363174666f6c63 서울시 주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/1000/강남구 주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/5/강남압구정428 공영주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/5/ /1033125미연계중인 공영주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/j.. 더보기
jQuery 분석 (Analysis): jQuery.find([CSS Selector]), jQuery.parents([CSS Selector]), and jQuery.closest([CSS Selector]) # jQuery 분석 (Analysis): jQuery.find([CSS Selector]), jQuery.parents([CSS Selector]), and jQuery.closest([CSS Selector])React 가 도입되면서 거의 사장 싶이 된 jQuery 지만, 그동안 유용하게 써왔던 함수/function 들을 pure JavaScript (Vanilla JavaScript 라고 불렀나 이걸?) 로 어떻게 따라할 수 있을지 정리 해 보려함.## PH2025-07-05 : First posting.## jQuery.find([CSS Selector])```[.lang-js.scrollable]function find( selector, context, results, seed ) { var.. 더보기
Statistics of kipid's blog # Statistics of kipid's bloghttps://kipid.tistory.com/ (kipid's blog in Tistory) 의 방문자 통계입니다. 어떤 글이 제일 많이 읽혔는지도 Sec. 에서 보실 수 있습니다.## PH2023-12-26 : Separate recoeve.net.2023-09-14 : Recoeve.net is added.2023-06-24 : First posting.## TOC## Time conversion```[.lang-js]new Date((new Date().getTime())+9*60*60*1000).toISOString();// Input date and time in text formatlet textDateTime='2023-06-25 12:3.. 더보기
pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial). --> --># pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).The docuK rendered from the current text is being represented.I recommend you to Open pure-SEE-copiable.html and Download pure-SEE-copiable.html (마우스 오른 클릭 -> 다른 이름으로 링크 저장), and copy and paste to new html file, and edit it with referencing and learning the SEE document.## Abstract | Description o.. 더보기
AWS S3 (Simple Storage Service) 공부하기 - Pre-signed URL # AWS S3 (Simple Storage Service) 공부하기 - Pre-signed URL이미지/동영상/파일 등을 업로드하고 다운로드 할 수 있게 도와주는 AWS S3 (Simple Storage Service) 를 배워봅시다.## PH2025-07-06 : First posting.## TOC## S3 이미지/파일 업로드 예제 by edu-jason-kim링크: .env file```[.lang-js]AWS_ACCESS_KEY_ID=...AWS_SECRET_ACCESS_KEY=...AWS_BUCKET_NAME=...```/aws-sdk 설치.```[.lang-sh]npm i aws-sdk```/app.js file```[.lang-js.scrollable]const express = requi.. 더보기
Encode/Unescape and Decode/Escape URI Component # Encode/Unescape and Decode/Escape URI Componenthttp 주소창에 space 나 한글, 특수문자 같은 것들이 낑겨 있을 경우, 여러모로 에러가 날 가능성이 높아져서 보통 브라우저들이 이런 문자들은 '%AB' 같은 8 bit (?) 어쩌구로 변환시켜 버린다. Javascript 에서 기본적으로 이런것들을 처리하는 encodeURIComponent, decodeURIComponent 함수들을 제공한다.뭐 쓰는 사람은 알아서 공부해서 쓸테니... 인터넷 돌아다니다가 이상한 주소가 실제 어떤 주소인지 궁금할때 이용하시라고 (+내가 쓸라고) 만들어 봄.## PH2023-10-25 : Update. m.escapeXXX... added.## TOC## Decode URI Co.. 더보기
HTTP Cookie in Web / HTML / Javascript and Server # HTTP Cookie in Web / HTML / Javascript and Server작성중... (아직 중구난방일 수 있으니 감안하고 보시길...)Client-side (browser) 에 일정 정보를 "key=value" 형태로 저장시켜놓고, 서버에서 사용자를 기억하는데 주로 사용되는 cookie 란 놈이 있다. 매번 browser 에서 server 로 HTTP request 보낼때 이 cookie 란 놈도 항상 같이 보내기 때문에 이런게 가능한 것인데, 보통 request.headers().get("Cookie") 같은 명령어로 server 에서 뽑아낼 수 있다.Server 측에서 주로 사용하는 데이터이긴 하지만, client 측에서도 javascript 를 통해서 접근 가능하기도 해서 XSS.. 더보기
Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. # Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. 쉽게 문서를 작성합시다. 초록 | docuK (문서K) and SEE (엄청 쉬운 편집) 이것은 HTML 문서 편집 형식 중 하나인 문서K 입니다. 자바스크립트, jQuery (쉬운 자바스크립트 프로그래밍을 도와주는 API), MathJax (수식 처리기), google code prettifier (코드 예쁘게 출력해주는 API) 로 처리되는 문서 형식입니다. 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동.. 더보기
Interactive graph and chart in HTML # Interactive graph and chart in HTML (Highcharts.js and Chart.js)HTML 의 canvas tag 배워서 그리는거랑, 이런 open source js 공부해서 적용해서 그리는거랑 그닥 노력대비 효과 보는게 비슷비슷할듯도 한데... 그래도 당장은 js 있는거 써서 그리는게 더 보긴 깔끔하니 배워봅시다.## PH2023-03-10: To SEE.2017-07-31: 더 정리.2014-06-12: docuK upgrade.2014-??-??: First Posting.## TOC## Highcharts.com참조 .### Line Chart - Basic Line Monthly Average Temperature (Source: WorldClimate.com.. 더보기
HTML docuK format ver. 3.1 (2025-04-17) --> -->HTML docuK format ver. 3.1 (2025-04-17)개인적으로 만들고 있는 LaTeX 비슷한 형태의 HTML document format + JavaScript. 이름은 그냥 docuK로 'document designed by kipid'란 뜻.This is an HTML document format named docuK which is rendered by JavaScript, jQuery, MathJax, and google code prettifier. Specific features are changable mode/font, resizable font-size/line-height, table of contents, auto numbering of sections.. 더보기
Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual | Documentation | Tutorial). --> --># Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Documentation | Tutorial). 쉽게 문서를 작성합시다. Download the below file, and learn how to write SEE (Super Easy Edit) of docuK from the file texts. Replacing only ... part, write well-formatted extended-MarkDown documents easily. Abstract | Description of docuK and SEE This is an HTML document format named docuK which is rendered.. 더보기

티스토리툴바