전체 글

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

slick slick slick_github slick 예제 #Settings settings Type Default Description accessibility boolean true 탭 및 화살표 키를 사용한다. autoplay: true일 경우, 슬라이드 변경 후 브라우저 포커스를 현재 슬라이드(또는 여러개의 slideToShow 인 경우, 현재 슬라이드의 첫번째)로 설정한다. 또한 완벽한 접근성 준수를 위해 focusOnChange를 활성화한다. adaptiveHeigh boolean false 슬라이더 높이를 현재 슬라이드에 맞춘다. appendArrows string $(element) 방향 화살표 변경.(Selector, htmlString, Array, Element, jQuery obj..

[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%; }..