오류 발견 요즘 만들게 있어서 자바스크립트 공부를 다시 하고 있는데... 만들다 보니 에러 메시지도 없이 자바스크립트가 작동하지 않아 개발자도구를 열어보니... SCRIPT28: 스택 공간 부족 연관글 영역 해결 방법 검색해보니 보통은 무한루프가 돌면 발생한다고 합니다. 결국 이 오류 나면 코드를 다시 확인해봐야 한다는 거죠. 찾는 방법은 1) 무한루프가 의심되는 곳에 로그를 찍어 봅니다. - console.log("로그"); 2) 해당 지점에 중단점을 찍어보고 호출 스택이 어디서 반복되는지 확인해 봅니다. 마무리 초보적인 실수이면서도 찾기 힘들 수도 있는 버그입니다 ㅎㅎㅎ

html5로 작성된 코드를 보다가 table 코드에서 ""를 보았습니다. 1.테이블(table)에 추가된 th th가 무엇인가 해서 찾아보니 테이블에서 헤더 역활을 하는 td의 경우 th로 작성하고 합니다. (참고 : W3C HTML5 - th element) 일반적으로 테이블은 데이터를 나열하는 용도로 사용합니다. 그렇기 때문에 헤더는 거의 매번 필요하죠. 하지만 이전까지는 헤더를 구분하기위해서 따로 스타일을 적용해야 했습니다. 스타일 시트에서 th를 작성하면 따로 스타일을 적용할 필요가 없습니다. 2.이전 방식과 비교 이전에는 헤더로 사용할 td나 tr에 직접 스타일을 지정했습니다. 이렇게 하면 table와 tr에 스타일을 지정해주어야 한다는 단점이 잇습니다. 하지만 th를 이용하면 이렇게 테이블 테..

CSS작업을 하다 보면 예상과 다르게 뒤에 나오는 스타일이 무시가 되거나 특정 스타일을 빼고 스타일을 넣어야 하는 경우가 종종 있습니다. 이럴 때는 'not()'선택자를 이용하여 지정한 스타일을 무시할 수 있습니다. (참고 : W3C - CSS/Selectors/pseudo-classes/:not) 1. 샘플 만들기 일단 테이블을 하나 만들어 봅시다. AAAaaaaa bbbbBBBB CCccc DDDDdddd .TableTest { } .TableTest tr td { padding:0 5px; background-color:Gray; } 이대로 테스트해봅시다. 2. 문제 일으키기 이제 스타일에 다음과 같은 코드를 추가합니다. /* 추가 */ .Test1 { padding-left:10px; backgr..

자바스크립트는 일단 컴파일 되고 나서 나가는 언어가 아니기 때문에 에러 확인이 힘듭니다. 일반적으로 빌드타임에 나는 에러를 런타임에서 격는 경우가 많습니다-_-;; 그중 대표적인 것이 '변수' 문제죠. 변수 문제는 특히나 여러 자바스크립트를 임포트해서 쓰게 되면 특정 변수가 선언됐는지 안됐는지 확인 안 하고 사용하면 동작하지 않는 자바스크립트를 보면서 당황할 수밖에 없습니다. 다행이라면 에러 메시지가 명확하다는 정도? 1. 변수 확인 방법 그러니 확실하지 않은 경우는 미리 확인할 필요가 있죠. 그럴 때 사용하는 방법이 아래와 같은 방법입니다. if( typeof(ad_Mobile) == 'undefined' ) { alert("선언 안돼 있다."); } 2. 테스트 변수가 없는 경우 변수가 있는 경우 잘..

HTML 작업을 하다 보면 'input'을 자주 쓰게 됩니다. 문제는 이 녀석들이 다 같은 태그이면서 타입에 따라서 완전히 다른 모양을 한다는 점입니다. 그렇기 때문에 각각 스타일을 지정해야 합니다. 하지만 컨트롤이 한두 개도 아니고 언제 작업을 하며 매번 컨트롤 추가할 때마다 스타일을 지정해주는 것도 일이죠. 이때 필요한 것이 타입별로 CSS를 지정하는 것입니다. 1. 샘플 코드 만들기 테스트용 html 코드를 만들어 봅시다. 2. 타입 지정하기 CSS에서 타입을 지정하기 위해서는 태그 이름[속성이름="속성값"] 입니다. 예제를 보세요. 이렇게 지정하면 자동으로 본문에 있는 'input' 태그의 속성이 'text'인 태그에 스타일이 적용됩니다. 3. 응용하기 이 방법으로 다른 속성도 지정할 수 있습니다..

CSS를 이용한 롤오버 버튼 만들기 1. [CSS3] CSS를 이용하여 div로 롤오버 버튼 만들기2. [CSS3] a태그와 CSS를 이용하여 롤오버 버튼 만들기 div를 이용한 롤오버버튼은 롤오버 영역위에 원하는 컨트롤이나 레이아웃 배치가 가능하기 때문에 범용성은 좋지만 단순이 링크만 필요할때 쓰기에는 너무 무겁습니다. 단순이 링크용으로만 사용할 것이라면 a태그를 이용하는 편이 났죠. 1. CSS 작성 a태그자체가 원래부터 마우스 동작에 반응을 합니다. 그러니 우리는 이 동작에 우리가 원하는 스타일을 적용하면 되는 것이죠. a태그의 기본스타일과 hover스타일을 우리가 원하는 스타일로 바꿔 봅시다. a태그 사이에 이미지나 글자 같은 것들이 없다면 a태그 자체가 표시되지 않기 때문에 크기를 지정하여야 합..

버튼 하면 보통은 인풋버튼(input button)을 생각합니다. 하지만 인풋버튼은 모양내기가 힘들다는 단점이-_-;;; 그래서 인풋이미지(input image)나 img를 사용하여 마진을 조종해서 사용하기도 합니다. 이 방법들이 나쁜방법은 아니지만 상황에 따라서 안맞는 경우가 좀있습니다. 그래서 좀더 범용적으로 사용이 가능한 div로 롤오버 버튼을 구현해 보겠습니다. 1. 레이아웃 구조 div로 롤오버 버튼을 구현하는 경우 적용되는 css나 용도에 따라 레이아웃이 달라 집니다. 이 글에서 사용할 버튼의 동작은 다음과 같습니다. 1)롤오버(이미지) 2)링크 이런 동작을 위해서는 아래와 같은 구조가 필요합니다. 버튼영역은 관리를 편하게 하려는 목적도 있기 때문에 필요에 따라서는 없어도 됩니다. 2. htm..

