쿠카의 개발일지

사용자의 키보드 입력을 감지 키보드 이벤트 타입 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생합니다. (예전에는 keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.) 키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생할 수 있습니다. 예를 들어, window에서 발생하는 keydown 이벤트를 처리하려면 다음과 같이 이벤트 처리를 위한 콜백(callback) 함수를 설정해주면 됩니다. window.onkeydown = (e)..

.css 파일을 보면 꺽쇠 > 를 종종 보곤 합니다. 이 친구가 등장했을 때는 어떤 역할을 하는지 간단한 예제를 통해 알아보겠습니다. 우선 다음과 같은 html 코드 블럭이 있다고 가정하겠습니다. 이 상황에서, 다음과 같은 css 코드로 꾸며준다면 어떻게 될까요? 하위 선택자 사용 결과는 "안녕1", "안녕2" 모두 빨간색으로 표현됩니다. "아이디가 test인 요소 내 모든 p 요소들의 색상을 빨강으로 해줘"라는 의미가 되기 때문입니다. 반면, 다음과 같은 css 코드로 꾸며주면 "안녕1"만 빨강으로 표현됩니다. 자식 선택자 사용 이렇게 되는 이유는 #test와 p 사이의 꺽쇠(>) 때문입니다. 꺽쇠가 추가됨으로 위 css 코드는 #test 요소 내 p 요소들 중에 자식인 p 요소에 대해서 빨강색을 적용..

HTML 태그 정의 및 특징 태그는 HTML 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용합니다. 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 , 요소와 함께 사용됩니다. 브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다. 요소는 요소의 자식 요소로써, 반드시 모든 , , 요소 다음에 위치해야 합니다. 또한, 요소는 반드시 하나 이상의 요소를 포함하고 있어야 합니다. 와 , 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만,..

getElementById()없이 id.value가 가능한 이유 아이디 : 일반적으로 자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때 위 예제와 같이 document.getElementById("id").value를 이용한다. 그러던 중 우연히 id.value를 사용해봤는데, document.getElementById("id").value와 동일하게 동작했다! 여기서 두가지 의문이 생겼다. 1. id.value는 어떤 원리로 동작하는 것인가? 2. id.value와 같은 단순한 형태를 두고 우리는 왜 굳이 getElementById를 사용하는가? 1. id.value의 동작원리 html 태그의 id 속성값은 자바스크립트에서 전역변수로 사용될 수 있다. x = document.getElementB..

jQuery를 통해 select박스 제어 /********** value **********/ $(선택자).val(); //value값 가져오기 $("#id").val(); //id로 접근하여 value가져오기 $("select[속성='속성명']").val(); //속성으로 접근하여 value가져오기 /********** text **********/ $(선택자 option:selected).text(); //text값 가져오기 $("#id option:selected").text(); $("select[속성='속성명'] option:selected").text(); text값은 가져올때 해당자식인 option의 선택된 개체를 가져와야합니다. option:selected 해당 옵션이 없으면 select ..