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

[CSS] @media query 미디어 쿼리, @media query 이해하기 미디어 쿼리는 단말기 유형(출력물 vs 화면)과, 어떤 특성이나 수치(화면 해상도, *뷰포트 너비 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 유용하다. *뷰포트(viewport) :: 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역. 웹브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면전체)을 말한다. 뷰포트 중에서도 지금 볼 수 있는 부분을 시각적뷰포트(visual viewport)라고 부른다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 레이아웃 뷰포트의 크기는 변하지 않지만 시각적 뷰포트는 더 작아진다. 1. 미디어쿼리 사용법 1-1) CSS 코드 내부에서 분기하는 방..

[HTML5] HTML 폼 요소 만들기 HTML 폼 요소 만들기 폼 관련 태그들 1. 폼 만들기 아이디, 비밀번호, 로그인 버튼, 회원가입 창 등 웹 사이트로 정보를 보낼 수 있느 모든 요소를 폼이라고 한다. 폼의 동작방식 :: 정보입력 -- 로그인 버튼 클릭 -- 서버로 내용 전송 -- 서버 내의 데이터베이스와 비교 -- 브라우저에 결과 표시 form :: 폼 만들기. 폼 태그의 속성에서 사용자가 입력한 자료를 서버로 어떤 방식으로 넘길지, 어떤 프로그램을 이용해 처리할것인지 지정할 수 있다. method :: 사용자가 입력한 내용을 서버로 어떻게 넘겨줄 것인지 지정. get :: 주소 표시줄에 입력값이 그대로 드러남. post :: 표준입력(standard input)으로 데이터를 전송. 입력길이에 ..

[HTML] form 작성하기 HTML form 구성방법 How to structure a web form HTML form을 만들 때 구조화하는 것이 중요하다. form이 사용할 수 있다는 것을 보장하고 접근성도 늘릴 수 있기 때문이다.(장애인들도 쉽게 사용 가능) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 알아보자. HTML폼들은 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 모든 브라우저에서 폼의 종류는 널리 구현되지 않았는데 이는 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 때문이다. 이 문서에서는 HTML 폼 요소들을 어떻게 사용하지 자세하게 설명할 것이다. #1. form 요소 요소는 공식정식으로 폼을 정의하는 요소로 이 요소의 ..

[jQuery] 필터링메소드 필터링 메소드 .first() .last() .eq() .filter() .not() .has() .is() .map() .slice() 출처 :: 필터링 메소드 .first() .last() .eq() .filter() .not() .is() 필터링(filtering)메소드 DOM트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다. 메소드 설명 .first() 선택한 요소 중에서 첫 번째 요소를 선택함. .last() 선택한 요소 중에서 마지막 요소를 선택함. .eq() 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함. .filter() 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택_함. .not..

[jQuery] 이벤트 연결 및 처리 on(), off(), one() 출처 1. 이벤트의 연결(event binding) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)함수를 작성해야 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트바인딩(event binding)이라고 한다. jQuery는 이벤트바인딩을 위한 다양한 방법을 제공한다. [예제] :: id가 "btn"인 요소에 클릭(click) 이벤트 핸들러를 바인딩하는 다양한 방법이다. $('#btn').click(function(event) { /* 실행하고자 하는 jQuery 코드 */ }); $('#btn').bind('click', function(event) { /* 실행하고자 ..

[CSS] transition, transition-delay, transform, calc vendor prefix #1. transition / transition-delay vendor prefix transition 은 IE10부터 지원한다. vendor prefixes -webkit-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; -moz-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; -o-transition : [..