onkeydown, onkeyup, onkeypress 이벤트는 키보드 입력시 동작 시점에 따라 발생하는 키보드 이벤트 이다. onkeydown : 키를 눌렀을때 이벤트이다 (shift, alt, controll, capslock 등의 모든 키에 동작한다. 단 한영변환, 한자 등의 특수키는 인식 못한다). onkeyup : 키를 눌렀다가 땠을 때 이벤트이다 (onkeydown 에서 인식하는 키들을 인식 한다). onkeypress : 실제로 글자가 써질때 이벤트이다 (shift, tap, enter 등의 특수키는 인식 못한다). 아래 예제는 jQuery 라이브러리를 사용해서 구현해 보겠다. 기본 html 소스남은 글자수150 실행 결과는 아래와 같다. onkeypress 이벤트는 한글을 지원하지 않는다.
[css] 여백 (margin, padding) 속성 css 에서 margin 과 padding 속성은 border 를 기준으로 각각 바깥쪽 여백, 안쪽 여백을 의미한다. margin과 padding 은 값을 1~4 개 까지 지정할 수 있다. div { margin: 5px 10px 15px 20px; } /* top-5px, right-10px, bottom-15px, left-20px */ div { margin: 5px 10px 15px; } /* top-5px, right&left-10px, bottom-15px */ div { margin: 5px 10px; } /* top&bottom-5px, right&left-10px */ div { margin: 5px; } /* all-5px */ ma..
[css] position (static, relative, absolute, fixed) 의 속성 position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다. position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다. position 속성 사용법 static (기본값) :위치를 지정하지 않을 때 사용한다. relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향..
[css] clear(none, both, left, right) 의 속성 이전에 float 속성에 대해서 배웠는데, float 은 왼쪽, 오른쪽으로 해당 객체를 위치 시켜서 정렬하는 속석이었다. float(none, left, right) 의 속성 보기 그렇다면 float 속성을 적용한 해당 객체의 다음에 오는 객체가 붙지 않게 하려면 어떻게 해야 할까? 바로 clear 속성을 사용 하면 된다. clear 속성 사용법 none (기본값) : clear 속성을 설정하지 않은 것과 같다. left : 왼쪽으로 붙는 float 정렬을 취소 한다. right: 오른쪽으로 붙는 float 정렬을 취소 한다. both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다. 기본 html 소스a 영역a 영역이 있..
[css] float(left, right, none) 의 속성 float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다. float 속성은 묶음 태그(block element) 만 적용할 수 있다. 묶음 태그 : 등 float 의 속성 사용법 none (기본값) : 정렬하지 않는다. left : 왼쪽으로 정렬한다. right: 오른쪽으로 정렬한다. 기본 html 소스a 영역a 영역이 있습니다. 실행 결과는 다음과 같다. 이제부터 위의 html 문서에서 float 속성을 적용해 보자. 1. float: none div {width: 100px;height: 100px;float: none;} float: none 속성은 기본값으로 block element 기본 속성을 그대로 유지한다. 2. ..
[css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이 display 는 해당 요소를 어떻게 표시할지를 정의하고, visibility 는 요소를 보일지 말지를 정의하는 css 속성이다. display 의 속성 사용법 none : 해당 영역을 생성하지 않는다. 공간을 차지하지도 않는다. inline (기본값) : 앞뒤로 줄바꿈 되지 않는다. inline-block : inline 인데 block 처럼 표시한다. block 요소가 줄바꿈 되지 않고 옆으로 나열된다. block : 앞뒤로 줄바꿈 된다. 기본 width 가 100% 를 차지하게 된다. 기본 html 소스a 영역b 영역c 영역a, ..
자바스크립트에서는 문자열이나 배열에서 특정 문자를 포함하는지의 여부를 확인하기 위해서는 indexOf() 함수를 사용해야 한다. indexOf() 함수는 특정 문자의 위치값을 index로 반환하는 함수이다. 사용법은 아래와 같다. "문자열".indexOf("찾을 문자") [예 1] 위 예제에서는 해당 문자열에 "테스트" 가 없기 때문에 "실패!"를 출력한다. indexOf() 함수는 특정 문자의 위치값을 index로 반환하기 때문에 if 조건문에서 -1 의 값을 가지는지의 여부를 확인한다. 만약에 텍스트 안에서 조건 문자열을 찾는다면 if 조건문에서 -1 이 아닌 0 이상의 양수 값을 갖게 된다.
자바스크립트에서 소수점을 계산하다보면 값이 이상하게 나오는 경우가 있다. [예 1] : 0.1 + 0.2 의 경우 답은 0.3 이지만, 실제로는0.30000000000000004 가 나온다. [예 2] : 6157000 * 9.133 의 경우에도 답은 56231881 이지만, 실제로는 56231880.99999999 로 나온다. 이와 같은 오류에 대한 해결 방법은 toFixed() 함수를 사용 하는 것이다. (0.1 + 0.2).toFixed(1) 파라메터 값으로 1은 소수점 1번째까지 표시한다는 의미이다. 만약 2자리를 표시하고 싶으면 toFixed(2), 소수점을 표시하고 싶지 않다면 toFixed() 를 사용하면 된다.