[마케팅] 4P전략

출처 : http://secretlanguage.tistory.com/163

어느분야든 용어를 알면 반은 먹고 들어갑니다. 마케팅도 마찬가지입니다. 첫시작은 '4P'입니다.

4P는 제품, 가격, 홍보, 유통(매장)을 뜻하는 단어의 이니셜을 보아하니 P로 구성이 되어있고 4개로 되어있어 4P라고 합니다.

• Product
• Price
• Promotion
• Place

4P를 가리켜 마케팅믹스라고합니다. 마케팅 전략을 짤때 마케터는 제품, 가격, 홍보, 매장까지 고루 생각을 해야한다는 뜻입니다. 미국의 누군가께서 만든 이론이라고 합니다만 인문학적 소양을 넓히는데는 도움이 될지모르지만 중요한 사항은 아닙니다. 굳이 찾기를 원한다면 '제롬 메카시(Jerome McCarthy)'를 검색해보시면 됩니다.

자... 실무에서 4P가 제대로 될 수 있을지 의문입니다. 일부 회사의 이야기일지 모르지만 마케팅 전략회의에서 제품에 대한 이야기를 꺼낸다면 제품개발에 관련된 부서에서 기분좋지 않게 본다고 딴지를 걸 수 있습니다. 가격정책, 유통에서도 유관부서에서 곱지않은 시선과 브레이크를 걸 수 있습니다. 결국 마케터는 딱 하나남은 고유의 영역인 홍보(Promotion)에만 역량을 투입하게될 수 밖에 없다.

홍보에는 광고, 이벤트, PR 등이 있습니다. 이를 다른 말로 마케팅커뮤니케이션이라고 합니다. 줄여서 국내에서는 '마컴'이라고 하죠.

이론적인 이야기보다 4P에 대한 예시보시면 좀 더 이해가 빨리 되실 수 있습니다. '예시보기'를 누르시면 보실 수 있습니다.
 

접기

3C - STP를 거쳐서 아래와 같은 전제로 4P전략을 세워보겠습니다.

'최근 들어 사회적으로 스트레스를 많이 받아서 이를 해소할 만한 것을 찾는다.

근래 WTO협정으로 인해 초콜릿의 수입이 보다 유리해졌다.

초콜릿 시장에서 경쟁업체는 현재 3군대가 있으며 적정 가격으로 판매중이다.

당사는 스트레스를 직장인보다는 수험생들이 많이 받는다고 조사되어

이에 대한 저가 초콜릿 시장에 진입하고자한다.'

• Product : 정말 달달하고 많은양의 초콜릿, 학생들이 휴대하기 좋도록 종이패키지형 구성
• Price : 학생들이 주 구매 대상이니깐 정말 싸게, 경쟁사보다 더 싸게(달달함의 정도 대비 가격이 높도록함)
• Promotion : 10대들이 좋아하는 하이틴 스타를 광고모델로 하여 TV광고 송출
• Place : 중고등학교 매점 및 근처 슈퍼/편의점, 학원가

접기

앞서 전제가 길지만 길어야만 4P전략(마케팅믹스)까지 도달할 수 있습니다. STP를 통해서 타겟시장을 정해서 이를 실천하는데 있어서 4P전략을 활용한다는 것을 알아두시면 됩니다.

용어 자체는 어렵지 않습니다. 단지... 실무에 적용하기 어렵습니다. 하지만 차근차근 적용해봅시다. 마케팅 이론으로 소개되고 현재까지 계속 사용하는 이론이니 검증된 것이니까요.

[마케팅] 케테고리 전략

출처 : http://secretlanguage.tistory.com/164

제품이나 서비스에 있어서 카테고리는 모두 가지게 됩니다. 예를 들자면 '퐁퐁'은 주방세제 카테고리입니다. 좀 더 넓게 보자면 '세제'카테고리죠. '세제'를 좀 더 넓게 보자면 '생필품'으로 볼 수 있습니다. 이러한 것이 카테고리입니다.

글을 보시는 여러분들의 제품이나 서비스는 어떠한 카테고리에 존재하나요? 카테고리에서 TOM(Top of Mind), Top3(해당 카테고리에서 가장 먼저 생각나는 3가지)에 포함되어야만 구매율이 향상될 수 있을 것입니다.

이미 다른 제품이나 서비스가 선점하고 있으시다고요? 그렇다면 카테고리 전략이 필요합니다. 쉽게 말하자면 제품이나 서비스를 TOP나 TOP3에 포함될 수 있는 카테고리로 이동하거나 만드는 것을 카테고리 전략이라고합니다.

