kipid's blog

# HTML에서 여러가지 글꼴, 글씨체, 폰트, Font, Font-family, Font-style testing.## PH2026-03-17 : Updated to SEE.## TOC## Which font-size is the best among "px", "mm", "pt", "em", "%"아래 div를 감싸고 있는 parent div의 font-size를 10px로 해놨음. (style="font:10px/1.6 '맑은 고딕'") 굳이 10px로 정한 이유는 child div들(+다른 child tag들)의 font-size를 em(혹은 %)로 표시할거라서 계산 상 편의를 위함임. 보통 em을 쓰는 것이 권장되는 방법이라고 함. 즉 font-size를 정할 때 (px, cm/mm, pt)보다 ..

# 로고 QR (Quick Response : 빠른 응답) code 생성기 :: (Logo QR (Quick Response) code generator)잘 사용하셨다면 광고 클릭 한번씩만 부탁드립니다 ^^.연결할 주소 (URL) :: 이미 쓰여져 있는 "https://" 를 지우지 않고 붙여넣기 (paste, Ctrl+V) 하셔도 자동으로 앞의 "https://" 가 지워지도록 똑똑하게 디자인 되어 있습니다.중앙 로고 선택 (JPG, PNG)QR 코드 생성하기이미지로 다운로드* 로고 크기는 QR 코드의 약 20% 크기로 자동 조정됩니다.* 너무 복잡한 로고는 인식률을 떨어뜨릴 수 있습니다.

# 인터넷 HTML/Web 에서 코드 예쁘게 출력하기 - prism.js (Code prettifier | Syntax Highlighter)Google code prettify 가 유지보수가 더이상 안되어서 prism.js 로 갈아탐.docuK SEE (Super Easy Edit) pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial). 에 적용시켜 놓음.## PH2025-07-05 : First posting.## TOC## 사용법 : CSS and js to be loaded아래와 같이 CSS, js 파일들을 load 해주고, script 를 제일 아래와 같이 작성해 주면 됨. (설정이 ..

# LaTeX/Special Characters## TOC## Special characters\check{I} : \check{I}\acute{J} : \acute{J}\grave{K} : \grave{K}\vec{u}, \vec{AB} : \vec{u}, \vec{AB}\overrightarrow{u}, \overrightarrow{AB} : \overrightarrow{u}, \overrightarrow{AB}\bar{z} : \bar{z}\hat{x} : \hat{x}\tilde{x} : \tilde{x}\dot{x}, \ddot{x}, \dddot{x} : \dot{x}, \ddot{x}, \dddot{x}\mathring{A} : \mathring{A}## Math mode accents\ac..

# 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..

# 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)개인적으로 만들고 있는 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 (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..

# Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chainingWeb browser 에서 쓰이는, "Object-based based on prototypes" 특성을 갖는 client-side 프로그래밍 언어인 JavaScript를 배워 봅시다. 여기는 제가 헷갈렸던 부분만 조금 정리.## PH2017-08-14: 코드 스타일만 좀 정리. To SEE.2014-06-13: docuK upgrade.2014-05-21: First Posting.## TOC## Making an instance from a constructor function..

# React 를 배워보자. (Learning React) with TypeScript and esbuild bundling## PH2024-08-28 : First posting.## TOC## Initiate React AppBundler 로는 Tree shaking 과 multi threading 을 지원해서 가장 빠르고 좋다는 esbuild 를 사용합시다. ```mkdir hello_reactcd hello_reactnpm init react-app .npm run startnpm install --save-exact --save-dev esbuildnpm audit fix --force// audit 뜻 : 1.감사 2.단속 3.청강 4.세무조사npm install --save-dev @babe..

# Rotating circles using CSS (Spinner, @keyframes, @-moz-keyframes, @-webkit-keyframes)로딩 오래걸릴때 로딩중 알려주는 rotating circles 구현해 봅시다.## PH2023-09-10 : First posting.## TOC## Rotating circles```[.linenums.lang-html]```/## RRAcodepen.io :: Rotate Circle using CSS

# 말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기다음과 같은 , 아랫쪽 말풍선 만드는 법을 구현해서 SEE (Super Easy Edit) of docuK 를 구현했었는데, 이런 말풍선을 어떻게 만들 수 있는지 정리하고 공유하기 위해 포스팅.## PH2024-08-26 : First posting.## TOC## 말풍선 만들기## RRApure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Docume..