본문 바로가기

html

Learning Node.js # Learning Node.jsServer-Side JavaScript 라 불리우는 Node.js 를 배워봅시다. JavaScript 언어 특성을 server 에 적용하면 무엇이 좋을까나? 무엇이 나쁠 수 있고?간단하게나마 server 에 대해 알고 있어야 이해가 쉬울듯. PHP 같은 것으로라도 간단히 이런것에 대해 조금 이해해 놓는것이? 이거랑은 상관없나? Egoing 님 php 강의에서 server 가 어떤 데이터들을 보내고, client 가 어떤 데이터들을 보내고 받는지 등을 이야기한 동영상이 있었는데... 그것만 보고와서 Node.js 를 공부해도 조금 이해가 편할듯.## PH2016-04-11 : To SEE.2014-05-22 : First posting.## TOC## 장단점Node.js .. 더보기
Vertical center align by CSS in HTML # Vertical center align by CSS in HTMLHTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ)아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음.## TOC## Using fle.. 더보기
HTML CSS composes, and pseudo-element :after, :active:after, and transition # HTML CSS composes, and pseudo-element :after, :active:after, and transition Buttons Add Amount Add Async Add If Odd Images ## Style ```[#pre-code-style-transition.linenums.lang-css] ```/ composes 는 module 단에서만 동작하는듯. ## HTML ```[.linenums.lang-html] Buttons Add Amount Add Async Add If Odd Images ```/ ## RRA https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions .. 더보기
HTML a href tag with onclick return # HTML a href tag with onclick return 가장 간단하게 HTML a (anchor/닻) tag 를 사용하는 방법은 ``` link or #hash text ```/ 와 같다. 그런데 간혹 이 링크를 다르게 처리하고 싶을때도 있다. (페이지 새로고침 없이 ajax 로 처리한다던지, pop-up 을 하고 싶다던지, stopPropagation 을 필요로 한다던지 등.) 이땐 다른 html element 들에서도 사용되는 onclick attribute 를 써주면 되는데, 아래와 같은 것들에는 주의가 필요하다고 한다. JavaScript recommendations It is often the case that an anchor tag is used with the onclick e.. 더보기
HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay) # HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay) 작성중인 글. 이것도 천천히 정리할듯;;; 여러 동영상을 한꺼번에 이어서 재생하거나 반복재생하고 싶어서 정리하는 중. 구현은 Recoeve.net (/user/kipid?cat=[Music/Break]--K-pop) 에 해놨으니 참조하시길. ## PH 2024-01-07 : start, end. ## TOC ## HTML tag HTML5 로 오면서 tag 도 생긴거 같긴한데... 이건 직접 서버를 운영하는 사람만 써먹을 수 있는듯? 동영상을 어딘가에 파일로 올려놔야 하니까;;; 파일 형태로 업로드하고 그냥 link 넣으면 될라나? 사용방법은 참조하시길. 그냥 대충 이런식으로 집어넣으면 됨. Media event 들.. 더보기
Getting html of container including the container itself # Getting html of container including the container itself jQuery 를 이용하거나 그냥 JavaScript 를 이용해서 내부의 html 은 다음과 같이 끄집어낼 수 있다. ```[.lang-js] let containerHTML = $("#container").html(); let containerInnerHTML = $("#container")[0].innerHTML; ```/ ## PH 2024-02-06 : First posting. ## TOC ## 예제 (innerHTML) 아래 html 은 다음과 같다. ```[.lang-html] ```/ 다음과 같은 함수들로 내부 html 을 뽑아와 보자. ```[#pre-code-innerHTML.lang.. 더보기
HTML id 에 한글이나 encodeURIComponent, %, \s, [, ], !, @, #, $, %, ^, &, *, (, ), -, _, +, =, \, /, ?, ~, :, ;, ", ', <, >, ,, . 등 특수문자 (special characters) 들어갈 수 있는지 테스트 해보기 # HTML id 에 한글이나 encodeURIComponent, %, \s, [, ], !, @, #, $, %, ^, &, *, (, ), -, _, +, =, \, /, ?, ~, :, ;, ", ', , ,, . 등 특수문자 (special characters) 들어갈 수 있는지 테스트 해보기 ## PH 2023-10-29 : First posting. (No double enter is allowed in codeprint>script.) ## TOC ## 한글 id test Id which starts with 한글. Id which starts with English+한글 Id which starts with English+한글 Id which starts with English+한글1 Id.. 더보기
Neighbors points plot plan (svg) # Neighbors points plot plan (svg) 이웃들의 점수들을 similarity weight 줘서 그려주는 법 svg 로 공부하는 중. ## PH 2023-09-09: First posting. ## RRA www.w3schools.com :: SVG Tutorial Google docu - spreadsheet :: Recos and Statistics ## TOC ## Plot Example 각종 numbers 출처: . 100/23=4.347826087 4.347826087*3=13.04347826 4.347826087*21=91.30434783 0 1 2 3 4 5 6 7 8 9 10 52.38 ```[.linenums.lang-html] 0 1 2 3 4 5 6 7 8 9 1.. 더보기
Learning Vert.x # Learning Vert.x Vert.x 를 배워봅시다. (version 3.0.0 이 나오면서 뭔가 많이 바뀐듯?) 가장 비슷한 server-side 언어가 node.js 일듯? Vert.x 자체가 node.js 로부터 영향을 받은 프로젝트이기 때문에 node.js 의 많은 장점들을 가져와서 구현했을듯. JVM (Java Vertual Machine) 에서 돌아가기 때문에 "Java, JavaScript, Python, Groovy, Scala" 등 node.js 보다 다양한 언어가 지원된다고. 이런걸 polyglot (여러 언어를 말하는) 특성이라고 하는듯. 그래도 기본적으로 Java 로 돌아가는 놈이라 다른언어로 작성했을때도 vertx 의 모든 기능 및 장점을 사용할 수 있을지는 잘 모르겠음. .. 더보기
HTML docuK format ver. 2.1, short copiable version (2023-05-30) HTML docuK format ver. 2.1 short copiable version (2014-06-25) 개인적으로 만들고 있는 LaTeX 비슷한 형태의 HTML document format + JavaScript. 이름은 그냥 docuK로 'document designed by kipid'란 뜻. When you write the HTML document including docuK document also, using good editors such as Sublime Text editor with Emmet (ex-Zen Coding) package installed is highly recommended. Try useful shortkeys 'Ctrl+D' (Multiple Selecti.. 더보기
Learning PHP # Learning PHP PHP (PHP Hypertext Preprocessor, though originally it was Personal Home Page Tools) 를 배워봅시다. 꽤나 역사가 있는 언어인만큼 (since 1995) tutorial page들도 많고, 잘 정립되어 있는듯. ## TOC ## RRA Official PHP.net (PHP Hypertext Preprocessor); and PHP Manual Tutorials Open Tutorials.org - PHP 기본 수업; and PHP 고급 수업; and PHP 소셜 프로그래밍 w3 Schools.com - PHP Tutorial Competition with other server-side languages Tech.. 더보기
티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리에 단축키가 있다는걸 최근에야 깨달음;;; 티스토리 단축키 설명은 sidebar에도 표시해 놨음. Posting History 2014-06-20: First Posting. Table of Contents 티스토리 기본 단축키 티스토리 기본 단축키 Q: 관리자 (Admin) A: 이전 글 S: 다음 글 Z: 최근에 올라온 글 X: 최근에 달린 댓글 C: 최근에 받은 트랙백 개인적으로 추가한 단축키 D: Previous Section F: Forward Section L: To the [Lists] 글쓰기에 들어가면 에디터에도 단축키들이 많은것 같지만, 난 HTML로 쓰는 경우가 많아서 이것 관련 정리는 패스. 단축키 추가/수정하기 단축키를 추가하거.. 더보기

티스토리툴바