jQuery CSS 메소드 사용자 오버라이딩

jQuery CSS 메소드 사용자 정의 & 오버라이딩(Overriding) jQuery css 메소드는 인자값으로 객체리터럴 또는 속성,값을 정의하지만 stylesheet 와 같이 border: 1px solid #fff; padding:2px 10px; 을 인자로 전달할 수 없습니다.하지만 사용자 정의 오버라이딩을 통해 CSS에서 정의하는 방법으로 CSS 메소드에 인자값을 전달할 수 있도록 할 수 있습니다. E.g.) $('.selector').css('border: 1px solid #fff; padding:2px 10px;'); JavaScript 'use strict'; /** * ----------------------------------- * jQuery css 메서드 Inherit Over..
Code Lab 9년 전

배경이미지 전체화면 고정하기

Background Image Full Screen 디스플레이에 이미지나 배경을 고정시키는 방법은 뒷배경은 고정되어 있고 위에 있는 요소만 움직이게 하는 방법이 일반적으로 많이 이용되고 있습니다. 이에 대한 방법을 간단히 소개하고자 합니다. 풀스크린 이미지의 경우 웹브라우저의 가로,세로 넓이에 그대로 맞춰서 요소(element)를 생성하는 방식입니다. 전면에 원하는 이미지를 꽉 채워서 놓을 수 있을 뿐만 아니라 스크롤을 아래로 내리면 콘텐츠가 보이게 할 수도 있습니다. 하지만 너무 많이 쓰면 스크롤시 성능이슈와 UI 적으로 complex 한 단점이 있습니다. CSS3를 이용한 방법 배경에 이미지를 고정하는 가장 쉬운 방법은 CSS3를 사용하는 것입니다. 이미 이 방법을 알고 많이 사용하고 있겠지만 짚고 ..
StyleSheet/CSS 9년 전

jQuery 를 효율적으로 작성하는 방법

