메모장/마크업 썸네일형 리스트형 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 만들기 예제만 봐도 충분히 알수 있다.... 맨처음 도대체 어떤 원리인가 했는데... 내가 이해한 바로는...픽셀하나하나로 장난치는 것뿐이라는 거... 어렵지 않다...ㅋㅋ 이미지 없이 라운딩 박스 표현하기! 이미지 없이 라운딩 박스 + 보더 표현하기! html 문서 안에 다른 html 문서 삽입하기 1. 확장자 .htm, .html안에 삽입시 사이에 코드 삽입 2. 확장자 .jsp 사이에 코드삽입 -> top2.html을 인클루더 시켜 원본 파일에 삽입 부동소수점 e에 대해서... 매우 큰 수(양수 또는 음수)를 부동소수점으로 표현할 때는 E혹은 e를 이용하여 숫자에 지수를 추가할 수 있다. 지수가 있는 숫자 값은 E 앞에 있는 숫자에 10을 지수번 만큼 곱한 값이다. 12e2 라면, 1200이 된다. 이유는 10에 2승은 100이고, 100에 12를 곱하니 말이다. 143E-3 이라면, 0.143이 된다. 이유는 10에 -3승은 0.001이고, 여기에 143을 곱하니 말이다. 이런 부동소수점은 과학 분야에서 사용되는데 수에 약하다면, 이렇게 이해하면 쉽다. 지수가 양수이면 그 수만큼 소수점을 오른쪽으로 이동시키고, 음수라면 그 수만큼 왼쪽으로 이동하면 된다. 위 예를 다시 보면, 12e2는 지수 뒤에 양수 2가 붙었으니 그 수만큼 소수점을 오른쪽으로 이동하면 1200이 된다. 1.. 자바스크립트 다중(이차) 배열 선언, 사용하기 5 - 5 배열을 만들기 var multidimension = new Array(5); for ( var i=0; i lt; multidimension.length; i++ ) multidimension[i] = new Array(5); 첫번째 요소 참조 multidimension[0][0] = "hello world" 자바스크립트로 문자열 왼쪽열부터 자르기,오른쪽부터 자르기 함수 자바스크립트로 문자열 왼쪽열부터 자르기,오른쪽부터 자르기 함수. 이렇게 만들어 놓고 사용하면 편리하다. function Left(str,n){ if (n String(str).length){ return str; }else{ return String(str).substring(0,n); } } function Right(str,n){ if (n String(str).length){ return str; }else{ var iLen = String(str).length; return String(str).substring(iLen, iLen - n); } } 자바스크립트(javascript)에서 문자열 구분해서 배열에 넣기(split) 자바스크립트에서.. split 을 쓸경우.. var s_data = "2005-03-25"; // 잘라야 되는 값.. var array_data = s_data.split("-"); // split 함수사용.. var s_year = array_data[0]; // 잘라진 값 배열.. var s_month = array_data[1]; var s_day = array_data[2]; 자바스크립트 명령어 총정리 자바스크립트 명령어 총정리 window 객체 최상위 객체로서 다른 객체의 조상이 됨 속성 역할 defaultStatus 상태바(status bar)에 나타날 기본값을 설정 frames 윈도우 안에 들어 있는 프레임 객체 length 윈도우에 있는 프레임의 수 name 윈도우나 프레임의 이름 opener 현재 열려있는 윈도우 parent 윈도우가 계층구조일때 상위 객체 self 자신의 윈도우 status 상태바에 출력되는 문자열 top 윈도우가 계층구조일 때 최상위 객체 windows 현재의 윈도우 innerHeight 윈도우 안에 있는 내용의 높이 innerWidth 윈도우 안에 있는 내용의 너비 outerHeight 윈도우 밖의 테두리 높이 outerWidth 윈도우 밖의 테두리 너비 pageXOffs.. location.href와 location.replace의 차이점 location.href와 location.replace의 차이점 1. 특징 - 브라우저에서 URL 이동할 때 사용됨. 2. location - 현재 브라우저에 떠있는 URL 주소값에 관련된 내용을 다루는 객체. 3. location.href □ 용법 location.href = “next.html”; □ 특징 - 값을 정의해야하는 프로퍼티. - 주소표시줄에 키보드로 직접 주소를 넣고 enter를 치는 것과 같은 일을 함. - history에 정보가 남아 next.html로 이동 후 [뒤로] 버튼으로 이전 페이지로 갈 수 있다. □ 동작 ■ 새로운 페이지로 이동 - 브라우저 옵션에 손대지 않았을 경우, 브라우저의 주소값이 바뀌면 브라우저는 인터넷 임시파일 (c:\Documents and Settings\.. CSS IE6 IE7 핵...아 짜증난다... CSS... 원하는 효과 .test {color:#fff; margin:10px;} 언더바(_)를 쓰면 ie6에만 적용 .test {color:#fff; margin:10px; _margin:10px;} ie6 에서만 스타일을 제외하는 것은 /**/ 를 추가 .test {color /**/:#fff; margin:10px;} ie7에서만 적용하는 것은 빨간부분 css를 추가 *:first-child+html .test {color:#fff; margin:10px;} ie버전을 제외한 Mac IE Ver5, OperaVer7, Mozilla, Firefox에만 적용하고자 한다면 :root div.matey {color:#000; margin:10px;} 티스토리 스킨에 파일 업로드한 파일의 주소, 문서내 첨부한 파일의 주소 얻는 방법 티스토리 스킨에 파일 업로드한 파일의 주소 http://cfs.tistory.com/custom/blog/58/581036/skin/images/업로드한 파일네임 티스토리 문서내 첨부파일의 절대주소 http://자신의 블로그 주소/attachment/첨부파일을 본문에 추가한 후 html 모드로 전환 후 체크 예제 - http://ryuseunghyun.tistory.com/attachment/cfile10.uf@1309E0404D42497D1D7806.mp3 빨갛게 표시한 부분이 자신의 블로그에 따라서 바뀔 부분이예요. ㅎㅎ 간단하면서도 자꾸 까먹어서...적어놓음...망할 기억력... PHP동영상강좌] PHP기초에서 중급(?) [문법] [PHP동영상강좌] PHP기초에서 중급(?) 까지.. (전체 49강) 글쓴이 서기㏇ 날 짜 07-02-20 11:40 조 회 679 허접한 강의 올립니다. ㅡ,.ㅡ;;; 여기 강좌게시판은 글쓰기가 안되네요 -_-;; 많이 봐주세용~ ^^; 01. HTML이란 무엇인가! 02. 하이퍼링크, 테이블태그의 사용방법 03. 테이블 태그의 심화 04. 스타일 시트 05. 웹서버/웹브라우져/PHP란 무엇인가 06. Hello PHP 07. Get방식을 이용한 변수의 전달 08. Get방식의 전달과 테이블, 스타일태그의 사용 09. form태그를 이용한 값의 전달 10. 그외의 form관련 태그들 11. 메일 발송하기 12. IF문의 사용 13. IF문을 이용한 수우미양가 출력하기 14. 여러개의 파일을 거.. 우클릭 금지 소스 우클릭 금지 소스 oncontextmenu="return false" -> 마우스 우클릭시 팝업메뉴 비활성 onSelectStrart="return false" -> 마유스 선택 비활성 ondragStrart="return false" -> 마우스 드래그 비활성 저장 금지 소스 사이에 삽입 간단한 웹 저장창고 웹하드 File Storage http://snoin.kr/ IE에서만 발생되는 z-index 버그...ㅡㅡ^ 부모객체부터... 소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다. 두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는 position:relative 로 되어있다는 것이다. IE 에서만 이런경우 z-index 를 무시해 버린다. 이유는 잘 모르지만 노란박스가 20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다. 시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index 20 을 주니 정상적으로 동작했다. IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드.. 명쾌한 개념 정리 div display : inline block float 1. display block Element 를 정렬할때 display: inline; 이나 float를 사용한다고 알고계시는 퍼블리셔들이 몇명이있다. 하지만 display경우에는 말그대로 디스플레이될 상태를 설정하는것이다. 즉 ! inline 레벨로 할것이냐 block레벨로 할것이냐 아니면 숨길것이냐를 설정하는것이다. 예전에 어딘가에서 display: inline; 과 float:left;를 같은 용도로 정렬로 사용하는데 차이점을 묻는 글을 본적이 있다. block을 inline으로 하면 자연스럽게 인라인의 특징인 left정렬이 되는것이 당연하다. 예를 들어 span도 inline요소이다 이녀석을 aaaaaa 당연히 left정렬이 된다. 하지만 block요소들은 float로 설정하지않은이상은 떨어져서 .. div 의 display 속성에 대해서... div 태그로 만든 Layer를 안보이게 하는 두가지 방법 1. display:none block 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 같은 기능을 하는 div 태그에 어떤건 display로 적혀있고 어떤건 visibility로 적혀있길래 디자이너 대리님께 여쭤보니 저리도 명쾌한 대답을.. 나도 누가 뭐 물어보면 아주 명쾌하게 대답하고 싶다.. + 추가로 알게 된 사실. display의 속성으로 none과 block만 있는 줄 알았는데 아니었다. none, block, inline, inline-block, list-item,.. 인터넷 익스플로러(IE6, IE7, IE8) 동시에 사용하는 방법 웹 표준과 크로스 브라우징 잘 만든 웹페이지라면 기본적으로 크로스 브라우징을 잘 지원해야 합니다. 물론 블로그도 마찬가지입니다. 이를 확인하는 데에는 특별한 방법이 있는 게 아니라, 코딩을 끝낸 후 여러 제품의 브라우저로 직접 테스트를 해보면 됩니다. W3C Validator로 표준 유효성 검사를 할 수도 있겠지만, 자신의 웹페이지가 유효성 검사를 통과하더라도 크로스 브라우징이 모두 해결된 것은 아닙니다. 현실적으로 모든 브라우저가 웹 표준을 지키는 것은 아니며, 또한 웹 표준을 따르더라도 렌더링 과정에서 미묘한 차이가 있기 때문이지요. 가장 좋은 방법은 역시 직접 눈으로 확인하는 것입니다. 현재 브라우저 시장에는 Opera, Firefox, Safari, Maxthon 등 다양한 제품이 있지만 일일이 .. 이전 1 2 3 4 5 다음 목록 더보기