기존에 존재하는 성격에서 크게 변경하지 않는한 가능할 것입니다. 최근의 카테고리 전략을 펼친 사례에서 최근 예를 들어서 말씀드리겠습니다.

<왼쪽부터 레드불 코리아의 '레드불', 롯데칠성 '핫식스', 코카콜라 '번 인텐스', 출처: http://biz.chosun.com/site/data/html_dir/2011/08/17/2011081702357.html>

기존에 에너지 음료시장은 국내에 존재하지 않았습니다. 에너지 음료라고 기존에 나왔던 박카스는 약국에서 파는 식의약품으로 분류가 되었습니다. 기존에 가장 비슷했던 이온음료와는 다른 에어지음료 카테고리가 필요했고 생성이 된 것입니다.

기존에 형성된 카테고리에서 우위를 점하기는 어려우나 신규로 생성된 카테고리에서 우위를 점하는 것은 상대적으로 쉽습니다. 지나고보면 쉬운 것으로 보이나 이러한 카테고리가 생성되는데에는 마케터들의 숨은 분석들이 작용한 것입니다.

여러분의 서비스도 이러한 카테고리 전략으로 TOP, TOP3에 포함될 수 있습니다.

디자인 패턴

[Creational pattern]
Abstract Factory pattern
구체적인 클래스를 지정하지 않고 관련성을 갖는 객체들의 집합을 생성하거나 서로 독립적인 객체들의 집합을 생성할 수 있는 인터페이스를 제공하는 패턴.
Builder pattern
Composite 객체의 생성 과정과 표현 방법을 분리하여 동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있게 하는 패턴
Factory Method 
객체를 생성하는 인터페이스는 미리 정의하되, 인스턴스를 만들 클래스의 결정은 서브클래스 쪽에서 내리는 패턴. 클래스의 인스턴스를 만드는 시점을 서브클래스로 미룸.
Prototype pattern
생성할 객체의 종류를 명세하는 데에 원형이 되는 예시물을 이용하고, 그 원형을 복사함으로써 새로운 객체를 생성하는 패턴.
Singleton pattern
어떤 클래스의 인스턴스는 오직 하나임을 보장하며, 이 인스턴스에 접근할 수 있는 전역적인 접촉점을 제공하는 패턴.


[Structural pattern]

Adapter
클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴으로, 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해 줌.
Bridge
구현부에서 추상층을 분리하여 각자 독립적으로 변형할 수 있게 하는 패턴.
Composite
객체들의 관계를 트리 구조로 구성하여 부분 – 전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 할 수 있음
Decorator
주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 기능 확장이 필요할 때 서브클래싱 대신 쓸 수 있는 대안이 될 수 있음.
Facade
서브시스템에 있는 인터페이스 집합에 대해서 하나의 통합된 인터페이스를 제공하는 패턴으로, 서브시스템을 좀더 사용하기 편하게 만드는 상위 수준의 인터페이스를 정의함.
Flyweight
크기가 작은 객체가 여러개 있을 때, 공유를 통해 이들을 효율적으로 지원하는 패턴.
Proxy
어떤 다른 객체로 접근하는 것을 통제하기 위해서 그 객체의 대리자(surrogate) 또는 자리채움자(placeholder)를 제공하는 패턴.


[Behavioral pattern]

