본문 바로가기

분류 전체보기290

HTML 이벤트 처리하는 3가지 방식 HTML 태그에 달리는 이벤트를 처리하는 3가지 방법에 대해서 설명드립니다. HTML DOM element addEventListener함수 이용 HTML DOM element 속성 이용 HTML 속성 이용 아래의 예제는 HTML button의 onclick 이벤트를 예제로 설명드립니다. HTML DOM element addEventListener함수 이용 가장 권장되는 방식입니다. 기존 이벤트를 유지하고, 이벤트를 추가하는 방식으로 진행됩니다. 실행이 될 때 기존에 추가된 이벤트들이 실행되고, 여기서 추가된 이벤트가 실행 됩니다. 이벤트 선언하는 방식은 이벤트를 연결해줄 DOM객체를 얻어온 후 addEventListener함수를 이용해서 해당 이벤트명과 함수를 연결해 줍니다. ※ 이벤트명은 보통 "on.. 2022. 7. 10.
CSS 아이폰 스위치 버튼(체크박스) CSS를 이용해서 아이폰에서 사용되는 스위치 버튼을 구현하는 방법입니다. 2022. 7. 10.
티스토리 Odyssey 스킨에 다크테마 적용 티스토리의 Odyssey 스킨에 다크테마를 적용한 css소스입니다. 화이트, 다크 계열 색상을 반전시킨 버전입니다. (다크->화이트, 화이트-> 다크) 색상 적용 방식 #333 형식: #fff - #333 = #ccc rgba(111, 111, 111, 111) 형식: rgba(255 - 111, 255 - 111, 255 - 111, 111) = rgba(144, 144, 144, 111) 기타 색상(붉은, 초록, 파랑)은 그대로 유지 했습니다. ("/* 색상변경 안 함 */" 주석 참조) 스킨 적용하기 1. 블로그 관리 - 스킨 편집 2. html 편집화면으로 이동 3. css탭으로 이동 4. css 제일 하단에 아래의 내용을 복/붙하여 적용합니다. 다크테마 CSS 최종 소스 /* Odyssey da.. 2022. 6. 29.
JavaScript 태그안의 내용 가져오기, 변경하기 JavaScript로 html 태그로 둘러싸인 내용을 가져오거나, 변경하는 방법입니다. 아래는 태그안의 내용을 가져오거나, 변경하기 위해 사용되는 속성들입니다. 각 각의 요소에 대한 간략한 설명은 아래와 같습니다. innerText: 순수 텍스트 처리를 합니다. textContent: 순수 텍스트 처리를 하지만 줄 바꿈은 유지 됩니다. innerHTML: html 태그를 유지하며 처리 됩니다. 위 요소들에 대한 내용 가져오기, 변경하기에 대해서 아래에 예제를 나열하니, 사용 목적에 맞게 적절하게 사용하시기 바랍니다. 2022. 6. 29.
jQuery $(document).ready 대체 jQuery의 $(document).ready(function() {...})을 대체할 수 있는 vanilla JavaScript구문은 아래와 같습니다. jQuery $(document).ready() 원문 $(document).ready(function() { // ... }) Vanilla js 대체 구문 document.addEventListener("DOMContentLoaded", () => { // ... }) 2022. 6. 27.
CSS 접근자 css 접근자 정의 및 예시입니다. .class .intro class="intro"인 모든 요소 선택 .class1.class2 .name1.name2 class 속성 내에 name1 과 name2 가 모두 설정된 모든 요소를 선택합니다 . .class1 .class2 .name1 .name2 name1 을 가진 요소의 자손인 name2 를 가진 모든 요소를 선택합니다 . #id #firstname id="firstname"인 요소를 선택합니다. * * 모든 요소 선택 element p 모든 요소를 선택합니다. element.class p.intro class="intro"인 모든 요소를 선택합니다. element,element div, p 모든 요소와 모든 요소를 선택합니다. element eleme.. 2022. 6. 27.
반응형

티스토리툴바