메모장/마크업 썸네일형 리스트형 [마크업의 오해]XHTML, HTML4, HTML5 각종 마크업의 관계정리 "마크업의 오해"(Misunderstanding Markup: XHTML2/HTML 5 Comic Strip) 아래 코믹은 DOM Scripting의 저자인 Jeremy Keith가 작성하고 BradColbow가 그린 "마크업의 오해"(Misunderstanding Markup: XHTML2/HTML 5 Comic Strip)라는 만화로서 XHTML5에 대해 소개하고 있습니다. 필자에 의해 번역 되었으며 Creative Commons License하에서 사용하도록 허가 받았다. 출처 :http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comicstrip/ 실전 HTML5 가이드 에서 발췌하였습니다 [Html5+CSS3]HTML의 역사, 젠코딩(ZenCoding), 브라우저성능테스트, 사이트유효성검사, 실전 HTML5 가이드 HTML 5 != HTML5 HTML 5와 HTML5는 다르다 HTML -> HTML4 까지 발전된 시간은 대략 7년? W3C에서 XHTML를 배포한뒤 XHTML2 까지 개발을 하려 했으나, 많은 사용자들이 HTML4를 더 선호하게 됨 따라서, HTML4 -> HTML5 개발이 필요했지만, 저작권 문제로 HTML 5가 먼저 나오고, 인수를 통해 최종적으로 HTML5가 나오게 됨 용어정리 TEXT attribute(속성) : href tag(태그) : , contents(컨텐츠) : TEXT element(엘리먼트) : TEXT *property(속성)는 CSS에서 attribute(속성)는 HTML에서 사용하는 것이다 Zen Coding Zen Coding(http://code.google.com/p/z.. 실전 HTML5 가이드 다운받기 실전 HTML5 가이드 시중에 판매되고 있는 HTML5 관련 서적들 보다 인터넷에 무료로 배포되고 있는 이 PDF를 먼저 한번 보시길 추천합니다 실전 HTML5 가이드 다운로드 젠코딩0.6 치트 시트(Zen Coding0.6 Cheat Sheet) 다운받기 젠코딩0.6 치트 시트(ZenCoding0.6 Cheat Sheet) 다운받기 Zen Coding 0.6 Cheat Sheet 다운받기 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. 출처 - http://cafe.naver.com/hacosa/47043, http://www.aether.ru/files/zencoding.pdf HTML 버전별 Doctype 선언 정리 HTML 버전별 Doctype 선언 정리 DOCTYPE은 Document Type의 줄임말입니다. 태그 위에 선언 해줘야 하며, 어떤 종류의 html을 사용할지 웹 브라우저에게 알려줍니다. HTML 버전별 DOCTYPE을 간단히 표로 정리해 보았습니다. 더 자세한 내용을 알고 싶으신 분은 DOCTYPE 알아보러 가기! 를 클릭해주세요. 표를 보면 일정하게 DTD 라는 것이 들어가 있다는 것을 알 수 있습니다. DTD는 Document Type Definition의 줄임말로 현재 사용하는 버전에서 어떤 태그들을 사용할 수 있는지 알려줍니다. 크게 strict, transitional, frameset 세 가지로 나뉩니다. strict - 웹 표준을 엄격하게 지킨다는 의미입니다. center, font를 포.. [HTML5] 의미있는 문서, 시맨틱(Semantic)요소 의미있는 문서 HTML5 이전의 웹 문서 즉 HTML 문서는 구조보다는 표현을 위한 수단에 가까웠다 Table 태그, ul, li 태그, div 태그 등으로 문서 구조를 정의할 수 있지만 이것은 의미있는 구조라기 보다는 표현을 위한 구조 잡기에 가까웠다. 다시 말해 각 태그들은 일관된 목적을 위해 사용되는 것이 아니라 문서를 Display하기 위해 제각각의 형태로 사용되어진게 사실이다. 다시 말해 HTML5 이전의 문서 표현 태그들은 문법적 규칙은 있었으나 구조의 규칙은 존재하지 않았다 이러한 문서는 사람이 읽기에는 적합하지만 자동으로 문서 구조를 파악하고 분류 및 탐색하기에는 힘든 구조이다. 즉 시맨틱스럽지 못하다는 것이다 참고로 의미있는 구조의 대표적인 형태가 XML 문서이다 XML 의 탄생 자체가 .. [CSS3] 새로운 기능(스타일) CSS3의 새로운 기능 CSS 는 Cascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다 엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다 그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다 그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다 어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다 (뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...) 나 역시 개발.. 오로지 CSS로만 만들 네비게이션(GNB) 소스 오로지 CSS로만 만들 네비게이션(GNB) 소스 다운로드해서 분석하시고, 응용해서 사용하세요 ㅎㅎ 그외 소스로는 http://www.apycom.com/ 여기를 참조해보세요 플래시가 아닌 html5 기반의 그림판(간단 드로잉) 사이트 가볍고, 신기하고, 빠르고 플래시 기반이 아니라서 그런지 정말 가볍게 느껴집니다. 아래링크 클릭하면 웹사이트로 이동합니다. 그냥 재미로 놀아볼 수 있는 재미난 그림 그리기 툴입니다. 특별히 좋은 점은 모르겠습니다 - 그냥 윈도우즈의 페인트 비슷한 것 같습니다. 차이점은 웹기반이라는 것과 빠르다는 것입니다. http://mugtug.com/sketchpad/ 출처 - http://lifeisgood.tistory.com/1443 제이쿼리(JQuery), CSS3, HTML5 효과 튜토리얼 모음 HTML / CSS [HTML/CSS] 001. CSS3를 이용한 탭 메뉴(tab menu) 만들기 How to Create a CSS3 Tabbed Navigation [미리보기] [HTML/CSS] 002. CSS3를 이용한 버티컬 네비게이션 메뉴 만들기 Orman Clark’s Vertical Navigation Menu [미리보기] [HTML/CSS] 003. CSS3를 이용한 오목한 버튼 이미지 코딩하기 Tagtastic Tag Cloud with CSS Transformations [미리보기] [HTML/CSS] 004. 웹폰트와 배경이미지를 이용한 별 코딩Create a Rating System With CSS, Web fonts and Sprites [미리보기] [HTML/CSS] 005... 자바스크립트(Javascript)에서 null 과 undefined 차이 자바스크립트(Javascript)에서 null 과 undefined 차이 null 자바스크립트 키워드 null은 아무런 값도 나타내지 않는 특수한 값이다. null은 보통 객체타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다. null은 다른 모든 값들과 구분되는 고유한 값이다. 어떤 변수가 null 값을 가지면 그 변수가 유효한 객체나 배열, 숫자, 문자열, 또는 불리언 값을 담고 있지 않다는 것을 알 수 있다. null은 불리언 문맥에서 사용되면 false, 숫자 문맥에서는 0, 문자열 문맥에서는 "null"로 변환된다. undefined 자바스크립트에서 종종 사용되는 또 다른 특수한 값으로 undefined 값이 있다. undefined는 선언은 되었지만 값이 할당된 적이 없는 변.. 자바스크립트(Javascript)에서 정의되지 않는 변수 검사하기 자바스크립트 javascript에서 정의되지 않은, 선언되지 않은 변수인지 검사하는 방법 1. typeof 연산자는 정의되지 않은 변수에 사용하면 'undefined'를 반환한다고 한다. 2. try - catch를 활용한다. 예를 들어 NODEINFO 라는 변수가 선언되지 않았다고 가정할 때 검사하는 예시 코드는 다음과 같다. if (typeof NODEINFO == 'undefined') alert("NODEINFO가 정의되지 않았습니다!"); try { if (NODEINFO.length < 1) // NODEINFO가 유효하지 않으면 부모카테고리 정보가 없는 것임 { alert("현재 생성된 카테고리 정보가 없습니다!"); return; } } catch(exception) { alert("현재 .. 프레임셋(Frameset)과 자바스크립트(Javascript) n 프레임과 자바 스크립트 자바 스크립트로 프레임을 제어하기 위해서는 자바 스크립트가 프레임을 어떻게 보고 있는지 알아야 한다. 우리는 앞에서, 자바 스크립트가 한 윈도우 내에서 웹 페이지의 각 요소를 계층적으로 표현하고 있음을 배웠다. 이러한 개념은 프레임에도 그대로 적용되어 프레임 객체는 윈도우가 가지는 속성과 메쏘드를 그대로 사용한다. 아래와 같이 상,하 2개의 프레임으로 나누었을 경우를 예로 들어 보자. Jscript4-2.html [화면] Jscript4-3.html 실행 결과 실행 결과에서 볼 수 있듯이 하단프레임(‘bottom’)에서 상단프레임(‘upper’)의 함수를 호출함으로써 상단프레임의 입력박스에 입력된 데이터 값을 읽어내고 있다. 새창 속성과 새창 열기 여러가지 방법 정리 새창 속성 left=0, top=0, width=600, height=500, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes scrollbars=resizable 일 경우 스크롤 자동 방법1. 자바스크립트 사용하기 않기 input.asp 홈페이지 주소 : input_ok.asp test_new_win.asp ----- 관 련 사 이 트 ----- 네이버다음 네이트 웹페이지, 윈도우 창에서 스크롤바 강제로 없애기 웹페이지에서 스크롤 없애는 방법입니다. scrolling="no" ->스크롤 없애기 scrolling="auto" ->자동스크롤 1.프레임내의 스크롤바 없애기 프레임셋 소스에서 스크롤바를 없애고자 하는 프레임에 scrolling="no"를 추가 해 줍니다. 예) 2.아이프레임에서 스크롤바 없애기 아이프레임 태그안에 scrolling="no"를 추가 해 주면 됩니다. 예) 3.특정 웹페이지의 스크롤바 없애기 시작하는 body~태그안에 scroll=no를 추가 해 줍니다. 예) 4. 가로 스크롤바 없애기 시작하는 body~태그안에 style="overflow-x:hidden"를 추가 해 줍니다. 예) 세로 스크롤바를 없애려면 [CSS] white-space:nowrap; word-break:break-all; text-overflow:ellipsis; [ CSS style ] white-space:nowrap; word-break:break-all; text-overflow:ellipsis;white-space:nowrap; 넓이를 지정하였더라도 자동으로 줄바꿈되지 않게 강제로 개행을 막자줌. word-break:break-all; 문장을 띄어쓰기 할 때 쓰인 공백기준이 아닌 문자단위로 끊어주는 속성. text-overflow:ellipsis; 텍스트가 넘칠때, 말줌일표(...)가 나오게 하는 속성, 적용조건 white-space:nowrap; [CSS] text-overflow, overflow 속성 text-overflow, overflow 속성 Text-overflow - text가 overflow되었을 때 어떻게 처리할 것인가를 나타내는 속성 - overflow 속성이 hidden 등 overflow 속성이 값을 갖고 있을 때 적용이 가능 - 엘리먼트 크기 이상의 글이 들어있음을 말 줄임표 ...을 이용하여 나타내줌 text-overflow : clip | ellipsis | string clip - Clips the text ellipsis - Render an ellipsis ("...") to represent clipped text string - Render the given string to represent clipped text text-overflow-mode - clip | e.. [PHP] 한글파일 명 다운로드 방법 웹문서에서 어떠한 파일을 다운로드 할 경우 가장 간단한 방법은 A 태그에서 직접 경로를 지정해주면 된다. 허나... 이방법은 한글파일명을 가진 파일은 쓸수가 없다...ㅡㅡ^ 원인은 문서자체의 인코딩, 서버설정 등 여러가지가 있겠다. 여기서는 내가 찾은 방법을 메모하는 수준...포스팅은 아니다. 내가 찾고, 수정한 방법이다. 다운로드를 호출할 페이지에서 onclick 으로 자바스크립트를 호출하고, onclick="js_filedown('테스트.doc')" 자바스크립트에서는... function js_filedown(filenm){ window.open('/bdes/down/download.php?filename='+filenm); return false; } 그리고, 호출한 download.php 에서는 .. [ASP] 문자열 잘라내고 추출하고 뒤집기 (파싱) 1. 문자열의 길이를 알아내기 결과 : 6 2. 좌측부터 몇번째 문자열까지만 출력하기 결과 : lsw 3. 우측부터 몇번째 문자열까지만 출력하기 결과 : sks 4. 문자열 부분 추출해내기 결과 : ws 5. 문자열의 공백제거 str = " lswsks blog hello " 결과 : 앞뒤의 공백을 지워준다 결과: 앞의 공백을 지워준다 결과 : 뒤의 공백을 지워준다 6. 특정문자를 다른문자로 교체 str = "우리나라 대한민국 아자" 결과 : 우리나라 대한민국 아싸 7. 특정문자를 구분해서 잘라내기 str = "2004-02-18-000" '-를 구분해서 문자열을 추출한다 결과 : 2004 결과 : 02 결과 : 18 결과 : 000 8. 문자열 거꾸로 뒤짚기 결과 : skswsl [이 게시물은 최고관리.. [ASP] 간단한 외부파일 읽기(가져오기) Dim objFSO, objOpenedFile, Filepath, sRead Const ForReading = 1, ForWriting = 2, ForAppending = 8 Const FileName = "\readme.txt" '파일시스템 객체를 생성한다 Set objFSO = CreateObject("Scripting.FileSystemObject") Filepath = Server.MapPath(Filename) '파일이 존재하면 If objFSO.FileExists(Filepath) Then '함수원형 object.OpenTextFile(filename[, iomode[, create[, format]]]) 'TristateUseDefault = -2, Tri.. 자바 스크립트 인코딩 사이트 자바 스크립트 인코딩 사이트 : 인코딩 하러 가기! 여기의 텍스트에 까지 입력하시고 컴파일을 누르시면 인코딩된 소스가 생성됩니다. 그 소스를 원하시는 곳에 붙여넣기 해서 사용하세요. 자바 스크립트에 관한 사이트입니다. html, asp, php 에서 플래시로 변수 전달할때 크롬, 파폭에서는 전달이 안될때 혹은 유의사항이다. 아..익스에서는 잘 됐는데...파폭, 크롬에서는 안돼...요새는 페이지에 플래시를 삽입할 경우~~object 태그나 embed 태그를 동시에 써서, 크로스브라우징을 하게 된다. 예를 들어서 보통 html에서 flash로 변수값(parameter) 넘겨줄때 방법중 많이 쓰던 방식을 말하자면, 이렇게 object, embed 태그를 두번 쓰는 이유는 익스계열에서는 object 태그를 사용해 플래시를 가져오고, 파폭이나, 크롬에서는 embed 태그를 사용해서 플래시를 가져오기 때문이다. 그리고, 변수를 플래시에 넘길 시에는 get 방식으로 전달한다 한다면 ?, & 사용해서 하면 되었었다. 하지만, 익스플로러 옵션에서 temporary 설정을 auto(default)이상으로 해놓았을 경우. 이렇게 되면 temp.. iframe 스크롤 색상 바꾸기 예제 첫번째 HTML의 TAG는 ------------------------------------------------------------------------------ ------------------------------------------------------------------------------- 와 같고. 위의 붉은색으로 표시된 부분이 iFrame 테그와 그 속성 지정 테그들. 다른 부분은 학생들마다 다를수 밖에 없을 듯. width : iFrame의 좌우 넓이 height : 상하 높이 frameborder : iframe의 테두리 보더 두께 id : iframe의 프로그래밍을 위한 ID name : iframe의 target 지정을 위한 이름 marginwidth, marginheigh.. 파이어폭스(FireFox,파폭)에서 임시파일을 [페이지 열 때마다] 로 변경하기 크로스브라우징...이젠 지친다... 1. 주소창에 about:config 를 입력한후, 고급기능 사용 동의를 클릭. 2.필터창에 browser.cache.check_doc_frequency 를 넣은후 값부분의 숫자(3)을 클릭. 3. 정수 값 입력창에 '1' 로 변경. - 관련 값 내용. 0: 현 브라우저 세션이 끝날때까지 한번만 체크 (파폭을 종료하기 전까지는 되도록 cache에서만 읽음) 1: 페이지에 들를때 마다 매번 체크 2: 체크하지 않음. (한번 cache되고 나면 늘 cache를 씀) 3 (기본 설정): 자동으로 주기적으로 체크 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번!! 네이버 새창열기 아까창에서 다음사이트 열기 이런식으로 이름을.. 이전 1 2 3 4 5 다음 목록 더보기
