[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..

[CSS] padding position 영역 조건 parent 요소에 padding을 주고 relative 해준다. child는 absolute 일 때, 위치를 어떻게 잡아줄까? .parent { width: 200px; height: 200px; border: 1px solid #000; position: relative; padding: 20px; box-sizing: border-box; } .child { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: red; } parent의 padding을 무시하고 child는 top: 0; left: 0; 방향에 있게 된다. 방법 .wrap { width: 200px;..

[CSS] height: 100% / height: auto; height: 100%; 부모 컨테이너의 높이를 100% 로 설정한다. (부모높이 영향) #innerDiv 는 height: 50px height: auto; 높이는 자식의 높이에 따라 달라진다. (자식높이 영향) #innerDiv는 height: 10px Reference https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto

[HTML] Meta Tags 1. 정의 태그는 HTML 문서의 *metadata를 의미한다. Metadata는 중요한 데이터이다. *메타데이터는 "데이터에 관한 데이터"를 의미한다. 문서에 관한 정보로 구성되어 어떤 정보로 구성되어야 하는가에 대한 규칙은 정해진 바 없다. 일반적으로 제공자(author), 저작권(copyright), 키워드(keyword), 언어(language)등 문서의 성격을 파악하는데 도움을 주는 정보가 포함된다. 이러한 정보는 사람보다는 기계(브라우저, 검색엔진)을 위한 것이다. 태그는 항상 우리나라의 경우 웹 페이지에 사용되는 문자셋은 크게 euc-kr과 UTF-8가 있다. EUC-KR 2350개의 한글문자, 한국에서 통용되는 한자, 영문을 표한할 수 있다. 문서를 작성할 때..

[JavaScript] setTimeout과 setInterval 출처 :: 스케줄링: setTimeout과 setInterval 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 "호출 스케줄링(scheduling a call)"이라 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다. setTimeout :: 일정 시간이 지난 후에 함수를 실행하는 방법. setInterval :: 일정 시간 간격을 두고 함수를 실행하는 방법. 자바스크립트 명세서엔 setTimeout과 setInterval가 명시되어 있지 않다. 하지만 시중에 나와있는 모든 브라우저, Node.js를 포함한 자바스크립트 호스트 환경 대부분 이와 유사한 메서드와 내부 스케줄러를 지원한다. setTimeou..

[jQuery] :visible 조건 Q. $('.box').is(':visible') 실행되지 않을까? 먼저 코드를 보자. click .box { display: block; width: 200px; height: 200px; background-color: green; /* 숨겨준다. */ opacity: 0; visibility: visible; } $('button').on('click', function() { if(!$('.box').is(':visible')) { // box visible. $('.box').css({opacity: 1, visibility: 'visible'}); } else { // box hidden. $('.box').css({opacity: 0, visibility..

[CSS] opacity / visibility / display 차이점 요소를 표시할 수 있으나 공간을 차지하고 클릭을 함에 따라 다르다. property occupies space(공간 차지) consumes clicks(클릭 이벤트) opacity: 0 O O visibility: hidden O X display: none X X 클릭이벤트는 ondbclick, onmousedown, onmousemove 등과 같은 다른 포인터 이벤트도 사용한다. 본질적으로 visiblity: hidden은 opacity: 0와 pointer-events: none의 조합처럼 동작한다. 출처 :: visibility:hidden vs display:none vs opacity:0 display,visibility..

[CSS] responsiveFullScreen 이미지 넣기 img VS background-image script없이 HTML / CSS 만 사용!! #1. background-image * { margin: 0; padding: 0; } html, body { height: 100%; } .bg { background-image: url("https://www.w3schools.com/howto/img_girl.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; } #2. img 2-1) [예제1] html, body { margin: 0; height: 100%; }..