[JS] 콜론(:) 객체 리터럴

Javascript 2021. 1. 20. 09:37
728x90
728x90
  • 자바스크립트에서 객체는 자신의 속성(property)들을 갖고 각각의 객체들은 프로퍼티와 메소드가 있다. 
  • 이때 메소드는 프로퍼티가 함수 자료형인 객체이며 프로퍼티(key)에 값(value)을 지정하는 것이 콜론이다. 

 

$.contextMenu({

     selector: '.List > tbody > tr',

     callback: function(key, options) {           },


     items: {

      'info' : { name: '요소 정보'},

         'copy' : { name: '요소 복사'},

         'move' : { name: '요소 이동'},

         'delete' : { name: '요소 삭제'},

         'sep1': '---------',

      'cancel' : { name: '호출취소'},

      'regist' : { name: '고정물 등록'},

      'sep2': '---------',

      'preview' : { name: '미리보기'},

      'print' : { name: '인쇄'}

     } // list of contextMenu items

 });

 

※ 배열 리터럴 vs 객체 리터럴
배열은 객체를 기반으로 만들어졌으므로 유사하지만 배열은 요소접근에 index를 사용하고, 객체는 key를 사용한다.

 

기타, 필터 셀렉터에서 사용하기도 한다.

 

roomycode.blogspot.com/2016/09/jquery.html

 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Javascript' 카테고리의 다른 글

[JS] HTMLCollection length 6  (0) 2021.02.08
[JS] 모달vs 모달리스(modal, modeless)  (0) 2021.01.29
카피 코드 실습 : 검색툴  (0) 2020.12.21
script 태그 동적 추가  (0) 2020.12.16
css 동적 로딩방식  (0) 2020.12.09
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

[JS] string 형태의 xml을 xml로 파싱

Markup Language/XML 2021. 1. 18. 16:04
728x90
728x90
var txt = 
'<rss>'
  +'<item>'
      +'<name>이름아무거나</name>'
      +'<age>26</age>'
  +'</item>'
+'</rss>';
 
 
parser=new DOMParser();
 
   xmlDoc=parser.parseFromString(txt,"text/xml");
 
   // 특정 테그를 기준으로 변수에 담는다
   var xml = xmlDoc.getElementsByTagName('rss');
 
// getElementsByTagName : 태그 호출
// childNodes : 자식 노드
// nodeValue : 해당 노드의 값(text)
var name = xml[0].getElementsByTagName('item')[0].getElementsByTagName('name')[0].childNodes[0].nodeValue;
 
alert(name);

 

 

출처

cofs.tistory.com/11

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Markup Language > XML' 카테고리의 다른 글

XPath 위치 경로  (0) 2021.01.14
XSLT XPATH 노드 접근 표현식  (0) 2020.09.18
XSLT 빠르게 기초 알아보기  (0) 2020.03.31
마크업언어 XML(Extensible Markup Language) 개념  (0) 2019.11.05
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

jQuery Autocomplete

Javascript/JQuery 2021. 1. 15. 11:27
728x90
728x90

검색 기능 구현 시 텍스트 입력 구역에 텍스트를 넣으면 자동으로 완성된 검색어를 표시해 주는 기능으로 jQuery UI에 있는 기능입니다. 사용 시 html에 아래 css와 js가 연결되어야 합니다.

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

사용법은 아래와 같습니다.

 

 $( function() {
 
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    
    $( "#tags" ).autocomplete({
      source: availableTags
    });
    
});
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

 

 

 

 

 

Autocomplete | jQuery UI

Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr

jqueryui.com

 

 

 

우선순위 문제로 z-index를 조정할 때

 

/* CSS에 추가 */
.ui-autocomplete {
  z-index:2147483647;
}

 

artisticbit.tistory.com/entry/BootStrapModal-%EC%97%90%EC%84%9C-autocomplete-%EC%95%88%EB%82%98%EC%98%AC%EB%95%8C

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Javascript > JQuery' 카테고리의 다른 글

mouseenter 과 mouseover 차이  (0) 2021.03.04
개체가 'getClientRects' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.01.25
jQuery 제이쿼리 플러그인 - jquery UI Library, jquery bxSilder, jquery-cookie  (0) 2020.04.24
jQuery 비동기 방식 연동  (0) 2020.04.23
jQuery 다양한 효과와 애니메이션  (0) 2020.04.22
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

[공유] '대기업 임원 3관왕' 최명화 대표가 '셀프 브랜딩' 강조하는 이유ㅣ인터비즈