Chain of Responsibility
요청을 처리할 수 있는 기회를 하나 이상의 객체에게 부여하여 요청을 보내는 객체와 그 용청을 받는 객체 사이의 결합을 피하는 패턴. 요청을 받을 수 있는 객체를 연쇄적으로 묶고, 실제 요청을 처리할 객체를 만날 때까지 객체 고리를 따라서 요청을 전달.
Command
요청을 객체의 형태로 캡슐화하여 서로 요청이 다른 사용자의 매개변수화, 요청 저장 또는 로깅, 그리고 연산의 취소를 지원하게 만드는 패턴.
Interpreter
주어진 언어에 대해, 그 언어의 문법을 위한 표현 수단을 정의하고, 이와 아울러 그 표현 수단을 사용하여 해당 언어로 작성된 문장을 해서하는 해석기를 정의하는 패턴.
Iterator
내부 표현부를 노출하지 않고 어떤 객체 집합에 속한 원소들을 순차적으로 접근할 수 있는 방법을 제공하는 패턴.
Mediator
한 집합에 속해있는 객체들의 상호작용을 캡슐화하는 객체를 정의하는 패턴. 객체들이 직접 서로를 참조하지 않도록 함으로써 객체들 사이의 소결합(loose coupling)을 촉진시키며, 개발자가 객체들의 상호작용을 독립적으로 다양화시킬 수 있게 만듬.
Memento
캡슐화를 위배하지 않은 채로 어떤 객체의 내부 상태를 잡아내고 실체화시켜, 이후에 해당 객체가 그 상태로 되돌아올 수 있도록 하는 패턴.
Observer
객체들 사이에 일 대 다의 의존 관계를 정의해 두어, 어떤 객체의 상태가 변할 때 그 객체에 의존성을 가진 가른 객체들이 그 변화를 통지받고 자동으로 갱신될 수 있게 만드는 패턴.
State
객체의 내부 상태에 따라 스스로 행동을 변경할수 있게끔 허가하는 패턴으로, 이렇게 하면 객체는 마치 자신의 클래스를 바꾸는 것처럼 보임.
Strategy
동일 계열의 알고리즘군을 정의하고, 각각의 알고리즘을 캡슐화하며, 이들을 상호 교환이 가능하도록 만드는 패턴. 알고리즘을 상요하는 사용자와 상관없이 독립적으로 알고리즘을 다양하게 변경할 수 있게 할수 있다.
Template Method
객체의 연산에는 알고리즘의 뼈대만을 정의하고 각 단계에서 수행할 구체적 처리는 서브클래스 쪽으로 미루는 패턴. 알고리즘의 구조 자체는 그대로 놔둔 채 알고리즘 각 단계의 처리를 서브클래스에서 재정의할 수 있게 함.
Visitor
객체 구조를 이루는 원소에 대해 수행할 연산을 표현하는 패턴. 연산을 적용할 원소의 클래스를 변경하지 않고도 새로운 연산을 정의할 수 있음.

JQuery Selector 정리

아래의 컨텐츠 퍼옴..


너무 정리가 잘되어 있어서 퍼왔음
 
http://blog.naver.com/seogi1004  <== 요기로 가면 굉장히 좋은 강좌들이 많이 있음

===============================================================================================================

안녕하세요. 문학청년입니다. 정말 오랜만에 이렇게 글을 쓰는 것 같네요. 스터디 준비하랴.. 대회 준비하랴.. 요세 조금 바빠서 글 쓰는 것에 너무 소홀해버렸네요. 그럼 앞으로 다시 분발하여 열심히 쓰도록 하겠습니다.

잡설이 너무 길었네요. 오늘은 다름이 아니라 제가 처음이 연재 기획했던 것과는 달리 오늘은 기본 내용을 간략하게 정리해볼까 합니다. 물론 정리된 내용만 보면 재미가 없겠지요. 그래서 여러분들을 위해서 간단하게 할 수 있는 셀렉터 예제를 만들어봤습니다. 이 예제는 jQuery 오프라인 스터디에서도 사용을 했었는데요. 반응이 좋아서 이렇게 연재 강좌에도 예제로 사용해봤습니다.

한가지 팁을 드리자면 아래 정리된 내용을 출력하여 필요할 때마다 보는 것도 좋을 것 같구요.
아래 정리된 내용들을 살펴 본 뒤에 예제 페이지로 가서 직접 실습해보시면 이해하시는데 도움이 될 것입니다.

예제 페이지 이동하기


(1) Javascript 문법 스타일

기존의 프로그래밍 언어의 엄격한 문법 스타일에 적용되어 있는 사용자라면 분명히 자바스크립트의 자유 분방한 문법 스타일을 보고 적지않게 당황한적이 있을 것이다. 이러한 스타일은 단점이 될 수도 있으나 매우 유연하기 때문에 때에 따라서 매우 강력한 기능을 발휘한다. 그렇다면 가장 많이 사용되는 자바스크립트의 함수와 관련된 문법 스타일에 대해서 알아보도록 하자.
1. 함수를 변수에 설정할 수 있다.

1 2 3

var func = function() {      alert("안녕"); };

2. 변수에 설정한 함수를 매개 변수로 사용하여 호출 할 수 있다.

1	showAlert(func);

3. 위와 같이 변수에 담지 않고 바로 함수를 매개 변수로 바로 설정 할 수 있다.

1 2 3 4 5 6

showAlert(function() {      alert("안녕"); }); // 아래와 같이 한 줄로 사용하는 경우도 있다. showAlert(function() { alert("안녕"); });

3번의 경우 조금 어렵게 생각할 수도 있는데 자세히 보면 그냥 함수 파라메터 값에 변수가 아닌 함수 그 자체가 들어가 있다고 간단하게 생각하면 된다. 이러한 표현식은 jQuery에서 상당히 많이 쓰이기 때문에 이러한 문법 스타일에 최대한 빨리 익숙해져야 한다.


(2) 셀렉터 요약 정리

셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를 얻기 위해 많이 쓰이는 방법은document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다.

하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을 쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있다.

