본문 바로가기
반응형

전체 글209

[JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown) 목 차1. 자바스크립트 키보드 이벤트란?2. 키보드 이벤트 유형2-1. keydown2-2. keypress2-3. keyup3. 기본 키보드 이벤트 속성3-1. key3-2. code3-3. keyCode3-4. altKey3-5. ctrlKey3-6. shiftKey3-7. metaKey4. 기본 동작 제어4-1. preventDefault()4-2. stopPropagation()5. 사용 예제5-1. 키 입력 방지5-2. 특정 키 조합 방지 (단축키 구현)5-3. 입력 필드의 실시간 문자 감지5-4. 방향키 감지5-5. Caps Lock 감지5-6. Enter 키로 폼 제출 방지5-7. 백스페이스로 페이지 이동 방지 1. 자바스크립트 키보드 이벤트란?JavaScript의 키보드 이벤트는 사용자가 .. 2024. 12. 7.
티스토리 스크롤시 사이드바 고정 쉽게 따라하기 목 차1. 사이드바 고정 이유2. 사이드바 고정 방법2-1. HTML 편집 이동2-2. CSS 소스 추가하기2-3. 사이드바 광고 위치 조절하기 1. 사이드바 고정 이유티스토리 글을 읽으면서 스크롤을 내리게 되면 우측 또는 좌측 영역의 빈 공간이 허전하다고 생각합니다. 그래서 광고로 채워두면 블로그 수익에 도움이 된다는 다른 글들을 보고 사이드바 고정을 쉽게 하실 수 있는 방법에 대해 작성해 보겠습니다.필자는 북클럽 스킨을 사용하고 있습니다. 따라서 북클럽 스킨으로 간단하게 만드는 방법을 알려드리겠습니다.  2. 사이드바 고정 방법2-1. HTML 편집 이동[티스토리 관리자] - [스킨 편집] - [HTML 편집] 버튼 클릭 2-2. CSS 소스 추가하기html 편집에 들어가서 상단에 "CSS" 탭을 선.. 2024. 12. 6.
티스토리 구글 애스센스 광고 제대로 나오는지 확인하기 목 차1. 과연 내 광고가 노출되고 있는가?2. 블로그 광고 오류 확인하기3. 구글 애드센스 게시자 ID 확인하기4. 블로그 글 개발자도구 확인하는 법5. 송출된 광고 정보 확인하기 1. 과연 내 광고가 노출되고 있는가?티스토리를 시작한 블로거라면 누구나 구글 애드센스 연동을 해서 수익을 올리고 계실거라고 생각합니다. "과연 내 블로그, 내가 쓴 글에 나오는 구글 애드센스 광고가 내 광고가 맞을까?" 현재 내 글에 광고가 나온다고 생각하시겠지만 그 광고는 내 광고가 아닌 티스토리 자체 광고일 확률이 더 높습니다.티스토리는 2023년 6월 27일부터 블로그 글 상단, 하단에 랜덤으로 광고를 노출시킨다고 정책 발표를 했습니다. 참고 글) 티스토리 자체 광고 운영정책 실시 [안내] 6월 27일부터 티스토리 자.. 2024. 12. 5.
텍스트 입력을 위한 input 태그의 올바른 사용법 목 차1. 태그란?2. 기본 구조3. 태그 속성3-1. type3-2. name3-3. id3-4. value3-5. placeholder3-6. maxlength3-7. required3-8. disabled3-9. readonly3-10. pattern3-11. autofocus3-12. autocomplete4. type 속성별 예제4-1. 기본 텍스트 입력 (type="text")4-2. 비밀번호 입력 (type="password")4-3. 이메일 입력 (type="email")4-4. 숫자 입력 (type="number")4-5. URL 입력 (type="url")4-6. 전화번호 입력 (type="tel")4-7. 날짜 및 시간 입력4-8. 체크박스 (type="checkbox")4-9. .. 2024. 12. 5.
여러 줄 입력하는 textarea 태그 올바른 사용법 목 차1. 태그란?2. 기본 구조3. 속성3-1. name3-2. id3-3. rows3-4. cols3-5. placeholder3-6. disabled3-7. readonly3-8. maxlength3-9. wrap4. 예제4-1. 기본 텍스트 입력 필드4-2. placeholder 속성 적용4-3. 비활성화 된 텍스트 영역 (disabled 속성)4-4. 읽기 전용 텍스트 영역 (readonly 속성)4-5. 제한된 문자수4-6. 입력된 텍스트 가져오기4-7. 텍스트 동적 변경 1. 태그란?HTML의 태그는 여러 줄의 텍스트를 입력할 수 있는 입력 필드를 생성하는 데 사용됩니다. 주로 사용자로부터 긴 텍스트 데이터를 입력받기 위해 사용되며, 예를 들어 댓글 입력란, 메모 입력란 등에 사용됩니.. 2024. 12. 4.
HTML select 태그와 option 태그 사용법 목 차1. 기본 구조2. 문법3. 태그 속성3-1. name3-2. id3-3. multiple3-4. size3-5. disabled4. 태그 속성4-1. value4-2. selected4-3. disabled5. 예제5-1. 기본 드롭다운5-2. 다중 선택 가능 드롭다운5-3. 비활성화 된 옵션 포함5-4. 선택된 값 가져오기5-5. 옵션 동적 추가 1. 기본 구조HTML의 태그는 드롭다운 목록을 생성하기 위해 사용됩니다. 사용자가 목록에서 하나 이상의 옵션을 선택할 수 있게 합니다. 태그는 기본적으로 태그와 함께 사용됩니다.  2. 문법 Option 1 Option 2 Option 3 태그: 드롭다운을 감싸는 태그입니다. 태그: 드롭다운 내의 각 옵션을 정의합니다. 기본 .. 2024. 12. 3.
[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5. pageshow 이벤트6. pagehide 이벤트7. error 이벤트8. abort 이벤트 1. DOMContentLoaded 이벤트 설명: HTML 문서의 구조가 모두 로드되고, DOM이 완전히 생성되었을 때 발생합니다. CSS와 스크립트는 아직 로드되지 않았을 수도 있습니다.특징: 페이지의 기본 DOM 요소와 상호작용을 시작하기에 적합한 시점입니다.사용 예제document.addEventListener("DOMContentLoaded", function () { console.log("DOM is fully loaded and parsed"); // DOM 요소.. 2024. 12. 3.
[jquery] 동적 요소 이벤트 바인딩 처리 목 차1. $(document).on()2. 문법3. 사용 예제3-1. 기본 이벤트 바인딩3-2. 이벤트 위임3-3. 여러 이벤트 바인딩3-4. 이벤트 핸들러에 데이터 전달3-5. 추가된 동적 리스트에 이벤트 바인딩3-6. 이벤트 해제3-7. 특정 요소에 이벤트 제한3-8. 이벤트 버블링 막기4. on() 과 기존 메서드 비교 1. $(document).on()$(document).on() 메서드는 jQuery에서 이벤트 핸들러를 동적으로 등록하거나 위임할 때 사용되는 강력한 메서드입니다.on() 메서드는 특정 이벤트가 발생했을 때 실행할 함수를 지정합니다.이벤트를 직접 요소에 바인딩하거나, 이벤트 위임을 사용하여 동적으로 생성된 요소에도 이벤트를 적용할 수 있습니다.기존의 bind(), delegate.. 2024. 12. 2.
[jquery] click() 메서드와 on("click") 메서드의 차이 목 차1. click() VS on.("click") 비교2. 비교 예제2-1. 정적 요소에 이벤트 바인딩2-2. 동적 요소에 이벤트 바인딩2-3. 다중 이벤트 처리3. 정리 1. click() VS on.("click") 비교특징click()on("click")동적 요소 지원지원하지 않음지원 (이벤트 위임 사용 시 가능)이벤트 위임불가능가능 (부모 요소에 이벤트 바인딩)다중 이벤트 등록단일 이벤트만 처리 가능여러 이벤트 유형 등록 가능사용법 간결성더 간단한 방식상대적으로 복잡권장 여부간단한 경우 사용 가능대부분의 경우 권장  2. 비교 예제2-1. 정적 요소에 이벤트 바인딩// click() 사용$("button").click(function() { alert("Button clicked!");});.. 2024. 12. 2.
jQuery 페이지 로드 후 실행 이벤트 목 차1. $(document).ready()2. 주요 개념2-1. DOM이 로드 되었을 때 실행2-2. HTML 문서와 외부 리소스 로드의 차이3. 문법4. 사용 예제4-1. 기본 사용4-2. 축약형 사용4-3. 이벤트 핸들러 등록5. 여러 개의 ready() 호출6. $(document).ready()와 window.onload의 비교7. 정리 1. $(document).ready()$(document).ready()는 jQuery에서 DOM(Document Object Model)이 완전히 로드되고 파싱된 후에 실행되는 코드를 정의하는 메서드입니다.이 메서드는 HTML 문서가 완전히 로드된 뒤에 JavaScript 코드를 실행할 수 있도록 보장하며, 특히 문서 로드 시점의 이벤트 처리에 유용합니다... 2024. 12. 2.
반응형

티스토리툴바