본문 바로가기

메모장/마크업

ie6에서 투명 png24 적용하기 익스플로6(ie6)에서는 투명PNG 파일이 배경이 생긴다. 아래그림은 png24를 ie6에서 보여지는 차이 (오른쪽 그림뒤에 연한 회색의 배경이 들어간 것을 볼 수 있다.) png24를 그림으로 보여줄 때 투명하게 만들기 (img src 사용) PNG24를 그림으로 보여줄 때 투명하게 만들기(img src 사용) 1. 사이에 있는 style 태그나 css 파일에 아래 내용을 더해 줍니다. .png24 { tmp:expression!!!(setPng24(this)); } 예) 2. 자주 쓰는 js 파일이나 사이에 아래 내용을 더해 줍니다. function setPng24(obj) { obj.width=obj.height=1; obj.className=obj.className.replace(/\bpng24\..

CSS - line-height으로 제어 하는 폰트 행간 CSS - line-height으로 제어 하는 폰트 행간 폰트 속성에 따라 행간이 간격이 달라지는걸 알면서도 그때마다 화면캡쳐로 진행해왔던 일입니다. 이제라도 정리해 보고자^^;; 위 그림에서 보듯 폰트가 굴림인지 돋움인지는 상관없이 동일했으며 line-height 에 따라 달라집니다. 다행이도 ie와 FF도 동일하고 왼쪽은 항상 1px씩 기본적으로 갖고 있네요. ie(7이하버전) / FF : line-height: 14px일경우 0 0 3px 1px; : line-height: 16px일경우 1px 0 4px 1px; : line-height: 18px일경우 2px 0 5px 1px; Opera : line-height: 14px일경우 1px 0 1px 1px; : line-height: 16px일경우..

티스토리 블로그 속도 개선 방법에 대해 검색하다가 원하는 것을 찾았다. ㅎㅎ 일단 먼저 좋은 정보를 알려주신 블로거 님께 감사를 표합니다. ㅎㅎㅎ 요새 제 블로그에 제가 접속할때 너무 늦게 떠서 짜증이 났더랩니다. 웹폰트, 사진 용량의 압박....때문이죠... 그러나 속도가 느리다고 해서 위에 말한 것들을 포기할수는 없었습니다. 해서 검색을 해봤는데...오오~~~원하는 방법을 찾은 것 같습니다. 기록해서 저뿐만 아니라 널리 알릴 수 있도록 퍼왔습니다. 이분의 블로그 주소 입니다. 이 외에도 많은 유용한 정보가 많이 있더군요. ㅋ http://www.seosem.kr/ 아래부터 그 유용한 방법의 내용입니다. [검색엔진 최적화] 티스토리 블로그 속도 개선 방법 처음에는 포털에서 무료로 사용할 수 있는 블로그를 사용하다가 "구글 애드센스"를 해보고 싶어서 알게된 것이 티스토리 블로그입..

[자바스크립트] window.open(); 명령어 사용법과 [object] 반환 안되게 하는 법입니다. window.open(); 명령어 사용법 window.open(); - IE 팝업창 띄울때 사용하는 스크립트 사용법 windows.open("새창으로 열 페이지 주소", "새창의 이름", "옵션들"); 옵션값 menubar=no // 메뉴바 없애기 toolbar=no // 툴바 없애기 location=no // 주소표시줄 없애기 status=no // 상태표시줄 없애기 scrollbars=no // 스크롤바 없애기 fullscreen // 최대창 크기로 열기 => F11 눌린 크기이긴 하지만, F11과는 다른 기능임 width // 가로크기 height // 새로크기 top // 위에서부터 위치 left // 왼쪽에서부터 위치 사용예 1번!! 네이버 새창열기 아까창에서 다음사이트 열기 이런식으로 이름을..

HTML 4.01 DTD 코딩을 할때...당연히 되야 하는데 안되는 상황이...발생한다면...dtd를 먼저 확인해보세요... 코딩을 할때...에효...당연히 되야 하는데 안되는 상황이...발생한다면...dtd를 먼저 확인해보세요... 저처럼 시간 낭비 하지 않으시려면.. 모든 markup 문서 상단에는 이 문서가 어떠한 형식을 따른 문서인지를 명시해주는 Document TypeDefinition 이 존재 해야 한다. 이 DTD 선언은 브라우져가 어떠한 랜더링 모드를 선택할 것인지를 판별하게 하거나,파서가 문서 파싱을 어떻게 해야 하는지를 알려주는 중요한 정보이다. DTD 선언은 해당 문서를 어떻게 읽어야 하는 지를 알려주게되고 validator는 전적으로 이 DTD 선언에 의지 하여 문서를 판별하게 된다. 웹에서 주로 사용하는 ..

각 문자를 URL 인코딩 테스트 할 수 있는 사이트 http://translate.google.co.kr/translate?hl=ko&langpair=en%7Cko&u=http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

한글 자음으로 한자키로 표시하는 특수문자 정리표 "ㄱ" 에 있는 특수문자 [문장에 사용되는 부호] 공백 ！＇，．／：；？＾＿｀｜￣、。 · ‥ … ¨ 〃 ― ∥ ＼ ∼ ´ ～ ˇ ˘ ˝ ˚ ˙ ¸ ˛ ¡ ¿ ː "ㄴ" 에 있는 특수문자 [괄호] ＂（）［］｛｝ ‘ ' “ ” 〔〕〈〉《》「」『』【】 "ㄷ" 에 있는 특수문자 [수학 기호] ＋－＜＝＞ ± × ÷ ≠ ≤ ≥ ∞ ∴ ♂ ♀ ∠ ⊥ ⌒ ∂ ∇ ≡ ≒ ≪ ≫ √ ∽ ∝ ∵ ∫ ∬ ∈ ∋ ⊆ ⊇ ⊂ ⊃ ∪ ∩ ∧ ∨ ￢ ⇒ ⇔ ∀ ∃ ∮ ∑ ∏ "ㄹ" 에 있는 특수문자 [단위] ＄％￦Ｆ ′ ″ ℃ Å ￠￡￥ ¤ ℉ ‰ € ㎕㎖㎗ ℓ ㎘㏄㎣㎤㎥㎦㎙㎚㎛㎜㎝㎞㎟㎠㎡㎢㏊㎍㎎㎏㏏㎈㎉㏈㎧㎨㎰..

html 문서에서 파일 다운로드 모듈(?) asp 문서 소스 get 방식으로 asp 모듈 문서를 호출한다. 물론 변수로 다운로드할 파일명을 같이 전달한다.

<a> 태그 안에서 자바스크립트 사용법 자바스크립트 사용시 매서드를 불러올 경우 이미지의 a 태그가 무시당하면서 익숙한 '손가락' 표시가 나타나지 않게 된다. 이럴경우 사용하면 좋은 태그 내부에서의 자바스크립트 사용!! ** 표준화 등의 호환문제로 사용습관 변경 ** 기존에 자주쓰던 방식 ** 변경할 방식 --> onClick 마지막 부분에 return false 를 넣어 클릭시 페이지 최상단으로 이동되는걸 막는다.

CSS 핵정리 - 핵과 필터 사용에 대한 주의사항 핵과 필터 사용에 대한 주의사항 CSS는 언어적인 측면에서 상위 버전 호환성을 잘 고려해서 설계되었다. 브라우저가 특정 선택자를 이해하지 못할 경우 해당 규칙을 전혀 적용하지 않게 된다. 마찬가지로 특정 속성이나 값을 이해하지 못할 경우 해당 선언을 모두 무시해버린다. 이런 기능으로 인해 새로운 선택자, 속성, 값이 추가되더라도 구버전의 브라우저에는 별다른 영향을 주지 않게 된다. 이런 특성을 이용하면 구식 브라우저에서도 안전하게 동작하면서도 최신 브라우저를 위한 규칙과 선언을 사용할 수 있다. 새로운 버전의 브라우저가 나올 경우 기존에 필터를 써야했던 CSS가 제대로 동작하게 될 것이다. 구버전의 브라우저에서 문제가 있어서 고급 CSS 기능을 사용했다면 새로운 버전에서는 이런 문제가 해결될 것이다. 이..

[CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이..

DIV를 남발을 하지말자 DIV 남발을 하지말자 TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다. 테이블의 단점 중 하나가 에 재차 이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서 DIV 사용을 남발하는 것은 좋지 않은 습관입니다. 예를들어 보겠습니다. 올블릿 생성마법사 메뉴 1 메뉴 2 메뉴 3 이 소스에서 필요없는 부분은 어디일까요? 네, 바로 이 소스에 있는 모든 DIV 입니다. 굳이 ul을 div로 감싸지 않더라도, 굳이 H2 제목 태그를 div로 ..

CSS 폰트(font) 굵기(weight)와 자간(letter-spacing) 웹 표준 팁) 폰트를 굵게 하려면 태그가 아니라 css에서 font-weight 로 설정을 해 주는 게 좋습니다. 강조는 , 사용~ 폰트를 굵게 하려면 CSS에서 font-weight 속성을 사용합니다. 값은 숫자도 가능하지만, 세세하게 조정되는 폰트가 없기 때문에 보통 bold(800), normal(400) 을 사용하죠. 폰트 중에는 보통과 굵은 폰트를 따로 제공하는 경우가 있는데, 이 경우에는 자간을 맞춰 놓았기 때문에 굵게 만들어도 어색하지 않습니다. 예를 들어, '맑은 고딕'의 경우에는 '맑은 고딕 Bold', '나눔고딕'의 경우에는 '나눔고딕 Bold'를 제공하기 때문에 font-weight:bold 로 하더라도 폭 변화가 없습니다. '맑은 고딕'이 설치되어 있다면 아래 예제에서 굵게 하여도 ..

페이지 종류별 인클루드 방법(php, jsp, asp, html include) PHP JSP (추천:include directive)include directive include action include direcitve 는 translation phase 에서 include 된다. include action 은 request phase 에 include 된다. include directive 가 더 빠르다. 때문에 include 되는 파일이 빈번히 바뀌지 않는 한 성능 향상을 위해서 include directive 를 쓰는 것이 좋다. jsp 파일의 글자가 깨지면 아래줄을 최상단에 넣어 주면 된다. ASP (추천:절대경로)절대경로 상대경로 HTML 출처 http://hyeonseok.com/pmwiki/index.php/Main/Include ASP에서 인클루드 하는 방법 2가..

CSS 높이(Height) 100% 맞추기(브라우저 창크기에 맞춰서) 높이 100% 첫번째 Hack을 사용한 100% 마추기 기본 소스 일단 DTD설정후 높이 100%라는것은 브라우저의 높이를 기준으로 하기때문에 container에 100%를 주면 전체 html의 높이는 gnb+ container + footer이 되어서 화면의 100%를 넘어선다 그럼 어떻게 잡아주는것이 좋을까? 먼저 DTD설정을 확인한다. (거의 필수) 본인은 DTD XHTML 1.0 Transitional 제작했다. (일단 많이 쓰이니깐..) 처음해줄것은 html과 body를 높이 100%를 주는것이다. Element같은경우 최상위의 높이를 기준으로 삼기떄문에 최상위인 html과 body에 높이 100%를 설정해준다 html, body {height: 100%; margin: 0; padding:0;..

CSS로 이미지파일 필요없이 라운드 테이블,DIV 만들기 예제만 봐도 충분히 알수 있다.... 맨처음 도대체 어떤 원리인가 했는데... 내가 이해한 바로는...픽셀하나하나로 장난치는 것뿐이라는 거... 어렵지 않다...ㅋㅋ 이미지 없이 라운딩 박스 표현하기! 이미지 없이 라운딩 박스 + 보더 표현하기!

이전 1 ··· 3 4 5 6 7 8 다음

티스토리툴바