jQuery 효율적 작성 제이쿼리를 사용함에 있어 성능 최적화(performance)에 간단히 알아봅니다. DOM 을 캐싱(Caching)하라 한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이다. Bad Code $('button.confirm').on('click', function() { // DOM 한번 탐색 $('.modal').modal(); // DOM 다시 한번 탐색 $('.modal').addClass('active'); // DOM 또 다시 한번 탐색 $('modal').css(...); }); Good Code $('button.confirm').on('click', function() { // DOM 한번만 탐색 (체이닝) $('.modal') .modal() .addClass('a..
Web Tech/jQuery 9년 전

조건부 주석문의 호환성 보기에서의 문제점

조건부 주석문의 호환성 보기에서의 문제점 IE 계열 대응을 위한 조건부 주석에 대해 알아봅니다. 조건부 주석문의 일반적인 사용 방법은 다음과 같습니다. Document body {background:green;} .ie6 body {background:red;} .ie7 body {background:orange;} .ie8 body {background:yellow;} 아직까지 대중적으로 이 방법을 사용하고 있으며 별다른 이슈를 접해보지 못하신 사용자도 있을 것입니다. 하지만 위의 관련 코드는 IE 8,9에서 호환성 보기에서 문제점을 드러내고 있습니다. html 에 조건부 주석문을 삽입하는 위와 같은 방법을 제시했던 HTML5 Boilterplate 는 2015 현재 IE 8+ 이상 지원 정책으로 변경..
StyleSheet/CSS 9년 전

Susy Settings 기본 설정 #1

Susy2 기본 구성하기 Susy2를 사용하려면 Global Settings(전역 설정)는 거의 필수적이라고 할 수 있습니다. Susy2를 import 하여 사용자 전역설정 없이 Susy2의 내장되어 있는 기본값 전역설정을 그대로 사용하면 제어하는데에 약간(?)의 어려움이 있을 수 있습니다. UI개발자가 크로스 브라우징을 하기 위해서 모든 브라우저의 스타일을 초기화하는 것과 비슷한 맥락입니다. 지금부터 전반적인 Susy2의 기본 구성 설정에 대해 알아보도록 하겠습니다. Settings Susy2 는 Sass의 map 타입 또는 Shorthand Syntax(단축 구문) 과 같은 문법을 사용하여 settings(설정값)을 정의할 수 있습니다. 아래의 두 설정값은 서로 바꿔서 사용할 수 있습니다.(호환성) ..
StyleSheet/Susy 9년 전

Susy Framwork Overview (Susy 둘러보기)

Susy Overview Sass 로 구축할 수 있는 프레임워크 중에 아름다운 그리드 시스템 레이아웃을 보다 쉽게 제공,지원해주는 Susy 프레임워크에 대해서 알아보도록 하겠습니다. 만약 누군가가 "그리드 시스템이 뭐지?!" 라고 한다면 먼저 그리드 시스템에 대한 내용을 살펴보시기 바랍니다. Sass, Compass 를 한 번쯤 다루어 본 사람이라면 Sass 홈페이지에서 사스의 프레임워크로 Compass, bourbon 그리고 Susy 정도를 보았을 것입니다. Susy[soo-zee] 는 다른 그리드시스템에 비해 상당히 쉬운 그리드시스템으로 정평이 나 있습니다. Susy 를 사용하면 보다 쉽고 간결하게 웹사이트 레이아웃을 디자인(설계)할 수 있으며 더 나아가 반응형 웹 디자인 레이아웃도 스마트하게 구현할..
StyleSheet/Susy 9년 전

float 해제: Micro clearfix vs Legacy clearfix

clearfix floating 을 해제하는 가장 널리 알려진 방법으로 6가지(legacy) 정도가 알려져 있습니다. Legacy clearfix 첫 번째 float 해제 방법 가장 고전적인 방법으로 자식 요소 다음의 빈 요소를 사용하여 clear 속성을 이용해 float를 해제하는 방법이 있습니다. → 이 방법은 내용과 분리하는 표현의 분리라는 측면에 어긋나기 때문에 권장되는 방법은 아닙니다. 두 번째 float 해제 방법 두 번째 방법은overflow 속성 이용하는 방법입니다 이 속성은 넘치는 콘텐츠를 숨기고 보이지 않게 해주는 속성으로 이 속성을 이용하면 부모 요소에 overflow: hidden 또는 auto 속성값을 사용하면 부모 요소가 자식 요소를 담아낼 수 있도록 확장해 줍니다. 말 그대로 ..
StyleSheet/CSS 9년 전

matchHeight (jQuery)

matchHeight - 요소간의 높이를 일치CSS 를 활용하다 보면 플로팅된 요소들이나 여러 항목을 지닌 요소들의 높이를 같도록 설정해야할 경우가 있습니다.특히, RWD(반응형)을 구현할 경우에 요소간의 높이를 일치시켜야 하는 일이 종종 있습니다. 이러한 요구사항에 알맞은 플러그인을 소개하고자 합니다. matchHeight introduction matchHeight 는 선택한 모든 요소의 높이를 정확하게 일치시켜 주고, 유사한 종류의 플러그인들이 실수하는 예외적인 경우들까지도 처리되어 있습니다. 홈페이지 : matchHeightGitHub R: matchHeight Repository데모보기 : matchHeight Browser Test matchHeight features(특징) 1. 자동적으로 ..
Code Lab 9년 전

:before, :after, content IE7 polyfill

IE7 Polyfill : before, :after, 가상 선택자와 content 속성 단계적 기능향상을 추구하는 프로젝트에서는 IE7 을 고려해야 합니다. 그래서 :before 와 :after 와 같은 가상 선택자를 이용하여 clearfix 기법을 사용할 경우 크로스브라우징 문제에 봉착하게 됩니다. 물론 content 속성도 지원하지 않습니다. 이에 대한 해결책인 대체방안에 대해 알아보고자 합니다. :before, :after 가상 선택자 대체방안 IE7 에서는 :before 와 :after 가상 선택자를 대체하기 위한 기법으로 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법으로 사용합니다. 이 방법의 표현식은 자바스크립트와 같은 방식으로 요소를 생성하고 클래스명을 부여합니다. 다음의 아래 코드..
StyleSheet/CSS 9년 전

placeholder 크로스브라우징

placeholder 속성 placeholder 속성은 힌트(한 단어나 짧은 구)를 나타냅니다. 이러한 힌트는 사용자가 데이터를 입력하는데 도움을 주는 목적입니다. 이것은 값의 예가 될수도 있고, 기대하는 형태의 짤막한 설명이 될 수도 있습니다. 속성값 : 속성 값은 줄바꿈 문자를 제외한 텍스트입니다. HTML 메모 긴 힌트나 조언 텍스트에는 title 속성 이 좀 더 적절합니다. placeholder 속성을 label 요소 를 대체할 목적으로 사용해서는 안됩니다. input 요소와 textarea 요소의 placeholder 속성과의 차이는 힌트 텍스트 '길이' 정도입니다. 보통 input 요소의 길이가 textarea 요소보다 짧기 때문입니다. 하지만 명세에서 '길이'에 대한 명확한 안내는 없고, 일..
Code Lab 9년 전

웹 접근성을 고려한 UI 컴포넌트 - 캐로셀(carousel) 편

웹 접근성 UI Component Carousel 웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편 from yamoo9 주의사항 http://www.w3.org/WAI/tutorials/carousels/ http://www.w3.org/WAI/tutorials/carousels/animations/ Jaehee's WebClub
HTMLㆍ웹표준ㆍ 웹접근성 9년 전

tab menu UI

tab menu pattern 다음의 코드는 탭 메뉴를 싱글톤 패턴에서 프로토타입으로 리팩토링하는 과정에 대해 살펴보겠습니다. 싱글톤 탭 메뉴 패턴 See the Pen tab 싱글톤 by jaeheekim (@jaehee) on CodePen. 위의 싱글톤 패턴은 여러 개의 탭 메뉴를 만들어서 사용할 수 없는 단점이 있습니다. 물론 소스상에서 each 와 같은 반복문을 사용하면 가능하지만 이 포스팅에서는 프로토타입을 사용하여 여러 개의 탭메뉴를 원 소스로 구현해 보도록 하겠습니다. 프로토타입 탭 메뉴 패턴 See the Pen 싱글톤 탭메뉴를 프로토타입으로 리팩토링하기 by jaeheekim (@jaehee) on CodePen. Jaehee's e-room
Code Lab 9년 전