본문 바로가기

Local Oriented/HTML CSS JS

 (105)
이미지 튜닝 http://blog.daum.net/miriya/15601333jpg 압축율 80% 정도가 적당png24 투명한 이미지인 경우 사용하되, 256색상을 초과하지 않는다면 투명 gif 사용.다만.......... 실제로 이것저것 체크해 보아야 함.. 튜닝의 길은 멀고 험난.
JSON 으로 이미지 더보기 구현 http://uiandwe.tistory.com/entry/JSON-jquery-%EC%98%88%EC%A0%9C-2 $('#twiImage').find("a").eq(-1).after('...') 마지막 a 태그 이후에 이미지를 가져와 붙이기http://uiandwe.tistory.com/entry/JSON-jquery-예제 (참조) http://www.json.org/json-ko.html json 개념도
table 태그로 표를 간단하게 (레이아웃 작성용 아닙니다) 칼럼1 칼럼2 칼럼3 칼럼4 칼럼5 칼럼6 값1 값2 값3 값4 값5 값6 값1 값2 값3 값4 값5 값6 table 태그는 width 가 100% 로 설정되므로 table 태그를 포함하는 쪽에서 width 를 적절하게 설정합니다.col 태그는 칼럼 갯수만큼 설정합니다. 여기에서는 폭을 설정하는 용도로만 사용.제목은 th 태그로 설정하고, 본문은 td 태그로 설정합니다.마우스 커서가 올려졌을때 본문 라인의 배경색을 바꾸는 것은 jQuery 로 구현하세요. (아래 내용 참조)td 는 기본적으로 중앙 정렬입니다. 좌정렬이 필요한 경우 class 에 left 를 추가합니다.td 태그의 class 에 dot 를 기술하면 폭을 넘어가는 문자열 대신에 말줄임표(...)가 대치되며,크롬/사파리/오페라/파이어폭스 등에..
position fixed 를 사용하여 화면이 스크롤 되어도 고정 위치에 표시 ...상기와 같이 하면 오른쪽 상단에 div 가 놓여진다. 스크롤 하더라도 그 위치가 변함이 없다.레이어가 있는 화면의 경우 z-index:100 과 같이 값을 주면 되겠고..그런데, doctype 이 정의되어 있지 않다면 작동하지 않는다. jquery 와 함께 사용하여 일정한 공간을 스크롤 한 다음에야 표시되게 하고,일정한 공간이 남은 다음에 표시되지 않게 할 수도 있겠다..처음엔 나오지 않다가 어느정도 스크롤 하면 나오게 하거나,반대로.. 처음엔 나오다가 일정한 스크롤이 이루어지면 표시되지 않도록 할 수도 있겠다. jquery 를 이용해서 일정한 곳으로 애니메이션 스크롤http://luckypong.tistory.com/73
즐겨찾기 북마크, IE FF Chrome Safari 예전엔 아래 코드를 많이 썼는데, 이게 IE 에서만 작동을 해요.. 그래서 요즘엔 이걸 대행해 주는 플러그인을 사용합니다. MS 의 인터넷 익스플로러(IE) 에서는.. Google 의 Chrome 에서는.. Mozilla 의 FireFox 에서는.. Apple 의 Sarari 에서는.. 등등과 같이 나옵니다.그런데, IE 에서만 동작하는 코드에서는.. 웹페이지 어디에서든 메인 페이지만 즐겨찾기를 할 수 있었는데..플러그인에서는 열려있는 웹페이지를 즐겨찾기(북마크) 하는 것이 약간의 문제를 가져옵니다.이때 해당 웹페이지의 title 부분에 정확히 기술하면 문제는 없긴 합니다. 이를테면, www.abc.co.kr 을 표시하는 웹페이지 title 에 'ABC 방문을 환영합니다' 라고 했다면,www.abc.co..
쓸만한 표현식 http://olpost.com/r/4951585 숫자와 수치 function isDigit(s){ return /^[-+]?\d+$/.test(v); } +/- 수치를 체크. 산식은 불허. .replaceAll("[^0-9|a-z|A-Z]","") 0 에서 9 까지, a 에서 z 까지, A 에서 Z 까지만 남기고 다른 문자는 없애는 표현식 const url = /(\w+):\/\/([\w.]+)\/(\S*)/g; // http 든 https 든 체크. ? 이후 쿼리 스트링도 체크(와 )로 묶이는 내용은, 괄호 안에 기술된 순서대로 하나의 그룹 취급. 사실 상기 url 패턴에서 ( 와 ) 는 삭제해도 동일 작동[와 ]로 묶이는 내용은, 괄호 안에 기술된 각각의 요소가 하나라도 있으면 ok\w 는, [a-..
자바스크립트 다시 공부 심도있는 개념들이 잘 설명되어 있어요, 예제와 함께..https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide You don't know 시리즈https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--goinghttps://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closureshttps://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20o..
float 과 text-align 의 이상한 만남..? 아래 2개의 코드는 개념상 동일하게 렌더딩 되어야 함에도 불구하고, IE(MS 사의 인터넷 익스플로러) 몇가지 버전에서 다르게 표시가 되네요.. ㅠ.ㅜ 다른 웹브라우저들에서는 정상적으로 나오고요.. 1. ......... 2. ......... 그런데, 위의 2번으로 하면 두번째 span 태그의 내용이 다음 라인으로 밀려나는 현상이 발생하더군요. IE 모든 버전에서 그런 것이 아니고, IE7 과 IE8 의 몇몇 마이너버전(?)에서 발생했습니다. 볼수록 알 수 없는 MS 사의 개발 정책에 일단 두 손 다 들었습니다.

티스토리툴바