qOOp

DOM의 구조에서 getElementById와 함께 엘리먼트를 가져올수 있는 또 다른 방법이 getElementsByTagName 이다. 일반적으로 ID를 사용해서 엘리먼트를 가져올 경우에는 ID는 문서내에서 유일하다고 생각해서 s가 붙지 않지만 TagName 의 경우에는 한 문서내에서 같은 Tag가 많이 사용되므로 반드시 s 가 붙는다. 따라서 getElementByTagName 가 아니라 getElementsByTagName 이다. 그리고 Tag의 경우에는 여러개가 있을 가능성이 있어서 보통의 경우 배열 형태로 엘리먼트를 가져온다. 사용예 function getElement() { var tag = document.getElementsByTagName("div"); alert (tag.length);..

CSS와 DOM과 Javascript를 이용한 간단한 ShowHide. SHOW HIDE TEST M1 M2 M3 M1............. M2............. M3............. 조금만 생각을 하면 다양하게 응용가능하며, 색상도 함께 바꿀수 있다. 반드시 DOM을 사용할경우에는 대소문자를 구별하므로 getElementById 라고 표기해야한다.

Input 필더에 숫자 이외에는 입력이 되지 않게 하기.. 코드를 복사해서 qoop.html로 저장하고 브라우저로 문서를 연다. 그런다음 입력폼에 숫자가 아닌 다른 문자를 입력하면 문자가 입력이 되지 않는것을 볼수 있다. 당연히 숫자를 입력하면 숫자는 입력이 된다. 아스키코드 48부터 57까지가 숫자 0에서 9까지의 문자를 나타내기 때문에 만약 키보드의 입력값이 아스키 코드 48보다 작거나 57보다 클 경우에는 false 값을 돌려줘 입력이 되지 않게 한다.

OnLoad시 바로 실행하기 자바스크립트를 페이지가 로드되는 순간 자동으로 실행하는 방법은 일반적으로 형식으로 하는 방법을 많이 쓰고 있다. 당연히 스크립트 부분에 function load() 라는 함수가 있어야한다. … 이것을 가장 많이 쓰는 방법이다. 바디 부분에 입력을 하지 않고 스크립트 부분에서 바로 처리하는 방법이 있다. window.onload 이다. 이런 형식으로 window.onload를 사용하면 바디 부분에 태그를 입력하지 않아도 쉽게 사용할수 있다.

Date객체 var Today = new Date(); ex) document.write(Today); // 현재의 날짜 시간 등을 반환한다. getYear() : Date의 년도를 반환한다. ex) var Ytime = Today.getYear(); document.write(Ytime); // 올 년도를 반환한다. getMonth() : Date의 월을 반환한다. 0(1월)- 11(12월) ex) var Mmonth = Today.getMonth(); document.write(Mmonth); // 이번달을 반환한다. getDate() : Date객체의 일을 반환한다. 값의 범위는 1-31. ex) var Dday = Today.getDate(); document.write(Dday); // 오늘의 ..

검색시 팝업윈도우로 검색될때 까지 기다리기를 보여주는 창. 다른 방식도 많이 있지만.. 간단하게 쉽게 쓸수 있는 방법.. 위의 소스는 윈도우가 로드되면 자바스크립트가 실행되게 되어 있는데 만약 검색 버튼을 누른다고 생각하면 onClick 이벤트로 실행을 하면 된다. 현재의 파일을 실행하면 실행될 파일이 없으므로 새로운 윈도우가 표시되었다가 순식간에 사라진다.

CSS를 사용한 1단 레이아웃 작성하기 CSS를 사용하여 레이아웃을 만들면 테이블을 사용하여 만든 레이아웃 보다 차후에 수정하기가 쉽다. 먼저 전체의 레이아웃을 boxer 로 설정하고, 그 레이아웃 안에 header, content, footer 로 나눈다. 레이아웃 1단 작성하기 Header : 헤더부분입니다. Content : 내용부분입니다. Footer : 푸터부분입니다. COPYRIGHT BY qOOpTM SOME RIGHTS RESERVED 위의 코드를 작성한후 브라우저로 확인하면 .. HTML 소스를 보면 전제를 ID가 boxer 인 div 태그로 감싸고 그 안에 3개의 div 로 header 와 content, footer 로 나누었다. header 의 div 태그 내에 로고와 메뉴 등을 편..

DOM이란 Document Object Model 의 약자로서 "문서객체모델" 이다. CSS가 웹페이지의 스타일 변경을 한다고 하면, DOM은 웹페이지를 동적으로 움직일수 있게 도와준다고 생각하면 된다. 그러나 DOM만 있다고 해서 웹페이를 동적으로 만들수 있는것은 아니고, Javascript등의 제어를 통해서 동적으로 만들수 있다. getElementById() 메소드는 특정 아이디를 가진 요소 노드에 직접 접근할수 있다. 대소문자를 구분하므로 반드시 getElementById 로 적어야 한다. 메인메뉴 서브메뉴1 | 서브메뉴2 | 서브메뉴3 | 서브메뉴4 | 서브메뉴5 여기부터는 내용입니다. 2개의 DIV 태그에 각각 아이디를 부여하고 그 아이디를 getElementById 메소드로 접근해서 해당 스..

스타일 시트로 앵커 적용하기 앵커의 속성에는 4가지가 있다. link, visited, hover, active 이다. 사용방법은 스타일 태그 내에 a:link { color:red; } 링크 a:visited { color:purple; } 한번 방문한 링크 a:hover { color:green; } 마우스가 링크위에 올라갔을때 a:active { color:yellow; } 마우스를 눌렀을때 형식으로 사용하면 된다. 여기서 주의 할것은 반드시 위의 순으로 코딩이 되어야 한다는 것이다. 만약 순서가 바뀔경우에는 적용이 되지 않는 경우가 있으므로 반드시 link, visited, hover, active 순으로 코딩해야 한다. 쿠프 네이버 위의 쿠프는 빨강색으로 표시가 된다. text-decoratio..

박스 모델 페이지 내에서의 모든 태그들은 사각형의 박스 모델로 표현이 된다. content 부분이 내용이 들어가는 부분이다. content 부분은 보이지 않는 ( 패딩, 보더, 마진 미설정시 ) padding, border, margin 으로 둘러싸여져있다. 안녕하세요 ! 반갑습니다. 오늘은 좋은 날씨입니다. 먼저 이해를 돕기 위해 border를 1px , 빨간색 실선으로 설정. 코드를 실행하면 안녕하세요와 반갑습니다.... 가 빨간색 실선으로 붙어서 표시되는 것을 볼수 있다. 그러면, 여기에 margin을 추가해 보자. 위의 코드에서 p { border-width:1px; border-color:red; border-style:solid; margin:5px; } margin을 추가해서 실행해보면, 안..