Information/공유글 2021. 1. 14. 17:04
728x90
728x90

'대기업 임원 3관왕' 최명화 대표가 '셀프 브랜딩' 강조하는 이유ㅣ인터비즈https://blog.naver.com/businessinsight/222206008671

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Information > 공유글' 카테고리의 다른 글

[공유] 엑셀 VBA  (0) 2021.12.23
[공유] 유튜브 조회수는 어떻게 수익이 되는가 + CPC, CPM, CTR  (0) 2021.10.28
[공유] 2020년에 프론트 엔드 개발자가 배워야 할 10가지  (0) 2020.06.23
[공유] 비전공자 국비교육자에게 도움되는 글  (0) 2020.03.14
[공유] SK, 카카오 28일 지분교환으로 파트너쉽 관계 구축  (0) 2019.11.03
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

XPath 위치 경로

Markup Language/XML 2021. 1. 14. 16:48
728x90
728x90

location Path : XML 문서의 각 노드의 위치를 지정하기 위한 XPath 표현식

  • 절대 경로 : 슬래쉬(/)로 시작하며, 루트 노드부터 순서대로 탐색
  • 상대 경로 : 기준으로 지정되는 노드부터 탐색

http://www.tcpschool.com/xml/xml_xpath_pathExpression

 

Axis step : 검색 방향은 현재 노드를 기준으로 어느 방향으로 검색해 나갈지 명시

http://www.tcpschool.com/xml/xml_xpath_pathExpression

 

 

 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Markup Language > XML' 카테고리의 다른 글

[JS] string 형태의 xml을 xml로 파싱  (0) 2021.01.18
XSLT XPATH 노드 접근 표현식  (0) 2020.09.18
XSLT 빠르게 기초 알아보기  (0) 2020.03.31
마크업언어 XML(Extensible Markup Language) 개념  (0) 2019.11.05
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

XMLHttpRequest 객체

카테고리 없음 2020. 12. 23. 16:58
728x90
728x90

웹브라우저의 주요 API 중 하나. 서버에서 데이터를 요청하는 데 사용하며, 페이지 새로고침 없이 업데이트가 가능합니다. (서버에서 데이터 요청, 수신은 페이지 로드 후, 백그라운드에서 서버로 데이터 보내기에 사용)

 

일반적인 JS 에서의 XMLHttpRequest 객체의 사용 방식

 

// 객체 생성
var xhttp = new XMLHttpRequest();