아래 표에 나와 있는 자식/에트리뷰트/컨테이너 셀렉터는 가장 많이 사용되는 셀렉터 문법이다.

셀렉터 문법 문법 설명 * 모든 엘리먼트 E 태그 명이 E인 모든 엘리먼트 E F E의 자손이면서 태그명이 F인 모든 엘리먼트 E>F E의 바로 아래 자식이면서 태그 명이 F인 모든 엘리먼트 E+F E의 형제 엘리먼트로 바로 다음에 오는 엘리먼트 F E~F E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F E:has(F) 태그 명이 F인 자손을 하나 이상 가지는 태그 명이 E인 모든 엘리먼트 E.C 클래스 명 C를 가지는 태그 명이 E인 모든 엘리먼트. E의 생략은 *.C와 동일함 E#I 아이디가 I인 태그 명이 E인 엘리먼트. E의 생략은 *#I와 동일 E[A=V] 값이 V인 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트 E[A=V] 값이 V로 시작하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트 E[A$=V] 값이 V로 끝나는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트 E[A*=V] 값이 V를 포함하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트 E[A] 에트리뷰트 A를 가지는 태그 명이 E인 모든 엘리먼트

[자식/에트리뷰트/컨테이너 셀렉터]

아래 표는 jQuery가 지원하는 고급 위치 기반 셀렉터이며, DOM에서 위치를 기반으로 엘리먼트를 선택하며 첫 번째 링크나 홀수 번째, 짝수 번째와 같이 엘리먼트의 위치나 다른 엘리먼트와 관계를 기반으로 엘리먼트를 선택해야 하는 경우에 사용하면 된다.

셀렉터 문법 문법 설명 E:first 모든 엘리먼트 E 중에서 첫 번째인 엘리먼트 E:last 모든 엘리먼트 E 중에서 마지막인 엘리먼트 E:first-child 엘리먼트 E의 자식 엘리먼트 중에서 첫 번째인 엘리먼트 E:last-child 엘리먼트 E의 자식 엘리먼트 중에서 마지막인 엘리먼트 E:only-child 엘리먼트 E의 자식 엘리먼트 중에서 형제가 없는 엘리먼트 E:nth-child(n) 엘리먼트 E의 n번째 자식 엘리먼트 E:nth-child(even or odd) 엘리먼트 E의 홀수 or 짝수 자식 엘리먼트 E:even or E:odd 페이지 전체의 짝수 or 홀수 엘리먼트 E:eq(n) 태그 값이 E인 모든 엘리먼트 중에서 n번째로 일치하는 엘리먼트 E:gt(n) 태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트(포함 X) 이후의 엘리먼트 E:lt(n) 태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트 이전의 엘리먼트

[위치 셀렉터]

CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 하는 경우 아래 표에 나와 있는 셀렉터를 사용하면 된다.

셀렉터 문법 문법 설명 :animated 현재 애니매이션이 적용되고 있는 엘리먼트 선택 :button 모든 버튼 선택 :checkbox 체크 박스 엘리먼트만 선택 (input[type=checkbox]) :checked 선택된 체크 박스나 라디오 버튼만을 선택 :contains(foo) 텍스트 foo를 포함하는 엘리먼트만 선택 :disabled 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 :enabled 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택 :file 모든 파일 엘리먼트를 선택 (input[type=file]) :header 헤더 엘리먼트 선택 (<h1>~<h6>) :hidden 감춰진 엘리먼트만 선택 :image 폼 이미지만 선택 (input[type=image]) :input 폼 엘리먼트만 선택 (input, select, textarea, button) :not(filter) 필터의 값을 반대로 변경함. :parent 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 :password 패스워드 엘리먼트 선택 (input[type=password]) :radio 라디오 엘리먼트 선택 (input[type=radio]) :reset 리셋 버튼을 선택 (input[type=reset] or button[type=reset]) :selected 선택된 엘리먼트만 선택 :submit 전송 버튼을 선택 (input[type=submit] or button[type=submit]) :text 텍스트 엘리먼트만 선택 (input[type=text]) :visible 보이는 엘리먼트만 선택

[jquery 정의 셀렉터]

(3) 자주 사용되는 함수 정리
$.유틸리티 함수, Event 관련 함수, Ajax 관련 함수는 이번 장에서 다루지 않을 것이다.

