Plugin 검색 결과

해당 글 30건

Headroom.js - 스크롤을 감지하여 반응하는 요소

몇몇 애플리케이션에서 스크롤에 따라 하단의 광고가 등장하거나 상단의 메뉴가 등장하는 등의 사용자 편의를 고려한 디자인을 접해보셨을 겁니다. 관련하여 많은 스니핏(코드조각)이 존재하는데 그 중에서 한가지를 소개합니다. Headroom.js 소개 헤드룸(Headroom)은 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 가벼운 고성능의 자바스크립트 위젯이다. 이는 상단의 네비게이션에 자주 애용되고 있으며, 기존의 고정(Fixed)된 네비게이션이 차지하는 화면의 비율을 없애고 사용자의 반응에 따라 등장함으로써 좀 더 유연하게 화면의 가시영역을 확보한다. HOME Headroom.js REPO WickyNilliams/headroom.js DEMO 데모페이지 브라우저 지원 헤드룸은 아래의 브라우저 AP..
웹코딩/App,Plugin 2015. 10. 27. 11:00

Loco Translate - 워드프레스 번역 플러그인

워드프레스 번역 플러그인을 찾다보니 CodeStyling Localization 이라는 플러그인을 많이들 추천하고 있었습니다. 문제는 현재의 시점에서는 해당 플러그인이 워드프레스에서 검색이 되질 않더군요. 그래서 다른 대안책으로 Loco Translate가 애용되기에 이를 소개합니다. Loco Translate 소개 Loco Translate 플러그인은 워드프레스 플러그인들과 테마들을 브라우저에서 직접 PO 파일을 수정하여 번역할 수 있게 해준다. 즉, Poedit와 같은 번역 프로그램을 따로 설치하지 않아도 워드프레스상에서 직접 번역 파일을 만들 수 있다. HOME Loco Translate 특징 워드프레스 관리자에 내장된 번역 편집기 테마나 플러그인에 직접적으로 언어 파일을 수정하거나 생성할 수 있다..
워드프레스/WP 플러그인 2015. 9. 15. 11:00

User Role Editor - 워드프레스 다양한 역할(권한) 부여 플러그인

워드프레스가 기본적으로 포함하고 있는 역할(Role)은 세세한 부분을 책정할 수 없습니다. 이를 좀 더 세세하게 분류하고 권한을 나눠줄 수 있는 플러그인에 대하여 소개합니다. User Role Editor 소개 User Role Editor는 사용자의 역할(Administrator 제외)을 몇 번의 클릭만으로 쉽게 변경할 수 있다. 워드프레스는 임의로 선택 가능한 기본 역할이 구독자(subscriber), 편집자(editor), 기여자(contributor), 글쓴이(author) 정도이지만, 이 플러그인을 이용해 필요에 따라 새로운 역할을 추가할 수 있다. 또한, 각각의 역할(기본 역할 포함)에 기능(capabilities)을 추가 및 제거가 가능하기에 권한 부여를 세밀하게 조정할 수 있다. 기존 사용..
워드프레스/WP 플러그인 2015. 9. 9. 11:00

User Access Manager - 워드프레스 접근 권한 확장 플러그인

접근 권한을 설정하는 플러그인들을 살펴보고 있는데 많은 사람들이 추천하고 있는 무료 플러그인들 중에 하나이기에 이를 살펴 보도록 합니다. User Access Manager 설명 포스트, 페이지, 파일에 대한 접근을 관리할 수 있는 플러그인다. 사용자 그룹을 생성하고 등록된 사용자를 넣은 후, 이 그룹에 대한 권한을 설정한다. 지금 이후부터 포스트/페이지는 지정된 그룹만 접근 가능하고 쓰기가 가능해진다. 회원만의 영역이나 블로그에서 개인 영역이 필요하거나 다른 사람이 귀하의 블로그에서만 아니라 어디에서나 글을 작성할 수 있도록 하려는 경우 이 플러그인은 유용하다. HOME User Access Manager 특징 사용자 그룹 생성 및 제거 독자(readers)와 편집자(editor)를 위한 분리된 접근 ..
워드프레스/WP 플러그인 2015. 9. 8. 11:00

TimelineJS - 시간의 흐름을 네비게이션화