// 객체가 변경되면 실행할 것
xhttp.onreadystatechange = function() {
	// 4와 200이면 응답이 준비된 것
    if (this.readyState == 4 && this.status == 200) {
       // 요청한 데이터를 문자열로 반환
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};

// 서버에 비동기식 요청 전송
xhttp.open("GET", "filename", true);
xhttp.send();

 

readyState 의 반환값

0 : 객체 생성
1 : open() 메소드 실행 성공
2 : 모든 요청에 대한 응답 도착
3 : 요청 데이터 처리중
4 : 데이터 처리 완료 후 응답 준비 단계

 

status 반환값

200 : 서버에 문서가 존재
404 : 서버에 문서가 존재x

 

참고로, responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환합니다. responseXML프로퍼티는 응답으로 받은 데이터를 XML DOM 객체로 반환합니다.

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

카피 코드 실습 : 검색툴

Javascript 2020. 12. 21. 17:34
728x90
728x90

 

요약

검색하면 json 데이터에서 city나 state 이름을 찾아 결과를 보여준다.

 

 

카피할 코드

 

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Type Ahead 👀</title>
    <link rel="stylesheet" href="main.css" />
  </head>

  <body>
    <form class="search-form">
      <input type="text" class="search" placeholder="City or State" />
      <ul class="suggestions">
        <li>Filter for a city</li>
        <li>or a state</li>
      </ul>
    </form>
    <script src="main.js"></script>
  </body>

</html>

html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: "helvetica neue";
  font-size: 20px;
  font-weight: 200;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
input {
  width: 100%;
  padding: 20px;
}
.search-form {
  max-width: 400px;
  margin: 50px auto;
}
input.search {
  margin: 0;
  text-align: center;
  outline: 0;
  border: 10px solid #f7f7f7;
  width: 120%;
  left: -10%;
  position: relative;
  top: 10px;
  z-index: 2;
  border-radius: 5px;
  font-size: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}
.suggestions {
  margin: 0;
  padding: 0;
  position: relative;
  /*perspective: 20px;*/
}
.suggestions li {
  background: white;
  list-style: none;
  border-bottom: 1px solid #d8d8d8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 20px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}
.suggestions li:nth-child(even) {
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
}
.suggestions li:nth-child(odd) {
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top, #ffffff 0%, #efefef 100%);
}
span.population {
  font-size: 15px;
}
.hl {
  background: #ffc600;
}
 
const endpoint =
  "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";

const cities = [];

fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

findMatches = (wordToMatch, cities) =>
  cities.filter(place => {
    // 매치되는 검색어 추출
    const regex = new RegExp(wordToMatch, "gi");
    // 매치되는 city나 state를 반환
    return place.city.match(regex) || place.state.match(regex);
  });

numberWithCommas = x => {
  // 숫자에 1000단위로 쉼표 넣기
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

displayMatches = e => {
  const word = e.target.value;
  const matchArray = findMatches(word, cities);
  const html = matchArray
    .map(place => {
      const regex = new RegExp(word, "gi");
      const cityName = place.city.replace(
        regex,
        `<span class="hl">${word}</span>`
      );
      const stateName = place.state.replace(
        regex,
        `<span class="hl">${word}</span>`
      );

      return `
      <!-- 결과 내역 -->
        <li>
            <span class="name">${cityName}, ${stateName}</span>
            <span class="population">${numberWithCommas(
              place.population
            )}</span>
        </li>
    `;
    })
    .join("");
  suggestions.innerHTML = html;
};

const searchInput = document.querySelector(".search");
const suggestions = document.querySelector(".suggestions");

searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);

 

 

 

json 데이터 구조

 

 

 

 

해설 참고

 

 

[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기

🤳 Day6 - JavaScript로 정규표현식을 이용한 검색창 구현하기 JavaScript 30의 여섯 번째 프로젝트는 정규표현식을 이용하여 검색창을 구현하는 프로젝트입니다. 😃 HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 1.

geonlee.tistory.com

 

 

Javascript_30_06

벌써 30개 프로젝트 중에 6번째 시간입니다. 벌써 20%나 했네요!꼭 30개 모두 정리해서 포스팅 하는 날 까지.. 열심히 해보겠습니다. ✍힘내자구요!🤘Day 06 project는 정말 모르는 것 투성이였고, 그

velog.io

 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Javascript' 카테고리의 다른 글

[JS] 모달vs 모달리스(modal, modeless)  (0) 2021.01.29
[JS] 콜론(:) 객체 리터럴  (0) 2021.01.20
script 태그 동적 추가  (0) 2020.12.16
css 동적 로딩방식  (0) 2020.12.09
JS 확인 취소 팝업창 띄우기  (0) 2020.11.30
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

script 태그 동적 추가

Javascript 2020. 12. 16. 17:08
728x90
728x90
var myScript = document.createElement('script');
myScript.setAttribute('src', 'script.js');
myScript.setAttribute('crossorigin', 'anonymous');
myScript.setAttribute('async', '');

myScript.onload = function() {
}

document.getElementById('root').appendChild(myScript);

 

script 태그를 만든 후, src, crossorigin, async 속성을 부여하고 root element에 해당 스크립트를 붙여넣는 코드. (출처)
활용해서 body 등에 붙여놓을 수 있습니다.

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Javascript' 카테고리의 다른 글

[JS] 콜론(:) 객체 리터럴  (0) 2021.01.20
카피 코드 실습 : 검색툴  (0) 2020.12.21
css 동적 로딩방식  (0) 2020.12.09
JS 확인 취소 팝업창 띄우기  (0) 2020.11.30
JS 로그아웃 후 뒤로가기 (Backspace) 막기  (1) 2020.11.26
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

Git 설치, 초기설정, 용어

Information/ETC 2020. 12. 16. 11:27
728x90
728x90

Git 설치 타임라인

 

 

1 msysgit 설치

gitforwindows.org/

 

 

 

 

2 TortoiseGit + 언어팩 설치
그리고 초기 설정 방법

tortoisegit.org/

 

 

중간에 랭귀지팩을 설치한 후 다시 프로그램 설치로 돌아가서 Refresh를 눌러주면, 언어로 한국어가 선택됩니다.

 

 

언어 설정이 안된 분들은 바탕화면에서 우클릭하여 설정 메뉴에 들어가 한국어로 선택할 수 있습니다. 이어서 설정 창에서 아까 나중에 설정하겠다고 한 사용자명과 메일 주소를 등록합니다. 

 

 

초기설정이 끝났으면, 이어서 특정 폴더를 로컬 저장소로 등록합니다. tutorial이라는 이름의 폴더로 하겠습니다. 폴더에어 우클릭하여 Git 저장소 여기에 만들기(Git Create repository here...)를 선택합니다. 팝업창이 뜨면 확인, OK를 누릅니다. 항목에 체크하면 단순히 Push된 변경내역만 보입니다. PC와 웹에서 동일한 모든 작업을 하려면 체크하지 않아야 합니다. 

 

 

테스트용 텍스트를 삽입한 메모장을 생성 후, 저장소 폴더에 저장합니다. tutorial 폴더 안을 우클릭, Git 커밋을 클릭합니다. 팝업창에서 파일을 선택한 후 커밋을 누릅니다. 커밋이 완료되면 닫기 버튼을 누릅니다.

 

 

폴더 내부를 우클릭하여 TortoiseGit, 로그 표시를 클릭해보면 커밋 이력에 방금 커밋한 내용이 추가되어 있습니다.

 

 

 

 

3. 원격 저장소 용어 개념

 

2번은 로컬 저장소를 활용하는 방법이고, 3번은 원격 저장소에 push하여 공유하는 방법입니다. Git에서 Push란 웹상의 원격 저장소로 변경된 파일을 업로드 하는 것을 뜻합니다. push하면 원격 저장소에 나의 변경 이력이 업로드되어 원격저장소와 로컬저장소가 같은 상태가 됩니다.

Clone은 변경 이력이 있는 원격 저장소를 웹에서 복사해서 내 PC로 붙여넣기 하는 것입니다. 변경 이력까지 함께 가져올 수 있습니다.

Pull이란 원격저장소에서 로컬저장소로 업데이트 하는 것입니다. 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Information > ETC' 카테고리의 다른 글

stanford Karel 테스트  (0) 2021.12.09
ie 익스플로러 브라우저 디버거 조사식만 남고 파일 안나올 때  (0) 2021.01.28
구글 검색 명령어 총정리  (2) 2020.09.30
유튜브 채널 프로필, 배너 이미지, 워터마크 바꾸기 (이미지 사이즈 추가)  (0) 2020.09.30
업무일지의 개인적인 가이드  (0) 2020.07.16
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

SVN (SubVersion) 이란? TortoiseSVN 설치 및 사용

Project/Web 2020. 12. 15. 14:59
728x90
728x90

SVN (SubVersion) 

형상관리/소스관리 툴. 프로젝트의 버전관리를 위해 Repository를 만들고 안에 소스를 저장하여 운용하는 소프트웨어

 

GIT과 SVN 차이와 장단점

  GIT SVN
관리 스타일 분산관리식 중앙집중관리식
장점 여러번 거쳐야 한다 직관적
단점 로컬에서 작업하여 개발 시 처리속도가 빠름 동일 파일 수정, 커밋 시 충돌 가능성

 

 

 

 

 

TortoiseSVN 설치방법

tortoisesvn.net/

 

Home · TortoiseSVN

The coolest interface to (Sub)version control

tortoisesvn.net

 

사이트 링크로 이동하여 컴퓨터와 맞는 것을 설치해주면 됩니다.

 

 

 

 

* 한국어팩 (Korean Language Pack)

osdn.net/projects/tortoisesvn/storage/1.14.0/Language%20Packs/LanguagePack_1.14.0.28885-x64-ko.msi/

 

Downloading File /1.14.0/Language Packs/LanguagePack_1.14.0.28885-x64-ko.msi - TortoiseSVN - OSDN

Free download page for Project TortoiseSVN's LanguagePack_1.14.0.28885-x64-ko.msi.TortoiseSVN is a Subversion (SVN) client, implemented as a windows shell extension. Which means it's available ...

osdn.net

 

SVN 설치 후 언어팩을 설치합니다.

 

 

 

TortoiseSVN 사용방법

 

1. 동기화할 폴더 생성 혹은 선택

2. 폴더 우클릭 후 SVN 체크아웃 선택

3. 팝업창의 저장소 url 입력

4. 사용자명과 암호 입력

5. Check out 완료 시 저장소명과 같은 이름의 폴더 생성

6. 체크아웃 폴더 내부 우클릭 후 TortoiseSVN - 추가하기로 동기화할 파일 추가

7. 폴더 내부 우클릭 후 SVN 커밋 선택

8. 변경된 파일을 체크, Commit 메세지 (Comment) 작성 후 확인

9. SVN Update : 저장소 최신 버전의 Revision으로 바꾸는 것.

10. SVN Commit : 체크아웃 한 소스를 수정하는 작업을 한 뒤 저장소에 새 버전을 저장하는 명령어. Revision 1 증가함.

 

 

 

 

5. tortoise svn 사용법

초록색 체크가 되어있는 파일 및 폴더는 서버에 올라가있어 PC와 서버 양측에 존재한다는 의미이며파란 ...

blog.naver.com

 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Project > Web' 카테고리의 다른 글

전자정부 규격 코드 검사 (일부 JS 파일 체크)  (0) 2020.10.27
호스팅 후 워드프레스 admin 비밀번호 재설정  (0) 2020.07.16
JavaScript 30 프로젝트 (2) JS and CSS Clock  (0) 2020.06.03
JavaScript 30 으로 30일간 매일 하나씩 만들어보기  (0) 2020.01.01
워드프레스로 제작했던 웹사이트  (0) 2019.10.22
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

css 동적 로딩방식

Javascript 2020. 12. 9. 10:54
728x90
728x90

css 동적 로딩방식

 

var cssStr = "div {border:1px solid red;}"
var style = document.createElement("style");
style.setAttribute("type", "text/css");

if( style.styleSheet ) { // IE
     style.styleSheet.cssText = cssStr;
} else { //W3C
     var cssText = document.createTextNode(cssStr);
     style.appendChild(cssText);
}

document.getElementsByTagName("head")[0].appendChild(style);

 

 

출처 : webkorea.tistory.com/90

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'Javascript' 카테고리의 다른 글

카피 코드 실습 : 검색툴  (0) 2020.12.21
script 태그 동적 추가  (0) 2020.12.16
JS 확인 취소 팝업창 띄우기  (0) 2020.11.30
JS 로그아웃 후 뒤로가기 (Backspace) 막기  (1) 2020.11.26
JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload)  (0) 2020.11.26
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

애드센스 CPC, CPM, CTR ... 이게 뭔가 찾아봄

카테고리 없음 2020. 12. 4. 17:27
728x90
728x90

 

 

 

CPC : Cost Per Click. 클릭 당 광고비 정산. 예산/클릭수 = CPC

CPM : Cost Per Mile. 1천번 노출 당 정산. (예산/노출수)*1000

CTR : Click Through Rate. 노출 100명 당 클릭한 명수.  (클릭수/노출수)*100
클릭률, 광고 반응률이라고도 함.

 

 

 

효율이 좋은 광고란 CPC, CPM이 낮으면서 CTR이 높은 광고라 할 수 있습니다. 

 

광고가 보이는 지면 입찰가의 영향을 받는 CPM을 낮추면 CPC가 올라가는데, 이를 CPM 최적화라고 합니다. CPM을 낮추려면 타겟팅을 세분화하여 지면에 대한 지나친 경쟁을 피해야하는데 쉽지 않고, 3가지 요소가 이상적으로 떨어지는 것 또한 어려운 문제라고 합니다. (brunch.co.kr/@seulgilim15/1)

 

지나친 타겟팅의 세분화는 광고 노출 모수가 적어져서 광고 효과 자체도 떨어질 수 있습니다.

제품과 서비스의 경쟁력, 적절히 창의적인 광고 소재, 효과적인 미디어 믹스 전략과 주기적인 광고 효율 체크가 온라인 광고의 좋은 성과를 부릅니다. 미디어 믹스란 예산에 맞춰 매체와 타겟팅 시나리오를 만든 결과물을 말합니다.

 

 

 

CPE : Cost Per Engagement. 확장형 광고. 사용자가 시작하는 작업에 따라 광고 단위 크기 이상으로 확장되는 광고. 광고 배너를 클릭하면 광고가 확장되며, 여기서 한번 더 클릭 (즉 두 번의 클릭)이 발생해야 수입이 발생합니다. 따라서 광고 단가가 높습니다. 애드센스에서의 설정은 광고 허용 및 차단 > 광고게재 > 확장형광고 ON으로 해두면 됩니다.

 

CPS : Cost Per Sales. CPC는 실제 판매로 연결되지 않아도 클릭수에 대해 광고료를 책정하지만 CPS는 실제 판매가 있을 경우에만 판매액의 일정 부분에 대해 광고료를 책정하는 방식입니다. CPC보다 더 직접적인 광고 효과를 원하는 광고주가 사용합니다. 

 

 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,
250x250
250x250
English Korean
07-14 07:29

티스토리툴바

v