본문 바로가기

[IT/Programming]/HTML related

Learning Play Framework # Learning Play Framework Play도 요즘 주목받는 server-side 언어인듯? 2009년쯤에 만들어졌고 Scala, Java 언어로 짤 수 있고... 좀 공부해봐야 알듯. Vert.x랑 비교해서 어떤게 좋을라나? 국내에는 Play 관련 포스팅이 거의 없는듯도. ## PH 2014-07-29: First posting. ## TOC ## RRA Official Play Framework.com/ Related posts iam1492.tistory.com - Play framework으로 블로그 개발하기 (1) - Starting up the project, 2012-03-02 // 설명 글. 6개의 포스팅이 있음. Outsider's Dev Story - Play framewor.. 더보기
Vert.x 로 https (SSL/TLS) server 만들기 # Vert.x 로 https (SSL/TLS) server 만들기 Vertx 로 secure server 인 https (SSL/TLS) server 를 만들어 봅시다. ## TOC ## keytool .jks 우선 RSA key 를 만들어 줘야 하는데... 명령어는 다음과 같다. 윈도우 cmd 에서 다음과 같은 명령어를 입력하자. ```[.linenums] C:\Recoeve> keytool -genkeypair -alias recoeve.net -keyalg RSA -keysize 2048 -keystore recoeve.jks -validity 3650 // 실행하면 다음과 같이 뜸. Enter keystore password: Re-enter new password: What is your fi.. 더보기
Netflix iframe 으로 퍼오기. # Netflix iframe 으로 퍼오기. Netflix 도 유튜브처럼 iframe 으로 퍼오는게 가능한지 테스트. ```[.lang-html] ```/ iframe 설정 X-Frame-Options set to deny 때문에 안되는듯? 더보기
실시간 HTTP 양방향 통신 (Web socket, Polling, Long-polling, and so on) # 실시간 HTTP 양방향 통신 (Web socket, Polling, Long-polling, and so on) 웹 페이지가 한번 로딩 된 이후에 서버에 새로운 데이터가 들어오거나 기존 데이터에 변화가 일어나서 이미 로딩이 끝난 사용자의 웹페이지에도 무언가 변화를 일으키고 싶을때도 있을텐데 이런걸 가능하게 해주는 방법에 대해 알아보자. "웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 .. 더보기
Specific event handler on HTML element? # Specific event handler on HTML element? How to check whether a specific event handler is bound/asigned to a HTML element or not. (Testing jQuery on/off/trigger) jQuery on/off/trigger 명령어 사용하면서 "이미 element 에 handler 가 붙어있는지 아닌지 어떻게 알아낼 수 있지?" 등이 궁금해서 정리하는 글. ## TOC ## jQuery on/off/trigger HTML element 의 event handler 를 다루는 방법 중 jQuery 의 on/off/trigger 사용하는게 가장 깔끔한 방법이라고 생각. 코드도 이해하기 쉽게 디자인 되어있.. 더보기
Number and Bit operations in JAVA and Javascript # Number and Bit operations in JAVA and Javascript JAVA 에는 unsinged number type 이 따로 없는듯 하고. Javascript 에서는 data type 자체가 없음. Javascript 는 이런 data type 을 알아서 대부분 처리해주기 때문에 편한면이 많긴한데, 실제 operator (+, -, *, /, and bit operations) 들이 어떻게 구체적으로 동작하는지를 알아내기가 힘들다는 점도 있는듯. ## TOC ## string.charCodeAt(index) and String.fromCharCode(int) in Javascript JAVA 에서는 str.codePointAt(int i) and String.valueOf(in.. 더보기
여러가지 글꼴 테스트 (Font test) Font Test in HTML HTML에서 여러가지 Font testing. Table of Contents 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)보다 %나 em을 쓸 것을 더 권장함. Parent의 font-size 기준으로 일관.. 더보기
HTML 가로 Slide 구현하기 # HTML 가로 Slide 구현하기 다음이나 네이버 메인 페이지의 가로 slide 들이랑, 사진 가로 slide 들을 어떻게 구현할 수 있는지 궁금해서 알아보는 중. 똑똑하게 scroll 동작을 인식해서 가로 slide 를 바꿔주는게 필요한듯. CSS 를 어떻게 해줘야 하는지가 조금 헷갈리고... ## TOC ## 사진 가로 slide ## rolling, flexible, counter content 1 content 2 content 3 content 4 prev next current : 2, total : 4 ## limit, page:2, speed:300 content 1 content 2 content 3 content 4 prev next ## multiple, view:3, limit .. 더보기
HTML event handler # HTML event handler HTML event handler. Javascript/jQuery 로 HTML 에서 일어나는 여러가지 event 들을 처리해서 interactive 한 페이지를 만들 수 있음. 그런데 헷갈리는 것들이 많고, 어떤 event 들이 있는지도 다 기억하기 힘들어서 정리하는 중. ## PH 2016-02-01 : Smart phone touch event 관련 정리. 2015-12-10 : 조금 더 정리. 2014? : First posting. ## TOC ## Mouse and Touch event ### On click event (getting event position) ```[#mouse-event-result.scrollable] mouse-event-resu.. 더보기
Javascript namespace or encapsulation Javascript namespace or encapsulation C, C#, C++, JAVA 등 에서의 "namespace, private variable, private method" 같은 효과들을 javascript에서 어떻게 비슷하게나마 구현할 수 있는지에 관한 이야기. (자세한 정리는 에서 보시길. 제대로 정리하기가 귀찮아서 -ㅇ-;;; 하더라도 천천히 나중에나 할듯.) (예전에 공부하면서 그냥 대충만 정리해 놓은것들이라;;; 여기선 정말 대충, 엉터리로 정리해놨으니 reference들 참고해서 공부하세요.) Closure란 특성을 이용하는 것인데... Garbage collection과도 관련이 있고... Closure란 단어가 너무 추상적인듯도... closure 특성이라고 많이들 이야기.. 더보기
반응형 웹 만들기 (Responsible/Scalable web design with css media query) # 반응형 웹 만들기 (Responsible/Scalable web design with css media query) 기본적으로 어느 인터넷 브라우저에서든 Ctrl+mouse wheel 을 하면 scale 을 바꿀 수 있음. Chrome 은 site 별로 이 scale 도 저장해놔서 나중에 왔을때도 같은 scale 로 web-page 를 볼 수 있음. 개인적으로 국내 web page 들 90% 이상에서 글씨 크기가 눈나쁜 나한테는 너무 작아서... 항상 scale up 해서 보는 경향이... Chrome 기본 설정에서도 기본 글씨 크기를 바꿀 수 있긴 한듯. 그런데 어차피 사이트 제작자가 그냥 font 에서 layout 을 맞춰놓은 경우가 많아서.. 이걸 바꾸면 overflow 나고 이럴 경우도 많을듯.. 더보기
티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리에 단축키가 있다는걸 최근에야 깨달음;;; 티스토리 단축키 설명은 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로 쓰는 경우가 많아서 이것 관련 정리는 패스. 단축키 추가/수정하기 단축키를 추가하거.. 더보기

티스토리툴바