본문 바로가기

[IT/Programming]/HTML related

jQuery.ripples - 이미지에 물결 그래픽 효과 주기 # jQuery.ripples - 이미지에 물결 그래픽 효과 주기 최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글. ## PH 2023-11-29 : First posting. ## TOC ## jQuery.ripples.js jQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다. 유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더.. 더보기
imgur - Embed album # imgur - Embed album 앨범 만들어 놓으면 아래와 같이 embeding 할 수 있는 API 를 제공하긴 하는구나. CSS max-width:100% 같은거는 안먹혀서 responsible web 으로 만들긴 힘든듯도? 스마트폰에서 접속하면 parsing/rendering 이 다른식으로 이루어 질래나? 처음 로딩할때 width 체크해서 적당하게 만들어주긴 하는듯? ## TOC ## Embed imgur album 아무튼 코드는 아래와 같고. ```[.linenums.lang-html] HARAGU ```/ blockquote 부분에 아래와 같이 나타남. HARAGU ## Direct iframe Album URI | URL 에 /embed?pub=true&context=false 붙이면 d.. 더보기
인터넷에서 예쁘게 코드 입력하기 (google code prettify) # 인터넷에서 예쁘게 코드 입력하기 (Syntax Highlighter - google code prettify) 뭐 여러가지 js가 있는거 같긴한데 개인적으론 이거 쓰면서 만족하고 있음. Google 직원이 만들었으니 잘 만들었겠지. 뭔가 에러처리 (잘 안생길거 같은 에러들도 이것저것 처리를 해놓은듯) 를 잘해놔서 코드가 복잡하긴한데, 잘 돌아감. 상당히 빠른거 같고. HTML에서 약속된 문법들은 escape해줘야 제대로 표현됨. 예를 들면 { : > }, { & : & } 같은 것들. 'less than', 'greater than', 'ampersand'의 약자일듯. JavaScript - String - replace(RegExp, txt) method 쓰면 편함. 하지만 .. 더보기
Learning AJAX # Learning AJAX AJAX 란 "Asynchronous JavaScript and XML" 의 약자로 비동기적으로 서버에 무언가 요청을 보낼때 쓰인다. 유저가 댓글을 쓴다던지, 새로 업데이트 된 댓글을 불러온다던지 할 때, 새 창을 띄우지 않고도 서버와 데이터를 주고받는 것을 가능하게 해주는 것이다. 자세한 설명은 에 잘 되어 있으니 여길 잘 참고하시길... In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy. .. 더보기
Referer 알아내기 in Server (Vert.x) and Client (HTML/javascript) # Referer 알아내기 in Server (Vert.x) and Client (HTML/javascript) Client (방문객) 이 어느 경로를 통해 들어왔는지, 어느 검색어를 통해 어느 검색엔진을 통해 들어왔는지 등을 알아내려면 어떻게 해야할까? Vert.x 랑 javascript 에서 쓰이는 referer/referrer 철자 (spelling) 가 다르네? ㅡㅂㅡ;;; ## PH 2023-11-04 : Update window.kipid to window.m. 2023-02-27 : First posting. ## TOC ## Referer in Vert.x server 참고 https://vertx.io/. ```[.linenums.lang-java] import io.vertx.core... 더보기
URL | URI parser (URL 의 href, origin, protocol, host, hostname, port, pathname, search, hash 뽑아내기) # URL | URI parser (URL 의 href, origin, protocol, host, hostname, port, pathname, search, hash 뽑아내기) URL | URI 에서 href, origin, protocol, host, hostname, port, pathname, search, hash 을 알아내고 싶을때가 있는데, javascript 단에서 제공하는 function 이 분명 존재할거라 생각해서 스스로 짜보다가 chatGPT 통해서 물어보고 알게 된 것 공유. ## PH 2023-11-04 : First posting. ## TOC ## URL 의 기본구조 ```[.linenums] // The entire URL [href]=[protocol]//[hostname.. 더보기
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.. 더보기
Spread syntax ... operator in Javascript # Spread syntax ... operator in Javascript Spread syntax 에 대해 배워봅시다. Java 에서는 String... args 같이 쓰였던건데, Javascript 에도 비슷한 것이 도입 됨. ## PH 2023-10-30 : First posting. ## TOC ## 예제 참고: ```[.linenums.lang-html] ```/ ```[#pre-code-spread.linenums.lang-html] ```/ ## RRA 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶, by 드림코딩 더보기

티스토리툴바