익스플로러 계열에서는 정상적인 CSS가 먹히지 않는 현상이 있습니다, 이런게 한두개가 아니긴 하지만 이 경우는 어떤 경우인지 알아봅시다. 1. 문제의 발견 아래코드로 html파일을 만들어 돌려봅시다. aaaaaaaa 귀찬으신 분들을 위한 파일 : 해당 파일을 다시 크롬에다 돌려보면 차이가 확실이 납니다. 'aaaaaaaa' 가 크롬에서는 고정되는데 익스플로러에서는 고정되지 않습니다. 이렇게 말이죠. 2. 해결방법 이렇게 되는 이유는 익스플로러의 경우 HTML코드가 정상적인 패턴을 가지고 있지 않으면 이전코드(익스플로러 7 이전버전들)로 작성된것으로 판단하여 호환모드가 강재로 적용되기 때문에 그렇다고 합니다. 이런 현상을 막기위해서는 문서형식을 지정하면됩니다. ( 참고 : 위키백과 - 문서 형식 선언 ) ..

구버전 익스플로러(6,7,8)에서 HTML5를 표시해주는 크롬 프레임입니다. 참고 : 구글 - 크롬 프레임 제목을 이렇게 달아놨지만 사실 특정조건이 맞으면 익스플로러엔진을 크롬엔진으로 바꿔주는 역활을 합니다. 익스플로러의 속도 자체를 늘려주기 때문에 은근이 설치해두신 분들이 있긴 하더군요 ㅡ.-; 설치가 제대로 됬다면 HTML5 테스트 페이지(클릭)을 눌러 테스트 해보세요. (참고 : 미물님의 블로그 - Google Chrome Frame - Hidden Active-X) 페이지가 나온다면 정상적으로 설치가 된것입니다. 페이지가 뜨지 않는 다면 브라우저를 껐다 켜보거나 재부팅을 하시면 됩니다. 이 플러그인을 활성화 시키기 위해선 개발자가 직접 페이지에 다음과 같은 코드를 넣어야 합니다. 해드에 다음 메타..

IBM에서 제공하는 강좌를 보고 정리한 내용입니다. IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 글순서 1.자주쓰는 태그 정리 [HTML5] 1-1. 문서에서 자주쓰이는 태그 정리 [HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS) [HTML5] 2. 동영상 재생 [HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용 [HTML5] 4. 캔버스를 이용하여 이미지그리기 이번 포스팅에선 정말 독특한 기능인 캔버스입니다. 캔버스 영역에 자바스크립을 이용하여 선이나 도형등을 그릴수 있습니다, 윈폼으로 치자면 드로우기능인데 태그로는 지원이 안되는듯 하네요. W3C의 규격을 보면 아직 진행중이라고 뜨는데......이게 표준이 진행중이라는건지 설명페이지가 진행중이라는건지 모르..