이력, 연혁등 시간의 흐름을 표시하는 페이지가 필요할때 이를 좀 더 역동적으로 표현할 수 있는 도구들 중에 하나인 TimelineJS에 대해 소개합니다. 기존 버전에서 버전 3으로 업데이트 되었습니다. TimelineJS 3 소개 TimelineJS 3는 기존 버전에서 작성자와 개발자들에게 좀 더 유연함을 제공할 수 있도록 전체 재작성 되었다. 많은 부분을 비틀었는데, 유명한 도구이다보니 기존 사용자들을 위해 기존 버전을 지속적으로 제공하고 있다. HOME TimelineJS DEMO 휘트니 휘스턴 연대기 TimelineJS 3 새로운 점 유연한 행(row) 레이아웃 : 더 이상 3/6 행의 제한이 없다. 캡슐화 : 페이지당 하나 이상의 타임라인이 가능하다. 매우 거대한 시간간격을 지원 : 공룡! 빅뱅!..
웹코딩/App,Plugin 2015. 8. 11. 12:30

Highlight.js - 코드 구문 강조

코딩을 주로 다루는 분들은 이를 표기해주는 몇몇 플러그인들이나 라이브러리들을 이미 사용하고 계시거나 온라인 하이라이팅 서비스를 이용하고 계실겁니다. Highlight.js 또한 그런 라이브러리 중에 하나로 설치 경험을 서술합니다. Highlight.js 소개 Highlight.js는 자바스크립트로 쓰여진 코드 구문 강조를 위한 라이브러리이다. 브라우저뿐만 아니라 서버에서도 잘 작동한다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 자동 언어 감지 기능을 가지고 있다. HOME highlight.js REPO isagalaev/highlight.js DOC documentation 130개의 언어와 65가지의 스타일을 제공한다. Live Demo 자동으로 사용된 코드 구문을 찾아 알..
웹코딩/App,Plugin 2015. 8. 7. 11:00

matchHeight - 요소간의 높이 통일화

