전체 글

문서의 로드시점 - onload / DOMContentLoaded 💡일반적으로, 스크립트 문서의 마지막 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 영역에 스크립트가 삽입되거나, 외부의 파일에 정의되어 있다면 이벤트를 문서의 로드 시점에 맞게 처리해야 한다. 1. onload 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트. (load 이벤트라 한다.) window.onload = function() { // 실행될 코드 } 문서에 포함한 모든 콘텐츠가 로드된 후 실행되므로 불필요한 로딩 시간이 추가될 수 있다. 동일한 문서에 오직 onload는 하나만 존재해야 한다. 중복될 경우, 마지막 선언이 실행 외부 라이브러..

웹 표준성(Web Standards) 웹 표준이란? 사용자가 어떤 브라우저나 기기를 사용해도 내용을 동일하게 볼 수 있도록 하는 것. 표준화 단체인 W3C가 권고한 표준안에 따라 웹을 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다. 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다. 즉, 웹 접근성이 더 큰 개념이며. 웹 표준은 웹 접근성을 구현하기 위한 부분적 요소다. 웹 표준 관련 기술의 소개 구조 (X)HTML 표현 CSS 동작 Script 1. 구조 언어 (X)HTML & XML HTML5는 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표. 많은 기업들이 HTML5의 표준화에 힘을 보태고 있고, Firefox, Opera, Safari, Chrom..

웹접근성(Web Accessibility)웹 접근성(Web Accessibility)웹 접근성(Web Accessibility)웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것.장애인 및 고령자 등을 포함한 모든 사람다양한 플랫폼 및 장치, 웹 브라우저 등의 모든 환경웹의 가장 중요한 요소인 HTML은 다양한 플랫폼과 장치에 독립적인 정보교환 수단을 제공하기 위해 탄생되었다. 그래서 사용자의 환경이나 사용하는 기기, 운영체제에 가능한 한 영향을 받지 않고 웹이 제공하는 정보를 사용자에게 전달하고 하는 목적에서 만들어진 정보 전달 체계이다.하지만 국내 웹의 현실은 웹의 기본적이고 중요한 목적을 무시하고 특정 기기나 운영체제에만 최적화된 경우가 많다. 이러한 정보의 격..

CSS 방법론(BEM/OOCSS/SMACSS) CSS 설계의 중요성 코드의 재사용성을 위해 쉽게 유지보수 하기 위해 확장을 가능하게 하기 위해 클래스명으로도 무슨 의미인지 예측 가능하도록 하기 위해 BEM (Block Element Modifier) Block, Element, Modifier 로 나누어 컴포넌트 기반의 웹 개발 접근법 중 하나. 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는 것이 목표 복잡한 UI를 가진 페이지의 인터페이스 개발 환경을 쉽고 빠르게 하며, 코드의 재활용을 높일 수 있다. 클래스명이 용도, 형태를 의미하므로 직관적이나 길고 복잡해지는 것이 단점. 1) Block 재사용 가능한 컴포넌트. (코드의 구조적 덩어리) 클래스명은 하나의 단어 사용, 길어질 경우 단일 하이..

🤦‍♀️ jQuery each() 함수를 공부하다가 return false; 가 breaking 안됨을 알았다.(each함수안에서 조건문에 만족하면 break 가 되야 하는데 안됨.) 찾아보면서 return과 break의 확실한 개념다집기가 필요했고, 후에 each()를 확실히 return false 할 수 있는 방법을 알아보았다.return / break > return / return true / return false > $.each()  return false 하는 방법순으로 정리해볼 예정이다.  [javaScript] return / break1. return함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.function getRectArea(width, height) { i..

보호되어 있는 글입니다.

[jQuery] click(), focusin() 이벤트 충돌 1 2 3 .btn을 클릭 시, .menu리스트가 나오는 방식이다. 이 때, .btn에 click이벤트와 focusin이벤트를 같이 걸어주면 충돌이 일어난다. // jQuery // 클릭이벤트 먼저 실행! $('.btn').on('click', function(e) { console.log(e.type); if($('.menu').css('display') === 'none') { $(this).next('ul').css({display: 'block'}); } else { $('.menu').css({display: 'none'}); } }).on('focusin', function(e) { console.log(e.type); $('.me..

label 태그 태그 안에는 , 태그가 들어가면 안된다. children() / find() .children() 메소드 div(할아버지) ul(부모) li(자식) span(손자1) span(손자2) .find() 메소드 div(할아버지) ul(부모) li(자식) span(손자1) span(손자2) .container * { display: block; border: 1px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } $(function() { // 1. children() $('ul.child').childern('*').css({border: '2px solid red'}); // 2. find() $('ul.find').find..