jQuery를 이용한 기초 DOM 트리 다뤄보기

DOM 트리 다루기 이 포스팅에서는 jQuery 를 이용한 "DOM(Document Object Model) 을 간단히 다뤄보도록 합니다. 제이쿼리 메서드 중에 before, appendTo, append, wrap 그리고 기타 메서드를 사용하여 DOM 을 제어해보도록 하겠습니다. 아래 코드펜 소스를 참고하세요. Source See the Pen DOM 트리 다루기 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub
Web Tech/jQuery 2017. 4. 3. 14:40

음수마진(collapse margin) 을 이용한 버튼 정렬

Collapsing margin for Align box 이 포스팅에서는 버튼에 대한 정렬을 음수마진을 이용하여 구현해 보도록 하겠습니다. 일반적으로 왼쪽, 중앙, 오른쪽 버튼 모음이 있다고 가정했을 때 많이 이용하는 방법이 좌,우측 버튼 모음에 대한 정렬을 absolute 를 이용하여 정렬하는 경우가 많습니다. 이 방법이 올바르지 않은 것은 아니지만 효율성, 재사용성이 부족합니다. absolute 를 이용하는 경우 가령 높이값이 다른 버튼타입이 있거나 중앙버튼이 없으면서 좌,우측 버튼만 있는 경우에는 버튼을 감싸고 있는 컨테이닝 박스에 높이값을 지정해 주기 위해서 멀티클래스를 이용하는 경우가 대부분입니다. 이런 경우에는 높이값에 대한 멀티 클래스를 부여하기도 하면서 높이값이 다른 버튼이 많을 수록 멀티..
StyleSheet/CSS 2017. 3. 31. 15:15

Collection of Button Hover Effects

CSS3 버튼 효과 이 포스팅에서는 CSS3 로 마우스 오버시에 따른 버튼 효과에 대해 알아봅니다. CSS3 Button Hover Source See the Pen 마우스 오버 버튼 CSS3 효과 by jaeheekim (@jaehee) on CodePen. CSS Source Preview css [class*="btn-"] { position: relative; display: inline-block; width: 100%; color: #fff; font-size: 16px; line-height: 45px; margin-right:3em; max-width: 160px; text-decoration: none; text-transform: uppercase; vertical-align: midd..
StyleSheet/CSS 2017. 2. 25. 10:16

생성자 상속과 생성자 훔치기

JS : prototype constructor inheritance & constructor stealing이 포스팅에서는 예제를 통하여 생성자를 상속하고 생성자를 훔치는 코드에 대해 살펴보도록 합니다. prototype constructor inheritance다음의 예제 코드를 살펴보도록 합니다. javascript function Rectangle(length, width) { this.length = length; this.width = width; } Rectangle.prototype = { getArea : function () { return this.length * this.width; }, toString: function () { return "[Rectangle : " + this..
JavaScript/Core & 개념ㆍ용어 2017. 2. 24. 07:00

CSS3 Checkbox Styles Collection

CSS3 를 체크박스 스타일 Checkbox Source See the Pen 체크박스 스타일 모음 by jaeheekim (@jaehee) on CodePen. CSS Preview css /* 체크박스 컨테이닝 박스 공통 스타일 정의 */ .page section > div { margin: 25px auto; position: relative; } .page section input[type="checkbox"] { visibility: hidden; } /** * ================================ * slideOne * ================================ */ .slideOne { top: 10px; width: 50px; height: 10px; ..
StyleSheet/CSS 2017. 2. 23. 07:00

CSS3 Menu Animation

CSS3 를 이용한 메뉴 애니메이션 Menu Animation Source See the Pen 메뉴 애니메이션 by jaeheekim (@jaehee) on CodePen. CSS Preview css * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } ul li { list-style: none; } body { position: relative; display: flex; justify-content: center; align-items: center; /* 100vh 이면 애니메이션 떨림, 현재 body 를 기준으로 메뉴 정렬을 시켜놨기 때문 */ min-height: 99.999vh; background: ..
StyleSheet/CSS 2017. 2. 22. 15:00

CSS3 : Modal Animation

레이어 팝업 CSS3 애니메이션 CSS3 를 이용한 모달 애니메이션에 대해 살펴보도록 합니다. 소스는 코드펜의 css 를 참고하세요. Modal Animation Source See the Pen 모달 애니메이션 by jaeheekim (@jaehee) on CodePen. css * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; height: 100%; font-family: helvetica neue, helvetica, arial, sans-serif; } .content { min-height: 100%; height: 100%; background: #fff; position: relative; ..
StyleSheet/CSS 2017. 2. 21. 11:24