플로트 시킨 요소들이나 여러 항목을 가진 요소들의 높이를 일치시켜야 할 때가 있습니다. 서로 다른 높이를 가진 요소들을 일관된 높이로 통일시키는 플러그인이 있어 이를 소개합니다. matchHeight 소개 matchHeight는 선택한 모든 요소의 높이를 정확히 일치시킨다. 비슷한 종류의 플러그인들이 실수하는 예외적인 경우들을 처리했다. HOME matchHeight REPO matchHeight Repository DEMO matchHeight 데모 matchHeight 특징 자동적으로 그룹의 요소들에 대한 높이를 일치시킨다. 최대 높이를 사용하거나 특정 대상 요소를 정의한다. 페이지의 어디든지, DOM 구조안의 어디든지 제약이 없다. 반응형(창 크기 조정이 될때 업데이트) 행(row) 인식(플로팅요소..
웹코딩/App,Plugin 2015. 8. 6. 11:00

Holder - 클라이언트 측에서 이미지 예제 제공

이전에 다뤘던 이미지 예제(placehold) 제공 웹서비스를 클라이언트 측에서 제공할 수 있도록 도와주는 라이브러리입니다. 웹서비스에서 제공하는 것보다 많은 것들을 설정할 수 있기에 이에 대하여 알아봅니다. Holder 소개 Holder는 지정한 자리에 이미지를 대체하는 라이브러리로, Cnavas와 SVG를 사용하여 색상, 폰트, 창의 크기 변화에 대한 동작을 설정할 수 있다. 무엇보다 유동적으로 창 크기가 변경되는 환경을 지원하기 때문에 활용도가 높다. HOME Holder 브라우저 지원 Chrome Firefox 3+ Safari 4+ IE9+ (일부 6~8지원) Opera 12+ Android(with fallback) Holder 사용법 HTML 문서에 holder.js 를 삽입한다. Holde..
웹코딩/App,Plugin 2015. 8. 5. 11:00

poly-checked - :checked 의사 클래스 크로스브라우징

:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다. poly-checked 소개 IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다. HOME poly-checked DEMO 라이브 데모 poly-checked 사용법 jQuery 1.7 이상의 버전이 필요하며, IE 조건부 주석을 이용하여 이를 삽입한다. 스크립트가 삽입되기 이전에 모든 스타일시트(CSS) 파일이 삽입되어야 한다. poly-check..
웹개발론/크로스브라우징 2015. 8. 3. 11:00

Parsley validator(폼유효성 검증) remote와 extra #5

파슬리가 추가로 제공하는 ajax를 이용한 원격 유효성 검증과 기타 검증기들을 소개합니다. Parsley Remote Parsley remote는 고유한 ajax 비동기 검증을 추가하는 편리한 플러그인이다. 이 플러그인의 사용은 parsley.js가 로딩되기 전에 parsley.remote.js를 로드하거나 직접적으로 parsley.remote.js를 로드한다. 옵션들 Name API Description Remote validator data-parsley-remote #2.0 입력된 내용을 검증하기 위해 호출되는 URL을 정의한다. 예: data-parsley-remote="http://url.ext" Reverse data-parsley-remote-reverse #2.0 기본적으로 모든 2xx a..
웹코딩/App,Plugin 2015. 7. 17. 11:00

Parsley validator(폼유효성 검증) UI와 이벤트 #4

파슬리의 UI들의 작동 방식과 클래스들, 그리고 이벤트에 대하여 알아봅니다. Parsley UI/UX 파슬리는 클래스들, 오류 메시지, 포커스 혹은 페이지를 변경하는 트리거 이벤트들에 응답하는 UI/UX 컴포넌트를 포함한다. UX 친화적이기 위해 노력하고 있으며, 파슬리 UI의 모토는 아래와 같다. 최소화된 문자 검증 : 파슬리는 3글자보다 적은 입력에선 기본적으로 검증을 진행하지 않는다. 너무 빠른 검증으로 오류 메세지를 출력하여 사용자를 불편하게 하지 말자. 한번에 한가지 오류 : 필드의 몇몇이 검증을 통과하지 못하면 가장 중요한 하나를 보여주게 되며, 그것은 파슬리의 우선순위에 따른다. 빠른 오류 제거 : 필드가 유효하지 않음을 감지했을때, 각각의 키입력(keypress)을 확인하여 필드가 유효화되..
웹코딩/App,Plugin 2015. 7. 16. 02:42

Parsley validator(폼유효성 검증) 내장된 유효성 검증기 #3

파슬리에는 미리 제작되어 포함하고 있는 유효성 검증기들이 마련되어 있습니다. 간단한 검증은 이것들을 이용해서 검증을 하게 되니 이 내장된 검증기들에 대하여 알아봅니다. Parsley 내장된 검사기 파슬리 2.x는 일반적으로 사용되는 유효성검증기이고 그룹과 우선순위 검증을 단순화한 validator.js를 기반으로 한다. 그러므로 파슬리는 validator.js와 검증을 공유하고 Callback Assert를 사용하여 새로운 것을 정의할 수 있다. 파슬리 프로젝트에 validator.js를 사용하라 파슬리는 window.ParsleyValidator.Validator 로 validator.js를 사용할 수 있다. Parsley 검증기 목록 Name API Description Required #2.0 HT..
웹코딩/App,Plugin 2015. 7. 15. 11:00

Parsley validator(폼유효성 검증) 사용법 #2

이전 장에 이어 파슬리 유효성 검증의 사용법에 대하여 알아봅니다. 실질적으로 폼에 유효성 검증을 구현하는 부분입니다. Parsley 기본 API 파슬리는 무거운 작업을 수행할 수 있게 다른 클래스를 사용하는 분리된 라이브러리이다. 어떻게 원하는 검증에 맞게 구성할 수 있는지 살펴보자. $ API Retrun $('#existingForm').parsley(options) #2.0 parsleyFormInstance $('#existingInput').parsley(options) #2.0 parsleyFieldInstance $('#notExistingDOMElement').parsley(options) #2.0 undefined $('.multipleElements').parsley(options) #..
웹코딩/App,Plugin 2015. 7. 14. 11:00

Parsley validator(폼유효성 검증) 소개 및 설치, 구성요소 살펴보기 #1

폼의 유효성을 검증하는 플러그인들 중에 Parsley 라는 jQuery 플러그인이 있습니다. 디자인적인 면도 고려해서 클래스를 DOM에 붙여 주기 때문에 쉽게 활용할 수 있을꺼라 생각해 관련 문서를 발번역하였고, 이를 수정해서 아래의 내용을 작성하였습니다. 참고가 되시길 바랍니다. 폼(form)안에 존재하는 각각의 입력양식들, , , 와 같은 요소들을 필드(field)라고 부릅니다. Parsley 소개 여기서 설명하는 파슬리는 먹는 그 파슬리는 아니고 자바스크립트로 만든 폼 검증 라이브러리이다. 실제 검색을 하면 먹는 파슬리만 주구장창 검색되니, Parsley js로 검색하길 바란다;;. 서버로 폼을 제출하기전에 작성한 폼에 대한 피드백을 사용자에게 제공하여, 서버부하를 줄이고 폼 검증에 소모되는 사용자..
웹코딩/App,Plugin 2015. 7. 13. 11:00