함수 명 함수 설명 엘리먼트 조작 each(Function) 선택된 엘리먼트가 다수일 경우에 each 함수를 사용하여 차례대로 엘리먼트를 선택한다. 에트리뷰트 조작 attr(name, value) 선택된 엘리먼트의 name 에트리뷰트의 값을 value로 설정   attr(name) 선택된 엘리먼트의 name 에트리뷰트의 값을 얻어옴.   attr(Attributes) 선택된 엘리먼트를 프로퍼티(json)형태로 설정할 수 있음   val() 엘리먼트의 value 에트리뷰트 값을 얻어옴. attr("value")와 동일함.   val(content) 엘리먼트의 value 에트리뷰트 값을 content로 설정함. 에트리뷰트 제거 removeAttr(name) 해당 어트리뷰트의 값이 초기화 된다. 스타일 변경 addClass(names) 선택된 엘리먼트에 CSS Class를 적용함. 만약에 다수의 Class를 적용하려면 공백으로 구분하여 할당하면 됨.   removeClass(names) 선택된 엘리먼트들을 제거함.   toggleClass(names) 특정 Class를 적용하지 않은 상태면 적용하고, 적용한 상태면 제거함. 스타일 얻고 설정 css(name, value) 선택된 엘리먼트의 name 에트리뷰트 값을 value로 설정함.   css(properties) {"name1:" value1", "name2": "value2", } 와 같은 형태로 설정함.   css(name) 특정 name의 프로퍼티의 스타일 값을 얻을 수 있음.   width(value) 선택된 엘리먼트의 width 값을 설정함.   height(value) 선택된 엘리먼트의 height 값을 설정함.   width() 선택된 엘리먼트의 width 값을 얻어옴.   height() 선택된 엘리먼트의 height 값을 얻어옴.   offset() 선택된 엘리먼트의 left 값과 top 값을 E.offset().left,E.offset().top과 같은 방법으로 얻을 수 있음. 엘리먼트 내용 설정 html() 선택된 엘리먼트 태그 내용을 얻을 수 있음.   html(content) 선택된 엘리먼트의 태그 내용을 content로 설정함.   text() 선택된 엘리먼트의 태그 내용 중 텍스트 값만 얻을 수 있음.   text(content) 선택된 엘리먼트의 태그 내용을 content로 설정함. 엘리먼트 복사&이동 append(content) 선택된 엘리먼트의 내용 마지막에 새로운 content를 추가함.   appendTo(target) 선택된 엘리먼트가 단일이면 target으로 이동시키고 다수라면 복사됨.   prepend(content) append와 달리 앞으로 추가함   prependTo(target) appendTo와 달리 앞으로 복사 또는 이동함   before(), insertBefore() 엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 추가함.   after(), insertAfter() 엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 추가함 엘리먼트 감싸기 wrap(wrapper) 매개 변수로는 String과 엘리먼트 타입이 올 수 있으며, "<div class='hello'></div>" 형태로 매개 변수 값을 넘기면 됨.   wrapAll(wrapper) 선택된 모든 엘리먼트를 wrapper로 감쌈 엘리먼트 제거 remove() 페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제함.   empty() 일치하는 집합의 모든 엘리먼트의 Content를 제거함. 엘리먼트 복사 clone(copyHandlers) 일반적으로 엘리먼트를 복사한 확장 집합을 만들면 이들은 DOM 어딘가에 덧붙일 수 있음

[함수 정리 (1)]

(4) 그 밖에 함수 정리

아래 표에 정리된 함수들은 확장된 엘리먼트 집합을 관리하는 함수들이다.

함수 명 함수 설명 확장 집합 크기 얻기 size() 해당 엘리먼트의 개수를 반환한다. 확장 집합에서 특정 엘리먼트 얻기 get(index) 확장 집합에서 index번째의 엘리먼트를 가져온다. (배열과 유사함)   get() 모든 확장 엘리먼트를 일반 자바스크립트 배열로 얻는다.   index(element) 확장 집합에서 특정 엘리먼트의 index 값을 가져온다. 확장 집합 재편성 하기 add(element) 기존의 확장 집합에 다른 엘리먼트를 추가한다.   not(expression) 기존의 확장 집합에서 expression와 일치하는 엘리먼트를 제외시킨다.   filter(expression) 기존의 확장 집합에서 expression와 일치하는 엘리먼트만 가져온다. 확장 집합의 부분 집합 얻기 slice(begin, end) 기존의 확장 집합에서 begin번째부터 end번째까지의 엘리먼트만 가져온다. 확장 집합 관련 그 밖에 함수들 find(selector) 기존의 확장 집합에서 selector와 일치하는 엘리먼트들로 새로운 확장 집합을 생성한다.   is(selector) 기존의 확장 집합에서 selector와 일치하는 엘리먼트가 있다면true, 없다면 false를 반환한다. jQuery 체인 관리하기 end() 이전 확장 집합을 반환한다.   andSelf() 커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다 관계를 이용하여 확장 집합 얻기   아래 표 참조.

[함수 정리 (2)]

함수 명 설명 children() 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합 반환한다. contents() 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환한다. next() 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다. nextAll() 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다. parent() 바로 위 부모로 구성된 확장 집합을 반환한다. parents() 바로 위 부모와 모든 조상이 포함하는 확장 집합을 반환한다. prev() 바로 이전에 나오는 형제로 구성된 확장 집합을 반환한다. prevAll() 이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다. siblings() 확장 엘리먼트 내에 모든 형제를 포함한 확장 집합을 반환한다.

[관계를 이용하여 확장 집합 얻기와 관련된 함수 정리]

Event 관련 함수 및 프로퍼티와 $.유틸리티 함수 역시 이번 편과 비슷한 형식으로 정리를 해볼까 합니다. jQuery는 꼭 필요한 기능들만 구현이 되어 있기 때문에 따지고 보면 별로 정리할 내용이 없기 때문에 이를 간단하게 요약하면 jQuery를 사용하실 때, 참고하신다면 분명히 도움이 되리라 생각됩니다.

그럼 이상으로 글을 마치겠습니다.


출처 : http://blog.naver.com/seogi1004/ 

Javascript 정규 표현식

정규 표현식(Regular Expression) 이란?

문자열에서 특정한 캐릭터 조합(character combination)을 찾아내기위한 패턴(pattern)입니다.
특정 문자나 문자열로 문자열을 다루는 것에 문자뿐 만이 아니고 특수 문자로 다룰 수 있고 이들을 조합하여 다룰 수 있는 조건식(pattern)을 제공하여 더 세밀한 방법으로 문자들을 검색할 수 있게 합니다.

정규 표현식(Regular Expression) 생성 방법
1. object initializers를 사용한 방법
정규표현 =/패턴설정/[i/g/gi]	var re = /ab+c/i
2. RegExp 객체의 constructor function를 사용한 방법
new RegExp("패턴 설정"[, "i", | ,"g", | "gi"])	var re = new RegExp("ab+c", "i")

정규 표현식(Regular Expression) 플래그 구성 요소(생략 가능)
g	완전일치(발생할 모든 pattern에 대한 전역 검색)
i	대/소문자 무시
gi	대/소문자 무시하고 완전 일치

정규 표현식(Regular Expression) 과 함께 사용하는 함수들
Method	Type	설명
exec()	RegExp	문장에서 매치를 위해 검색을 수행하는 정규 표현식 메소드 배열을 리턴 지정된 패턴과 같은 패턴을 찾는다.
test()	RegExp	문장에서 매치를 위해 테스트하는 정규표현식 메소드 True 또는 False 리턴 같은 패턴이 있는지 테스트 한다.
match()	String	문장에서 매치를 위해 검색을 수행하는 string 메소드 배열 또는 null 문자 리턴 지정된 패턴과 동일한 패턴을 찾는다.
search()	String	문장에서 매치를 위해 테스트하는 string 메소드 목차나 -1 리턴 첫번째로 일치하는 부분 문자열의 위치를 반환합니다
replace()	String	문장에서 매치를 위해 검색을 실행 문장을 대체하는 String 메소드 지정된 패턴과 바꾼다.
split()	String	문장에서 매치하는 부분을 배열에 할당하는 String 메소드 지정된 패턴부분에서 문자열을 나눈다.

정규 표현식에서 사용하는 특수문자
문자	설명
	다음에 나오는 특수 문자를 문자열로 인식 예 : \' 시퀀스는 ""를 찾고 '/'는 "/"를 찾습니다.
^	입력 문자열의 시작 위치를 찾습니다.(라인의 처음과 패턴과 찾습니다.) 가령, ^A 라고 써주면 검색하고자 하는 문장의 시작문자가 A인지를 검사하는 것입니다.
$	입력 문자열의 끝 위치를 찾습니다.(라인의 끝과 패턴과 찾습니다.) 가령, $A 라고 써주면 검색하고자 하는 문장의 마지막문자가 A인지를 검사하는 것입니다.
*	0개 이상의 문자와 찾습니다.( 모든것이라는 의미 ==> {0,} 같은 의미 ) 예 : "cg*"는 "c", "cginjs" 등입니다.
+	1개 이상의 문자와 찾습니다.( {1,} 같은 의미임. ) 예 : "cg+"는 "cg", "cginjs" 등이지만 "c"는 아닙니다.
?	0 또는 1개의 문자 의미.( {0,1} 같은 의미임. ) 예 : " C?j" 라면 C라는 문자와 j라는 문자사이에 문자가 0개 또는 1개 가 들어갈 수 있다는 말입니다.       Cj, Cnj, Cgj등과 같은..
.	"n"을 제외한 모든 단일 문자를 찾습니다. "n"을 포함한 모든 문자를 찾으려면 '[.n]' 패턴을 사용하십시오.
()	한번 match를 수행해서 나온 결과를 기억함. 예 : /(cnj)/ 는 cnj라는 단어를 검색한 후, 그 단어를 배열등과 같은 저장장소에 남겨두어 나중에 다시 호출할 수 있도록 합니다.
|	OR
{n}	정확히 n개의 문자(n은 음이 아닌 정수) 예: a{2} 는 a 문자 두 개, 즉, aa를 의미합니다.
{n,}	n정확히 n개 찾습니다.(n,음이 아닌 정수) 예 : "c{2}"는 "cnj"의 "c"는 찾지 않지만 "bcccccccccf"의 모든 c는 찾습니다.
{n,m}	최소 n개, 최대 m개 찾습니다.(n은 음이 아닌 정수) 예 : "b{1,4}"은 "bcccccccccf"의 처음 네 개의 c를 찾습니다. 쉼표와 숫자 사이에는 공백을 넣을 수 없습니다.
[xyz]	괄호 안의 문자 중 하나를 찾습니다.(문자들의 set를 의미) 가령, [a-z]라면 a부터 z까지의 모든 문자와 찾습니다.하는 것으로 []안의 -는 범위를 나타냅니다. 괄호 안의 문자 중 하나를 찾습니다. 예:, "[abc]"는 "cnj"의 "c"를 찾습니다.
[^xyz]	제외 문자 집합입니다.(네가티브(-) 캐릭터 셋) 괄호 밖의 문자 중 하나를 찾습니다. 예 : "[^abc]"는 "acn"의 "n"를 찾습니다.
x|y	x 또는 y를 찾습니다. 예 : "c|cginjs"는 "c" 또는 "cginjs"를 찾습니다.
[a-z]	문자 범위입니다.(지정한 범위 안의 문자를 찾습니다) 예 : "[a-z]"는 "a"부터 "z" 사이의 모든 소문자를 찾습니다.
[^a-z]	제외 문자 범위입니다(지정된 범위 밖의 문자를 찾습니다) 예 : "[^a-z]"는 "a"부터 "z" 사이에 없는 모든 문자를 찾습니다.
[b]	백스페이스와 찾습니다.
b	단어와 공백 사이의 위치를 찾습니다.(단어의 경계) 예 : "erb"는 "never"의 "er"는 찾지만 "verb"의 "er"는 찾지 않습니다.
B	단어의 비경계를 찾습니다. 예 : "erB"는 "verb"의 "er"는 찾지만 "never"의 "er"는 찾지 않습니다.
cX	X 가 나타내는 제어 문자를 찾습니다.(control 문자와 찾습니다) 예 : cM은 Control-M 즉, 캐리지 리턴 문자를 찾습니다.       x 값은 A-Z 또는 a-z의 범위 안에 있어야 합니다.       그렇지 않으면 c는 리터럴 "c" 문자로 간주됩니다.
d	0부터 9까지의 아라비아 숫자와 찾습니다.. [0-9]과 같은 의미
D	비숫자 문자를 찾습니다. [^0-9]와 같습니다.
f	폼피드 문자(form-feed)를 찾습니다.(x0c와 cL과 같은 의미)
n	linefeed(줄 바꿈 문자)를 찾습니다.(x0a와 cJ과 같은 의미)
r	캐리지 리턴 문자를 찾습니다(x0d와 cM과 같은 의미)
s	공백, 탭, 폼피드 등의 공백을 찾습니다.( [ tnrfv]과 같은 의미)
S	s가 아닌 문자(공백이 아닌 문자)를 찾습니다. ( [^ tnrfv]과 같은 의미)
t	탭 문자를 찾습니다. (x09와 cI와 같은 의미)
v	수직 탭 문자를 찾습니다.(x0b와 cK와 같은 의미)
w	밑줄을 포함한 모든 단어 문자를 찾습니다.( "[A-Za-z0-9_]"와 같은 의미)
W	문자가 아닌 요소, 즉 % 등과 같은 특수 문자를 의미함( "[^A-Za-z0-9_]"와 같은 의미)
n	n은 마지막 일치하는 문장
xn	n을 찾습니다. 여기서 n은 16진수 이스케이프 값입니다. 16진수 이스케이프 값은 정확히 두 자리여야 합니다. 예 : 'x41'은 "A"를 찾고 'x041'은 'x04'와 "1"과 같습니다.        정규식에서 ASCII 코드를 사용할 수 있습니다.
num	num을 찾습니다.(num은 양의 정수) 캡처한 문자열에 대한 역참조입니다. 예 : '(.)1'은 연속적으로 나오는 동일한 문자 두 개를 찾습니다.
nm	8진수 이스케이프 값이나 역참조를 나타냅니다. nm 앞에 최소한 nm개의 캡처된 부분식이 나왔다면 nm은 역참조입니다. nm 앞에 최소한 n개의 캡처가 나왔다면 n은 역참조이고 뒤에는 리터럴 m이 옵니다. 이 두 경우가 아닐 때 n과 m이 0에서 7 사이의 8진수이면 nm은 8진수 이스케이프 값 nm을 찾습니다.
nml	n이 0에서 3 사이의 8진수이고 m과 l이 0에서 7 사이의 8진수면 8진수 이스케이프 값 nml을 찾습니다.
un	n은 4 자리의 16진수로 표현된 유니코드 문자입니다. 예 : u00A9는 저작권 기호(ⓒ)를 찾습니다.
ooctal xhex	8(octal)진수, 10(hex)진수 값

정규 표현식에서 사용하는 property
속성	설명
global	완전 일치
ignoreCase	대문자 소문자 무시
lastIndex	다음 패턴조회를 시작하는 위치
source	조회시킬 패턴
input	검색 문자열의 설정, 변경($_로도 가능)
multiline	줄바구기 코드를 무시할지 여부($_로도 가능) 참(무시하지 않는다), 거짓(무시한다.)로 설정
lastMatch	패턴 조회한 최후의 문자($&로도 가능)
lastParen	패턴 조회한 최후의 substring($+로도 가능)
leftContext	패턴 조회한 값의 앞의 문자($￥Q로도 가능)
rightContext	패턴 조회한 값의 다음 문자($'로도 가능)
$1~$9	패턴 조회한 것의 일부를 저장한다.(9개까지

정규 표현식(Regular Expression) 사용예제 1

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 'c' 가 있는 문자열이 있으면 TRUE (대/소문자 구분) var cnj_re = /c/ var cnj_ment = "'c' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 2

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 'CGINJS' 가 있는 문자열이 있으면 TRUE (대/소문자 구분) var cnj_re = /CGINJS/ var cnj_ment = "'CGINJS' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 3

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 대소문자 구분없이 해당 문자 또는 문자열을 검색할 경우 끝에 i 를 붙인다. // 'cginjs' 또는'CGINJS' 가 있는 문자열 모두가 있으면 TRUE (대/소문자 구분) var cnj_re = /CGINJS/i var cnj_ment = "'cginjs' 또는 'CGINJS' 가 있는 문자열 모두가 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 4

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 여러개의 이어지는 내용들을 검색할 경우는 '-' 를 넣어 표현한다. // 'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분) var cnj_re = /[a-z]/ var cnj_ment = "'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 5

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // | 는 OR 같은 의미 // 여러가지의 문자 또는 문자열을 검색할 경우 '|' 이용 // 'x' 또는 'y' 또는 'z' 가 있는 문자열 모두가 TRUE (대소문자 구분) var cnj_re = /x|y|z/ var cnj_ment = "'x' 또는 'y' 또는 'z' 가 있는 문자열 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 6

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // | 는 OR 같은 의미 // 여러가지의 문자 또는 문자열을 검색할 경우 '|' 이용 // 'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분) var cnj_re = /[a-z]|[0-9]/ var cnj_ment = "'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 7

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 해당 문자또는 문자열이 없는 경우를 검색할 경우 브래킷('[', ']') 안에 '^' 를 넣는다. // 'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분) var cnj_re = /[^a-z]/ var cnj_ment = "'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 8

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 문자열의 첫번째 글자가 일치해야할 경우는 '^' 를 브래킷('[', ']') 밖에 넣는다 // 'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분) var cnj_re = /^[a-z]/ var cnj_ment = "'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 9

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 문자열의 끝쪽 글자가 해당 문자 또는 문자열과 일치해야할 경우는 '$' 를 넣는다. // 'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분) var cnj_re = /[a-z]$/ var cnj_ment = "'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

 정규 표현식(Regular Expression) 사용예제 10

<SCRIPT LANGUAGE="JavaScript"> <!-- function cnj_regexp() { // 특수문자('', '^', '$', '*', '+', '?', '.', '(', ')', '|', '{', '}', '[', ']')를 검색할 경우는 '' 를 넣는다. // '' 가 있는 문자열일 겨우 TRUE (대소문자 구분) var cnj_re = /\/ var cnj_ment = "'' 가 있는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re; if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) { alert(cnj_ment + "nn문자열이 있군요(true)"); } else { alert(cnj_ment + "nn문자열이 없군요(fail)"); } } //--> </SCRIPT> <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">  출처 : http://nomasumer.egloos.com/9328413