홍페이지 HONGPAGE

카페24 DB 접속 방법 - phpMyAdmin 없이 HeidiSQL로 연결하기

HHHONG — Sun, 22 Jun 2025 17:13:49 +0900

카페24 DB 접속 방법 (phpMyAdmin 설치 없이 HeidiSQL로 연결하기)

카페24 웹호스팅 환경에서 DB 확인이 필요할 때, phpMyAdmin 설치 없이 HeidiSQL을 통해 외부에서 MySQL DB에 접속하는 방법을 정리했습니다.

✅ 왜 HeidiSQL인가?

카페24는 기본적으로 phpMyAdmin 같은 DB 관리 툴을 제공하지 않기 때문에, DB를 확인하려면 직접 설치하거나 별도의 클라이언트 프로그램을 사용해야 합니다. HeidiSQL은 윈도우에서 작동하는 무료 DB 접속 툴로, 카페24의 MySQL DB에 외부에서 직접 접속할 수 있게 도와줍니다.

HeidiSQL로 DB 접속하는 방법

1. 카페24 홈페이지 로그인 후, 우측 상단 [나의서비스관리]를 클릭.

2. 서비스사용현황 첫 페이지 아래쪽의 MySQL 외부 IP접근설정 항목이 있는데, 여기서 [설정하기] 버튼을 클릭합니다.

* 만약 해당 항목이 보이지 않는 경우에는 서버내에 직접 phpMyAdmin 설치해서 DB에 접속해야합니다.

3. 창이 뜨면 DB 비밀번호를 입력합니다.

4. 그리고 외부 IP 주소란에 현재 접속하고 있는 컴퓨터 IP를 넣어주면 됩니다.

내 아이피 주소는 https://www.findip.kr/ 사이트에서 바로 확인이 가능합니다.

5. 아이피 설정을 완료하면 좌측 메뉴에서 '서비스 접속정보'를 클릭합니다. 그러면 아래쪽에 DB 접속 정보가 보입니다.

HeidiSQL 설치 및 DB 접속 설정

6. DB접속 프로그램인 HeidiSQL프로그램을 설치합니다.

아래 페이지 접속해서 가장 최신버전을 다운받으시면 됩니다.

https://www.heidisql.com/download.php

* HeidiSQL프로그램은 윈도우 환경에서만 작동합니다.

7. 프로그램 설치 후, 세션 관리자에서 [신규]버튼을 눌러 정보를 넣어줍니다. 입력 후, [열기] 버튼을 클릭

항목	값
호스트명	DB아이디.cafe24.com
사용자	DB아이디
암호	DB암호
포트	3306 (또는 접속정보에 있는 포트)

8. 접속 성공시, 아래와 같이 좌측에 테이블 목록이 보여집니다.

접속이 되지 않는다면 위에 입력한 정보를 다시 한번 확인해보시기 바랍니다.

마무리 및 팁

HeidiSQL은 phpMyAdmin 없이 외부에서 편하게 DB를 관리할 수 있는 유용한 프로그램이니 잘 활용하시면 좋겠습니다 :)
카페24는 보안 상 외부 IP 허용 설정이 필수이니, 고정 IP를 사용하는 것이 좋습니다.

[보안SSL] http 또는 www 접속시 https로 강제 리다이렉트 시키기

HHHONG — Fri, 20 Jun 2025 12:15:11 +0900

보안 SSL 설치후에 http://를 입력해 접속하거나 도메인에 www를 붙여 접속하는 경우 보안이 되지 않은 http로 접속되어진다.

이 경우에는 .hyaccess파일 최상단에 아래 세줄을 넣어주면 된다.

RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

귀찮으신 분들을 위해 파일 첨부! 다운로드해서 홈페이지 최상단 루트 폴더 안에 넣어주면 된다.

.htaccess

0.00MB

[참고 포스팅]

예전에 그누보드에서 강제 https로 리다이렉트 하는 방법을 올렸었는데, 위의 방법을 적용하면 다른 부분은 수정하지 않아도 된다.

https://hongpage.kr/25

[php] 그누보드 보안 SSL 적용 (https 강제 리다이렉션하기)

보안SSL이란? SSL이란 Security Socket Layer의 약자로 Netscape에서 웹서버(웹사이트)와 사용자PC(브라우저)간의 주고 받는 데이터의 암호화/보안을 위해 만든 프로토콜. 보안서버가 구축된 웹서버는 해커

hongpage.kr

AWS S3 무료 사용 방법 - 파일 업로드하기 (영상, 이미지)

HHHONG — Sat, 24 May 2025 16:04:49 +0900

AWS S3 란?

AWS S3는 Amazon Simple Storage Service 약자로 클라우드 기반의 객체 스토리지 서비스이다. 웹사이트에서 사용할 이미지, 영상 문서 등 파일을 저장하거나, 서버 백업 및 로그 보관 등 다양한 파일 저장소로 사용이 가능하다.

AWS S3 무료 이용하기

신규 AWS 계정에 한해 가입 후 12개월 동안 일정 사용량을 무료(Free Tier)로 제공하며, 무료기간이 끝나거나 무료 한도를 초과하면 요금이 발생한다.

[AWS S3 무료 제공 항목]
- 5GB의 S3 스탠다드 스토리지
- 매월 20,000 GET 요청
- 매월 15GB의 데이터 송신(인터넷으로 전송하는 경우)

S3 버킷 생성하기

1. AWS 신규 회원가입 후, AWS S3 서비스(https://s3.console.aws.amazon.com/s3/)로 이동

2. "버킷 만들기" 클릭

3. 아래와 같이 설정 하고, 나머지는 기본값으로 두고, 설정 완료 후, 하단 [버킷만들기] 클릭

- AWS 리전 : 아시아 태평양(서울)로 되어있는지 확인한다. 다른 지역으로 되어있으면 화면 오른쪽 상단에서 변경 가능하다.
- 버킷이름 : 3~63자 영문, 숫자 입력
- 객체소유권 : 'ACL활성화됨' 선택
- 이 버킷의 퍼블릭 액세스 차단 설정 : 체크 모두 해제

4. 생성된 버킷 이름을 클릭한다.

5. 업로드 버튼을 눌러 영상이나 이미지를 업로드한다.

6. 하단 권한 탭에서 '퍼블릭 읽기 액세스 권한 부여' 클릭 후, 경고박스 체크박스에 체크 후, 하단 [업로드] 버튼 눌러 최종 업로드한다.

7. 업로드가 완료되고 나면 객체 URL이 이미지 및 영상 URL이 된다. 해당 주소를 임베드해서 사용하면 된다.

파일이 제대로 보이지 않는 경우

객체 URL을 클릭했을때 아래와 같이

This XML file does not appear to have any style information associated with it. The document tree is shown blow. 메세지가 뜨며 파일이 제대로 보이지 않는다면 액세스 권한을 다시 설정해주어야한다.

1. 파일 '권한'탭에 들어가서 ACL(엑세스 제어목록)에서 파란색 박스의 '버킷 소유자 적용' 링크 클릭

2. 객체 소유권을 ACL 활성회됨으로 선택한 후, 아래 'ACL이 복원된다는 것을 확인합니다.' 선택 후 '변경사항 저장'한다.

3. 그리고 다시 파일 '권한'탭에 들어가서 ACL(액세스 제어 목록) '편집' 버튼을 누른다.

4. 모든사람(퍼블릭 액세스) '읽기'에 체크하고, 노란색 박스 체크박스에도 체크한다.

모든 설정 완료 후, 하단 [변경사항저장]을 누르면 모든 사람이 액세스 할 수 있도록 변경 된다.

액세스 권한 수정후, 객체 URL에 다시 접속하면 영상이 제대로 뜨는 것을 확인할 수 있다.

영카트 주문 내역 페이지에서 신용카드 결제 취소 가능하도록

HHHONG — Mon, 3 Feb 2025 12:32:05 +0900

현재 영카트는 입금 전 주문 내역에 대해서만 고객이 취소할 수 있도록 되어있는데, 상품 준비 전까지는 신용카드 결제 완료 후에도 얼마든지 고객이 직접 취소가 가능하도록 기능이 필요해서 아래와 같이 수정하였다.

shop/orderinqueryview.php 파일

수정 전

$st_count1++;
    if($opt['ct_status'] == '주문')
    $st_count2++;
}

수정 후

$st_count1++;
    if($opt['ct_status'] == '주문' || (($opt['ct_status'] == '입금') && ($od['od_settle_case'] == '신용카드')))
        $st_count2++;
}

mobile/shop/orderinquerycancel.php

수정 전

// 주문상품의 상태가 주문인지 체크
$sql = " select SUM(IF(ct_status = '주문', 1, 0)) as od_count2,
                COUNT(*) as od_count1
            from {$g5['g5_shop_cart_table']}
            where od_id = '$od_id' ";
$ct = sql_fetch($sql);
}

$uid = md5($od['od_id'].$od['od_time'].$od['od_ip']);

if($od['od_cancel_price'] > 0 || $ct['od_count1'] != $ct['od_count2']) {
    alert("취소할 수 있는 주문이 아닙니다.", G5_SHOP_URL."/orderinquiryview.php?od_id=$od_id&amp;uid=$uid");
}

수정 후

if($od['od_settle_case'] == '신용카드'){

	$sql = " select SUM(IF(ct_status = '입금', 1, 0)) as od_count2, 
                    COUNT(*) as od_count1 from {$g5['g5_shop_cart_table']} 
                    where od_id = '$od_id' ";
	$ct = sql_fetch($sql);

}else{

	// 주문상품의 상태가 주문인지 체크
	$sql = " select SUM(IF(ct_status = '주문', 1, 0)) as od_count2, 
                    COUNT(*) as od_count1 from {$g5['g5_shop_cart_table']} 
                    where od_id = '$od_id' ";
	$ct = sql_fetch($sql);

}

$uid = md5($od['od_id'].$od['od_time'].$od['od_ip']);

if($od['od_cancel_price'] > 0 || $ct['od_count1'] != $ct['od_count2']) {
    alert("취소할 수 있는 주문이 아닙니다.", G5_SHOP_URL."/orderinquiryview.php?od_id=$od_id&amp;uid=$uid");
}

bxslider 현재 슬라이드에 클래스 추가하기

HHHONG — Tue, 26 Nov 2024 15:50:07 +0900

onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlide) {
    $('.active-slide').removeClass('active-slide');
    $('.bxslider>li').eq(currentSlide + 1).addClass('active-slide')
},
onSliderLoad: function () {
    $('.bxslider>li').eq(1).addClass('active-slide')
},

php5.X -> php 8.X 로 버전 변경하면서 생기는 오류 해결 방법

HHHONG — Tue, 26 Nov 2024 15:47:54 +0900

업데이트중

[오류 1] Warning: Undefined array key

변경전

if ($_COOKIE["hd_pops_{$nw['nw_id']}"])

변경후

if (isset($_COOKIE["hd_pops_{$nw['nw_id']}"]))

[오류 2] Deprecated: Optional parameter $skin_dir declared before required parameter $bo_table is implicitly treated as a required parameter in /evread/www/lib/latest.lib.php on line 7

변경전

function latest($skin_dir, $bo_table, $rows, $subject_len, $cache_time, $options)

변경후

function latest($skin_dir='', $bo_table, $rows=10, $subject_len=40, $cache_time=1, $options='')

[오류 3] htmlpurifier

Deprecated: Creation of dynamic property HTMLPurifier_Lexer_DOMLex::$_entity_parser is deprecated in /evread/www/plugin/htmlpurifier/HTMLPurifier.standalone.php on line 7777

모든 class앞에 #[AllowDynamicProperties]를 추가

#[AllowDynamicProperties]
class HTMLPurifier_HTMLModule {
}

[오류 4] Passing null to parameter #1

Deprecated: round(): Passing null to parameter #1 ($num) of type int|float is deprecated in

//변경 전
$star = round($score);

//변경 후
$star = round((int)$score);

[오류 5] Warning: Undefined variable $000

Warning: Undefined variable $sns_share_links in /evread/www/shop/item.php on line 219

function get_star()
{
    global $score, $star; //추가

    $star = round((int)$score);
    if ($star > 5) $star = 5;
    else if ($star < 0) $star = 0;

    return $star;
}

[오류 6] Warning: Undefined array key

Warning: Undefined array key "test" in

=> 변수에 isset()정의 추가

$test = isset($_REQUEST['test']) ? $_REQUEST['test'] : '';

[오류 7] Fatal error: Array and string offset access syntax with curly braces is no longer supported

{}로 되어있는 것을 []로 변경

$this->_lookahead    = $formula{1}; //변경 전
$this->_lookahead    = $formula[1]; //변경 후

[오류 8] Fatal error: Uncaught TypeError

Fatal error: Uncaught TypeError: sizeof(): Argument #1 ($value) must be of type Countable|array, null given in /evread/www/lib/Excel/php_writeexcel/class.writeexcel_workbook.inc.php:156

$index     = sizeof($this->_worksheets);  //변경 전
$index     = sizeof((array)($this->_worksheets));  //변경 후

Fatal error: Uncaught TypeError: count():

for ($i=0; $i < count($_FILES['multi']['name']); $i++) { //변경전

for ($i=0; $i < count((array)$_FILES['multi']['name']); $i++) { //변경후

[오류 9] Warning: foreach() argument must be of type array|object,

if(!empty($this->_worksheets)){ //추가       
    foreach ($this->_worksheets as $tmp) {
        if ($name == $tmp->get_name()) {
            trigger_error("Worksheet '$name' already exists", E_USER_ERROR);
        }
    }
}

[오류 10] Fatal error: Uncaught Error: Call to a member function prepare()

$pdo = new PDO('mysql:host=localhost;dbname=test', $user, $pass);  //추가

------------------------------

그 외 오류

Warning: Trying to access array offset on value of type null in /www/adm/shop_admin/orderprintresult.php on line 170

[php 에러] Call to undefined function create_function() 해결 방법

HHHONG — Mon, 21 Oct 2024 15:45:03 +0900

Uncaught Error: Call to undefined function create_function() 에러는 create_function() 가 php8.x부터는 지원하지 않아 발생하는 오류이다. create_function 부분을 function을 다르게 정의해서 수정하면 된다.

수정전

add_action( 'plugins_loaded', create_function( '', 'global $BBCode; $BBCode = new BBCode();' ) )

수정 후

function my_hacked_function(){
    global $BBCode; 
    $BBCode = new BBCode();
}
add_action( 'plugins_loaded', 'my_hacked_function');

참고사이트 : https://wordpress.stackexchange.com/questions/420266/call-to-undefined-function-create-function-php-8-2

적용 예시

영카트 /lib/shop.lib.php 파일 썸네일 생성하는 부분에서 create_function() 을 사용하고 있는데 아래처럼 변경하면 php8.x 상위버전에서 오류가 나지 않는다.

수정전

// 상품이미지 업로드
function it_img_upload($srcfile, $filename, $dir)
{
    if($filename == '')
        return '';

    $size = @getimagesize($srcfile);
    if($size[2] < 1 || $size[2] > 3)
        return '';

    //php파일도 getimagesize 에서 Image Type Flag 를 속일수 있다
    if (!preg_match('/\.(gif|jpe?g|png)$/i', $filename))
        return '';

    if(!is_dir($dir)) {
        @mkdir($dir, G5_DIR_PERMISSION);
        @chmod($dir, G5_DIR_PERMISSION);
    }

    $pattern = "/[#\&\+\-%@=\/\\:;,'\"\^`~\|\!\?\*\$#<>\(\)\[\]\{\}]/";

    $filename = preg_replace("/\s+/", "", $filename);
    $filename = preg_replace( $pattern, "", $filename);


    $filename = preg_replace_callback("/[가-힣]+/",create_function('$matches', 'return base64_encode($matches[0]);'),$filename); //수정전

수정후

create_functiond으로 되어 있던 부분을 상단에 따로 function을 정의( img_func )해주고

기존에 $filename 정의 되었던 부분은 preg_replace_callback('/[가-힣]+/', 'img_func', $filename); 로 변경

//추가
function img_func($matches) { 
    return base64_encode($matches[0]);
}
//추가끝

// 상품이미지 업로드
function it_img_upload($srcfile, $filename, $dir)
{
    if($filename == '')
        return '';

    $size = @getimagesize($srcfile);
    if($size[2] < 1 || $size[2] > 3)
        return '';

    //php파일도 getimagesize 에서 Image Type Flag 를 속일수 있다
    if (!preg_match('/\.(gif|jpe?g|png)$/i', $filename))
        return '';

    if(!is_dir($dir)) {
        @mkdir($dir, G5_DIR_PERMISSION);
        @chmod($dir, G5_DIR_PERMISSION);
    }

    $pattern = "/[#\&\+\-%@=\/\\:;,'\"\^`~\|\!\?\*\$#<>\(\)\[\]\{\}]/";

    $filename = preg_replace("/\s+/", "", $filename);
    $filename = preg_replace( $pattern, "", $filename);

    $filename  = preg_replace_callback('/[가-힣]+/', 'img_func', $filename); //수정

스크롤 애니메이션 효과 wow.js

HHHONG — Sun, 6 Oct 2024 22:24:27 +0900

wow.js는 스크롤 시 페이지들의 요소들이 하나씩 애니메이션 효과로 나타날 수 있도록 해주는 라이브러리로 각 요소들마다 옵션값을 넣어 개별적으로 애니메이션 설정할 수 있어서 사용하기 편하다.

설치방법

1. 공식 사이트 Github에서 파일 다운로드

https://wowjs.uk/

wow.js — Reveal Animations When Scrolling

wowjs.uk

2. WOW-master/css/libs/animate.css 파일을 css폴더나 적당한 폴더에 업로드 원하는 페이지에 로드

<link rel="stylesheet" href="css/animate.css">

3. WOW-master/dist/wow.min.js 파일을 js폴더나 적당한 폴더에 업로드 후 원하는 페이지에 로드, 스크립트 추가

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

스크립트는 아래처럼 설정도 가능하다.

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null,    // optional scroll container selector, otherwise use window,
    resetAnimation: true,     // reset animation on end (default is true)
  }
);
wow.init();

4. 애니메이션 효과를 원하는 요소 Class명에 wow 와 원하는 애니메이션 효과 스타일 추가(fadeIn, fadeOut, bounceInUp, slideInLeft) 지속시간이나 지연시간 등 원하는대로 조정 가능하다.

<div class="wow fadeIn" data-wow-duration="0.5s" data-wow-delay="0.3s">
Contents
</div>

[애니메이션 효과]

* bounce

* flash

* pulse

* bounceIn / bounceOut / bounceInLeft / bounceInRight / bounceInUp

* fadeIn / fadeInDown / fadeInLeft / fadeInRight / fadeInUp 등

더 많은 효과는 https://animate.style/ 에서 확인 가능.

[wow 속성]

* data-wow-duration : 애니메이션 지속 시간

* data-wow-delay : 애니메이션이 실행되기까지의 지연 시간

* data-wow-offset : 요소가 어느정도 올라왔을때 애니메이션이 실행 될지 설정

* data-wow-iteration : 애니메이션 반복 횟수

[에러] Uncaught TypeError: Cannot read properties of undefined (reading 'split')

HHHONG — Fri, 30 Aug 2024 19:26:08 +0900

Uncaught TypeError: Cannot read properties of undefined (reading 'split') 오류가 뜨는경우

데이터 값이 정의된게 없는데(undefined) split을 실행시켜서 생기는 오류이다.

해결방법

이 경우 (sUrl || "") 처럼 변수값이 없는 경우도 포함시켜주면 오류가 나지 않는다.

수정전

var aUrl         = sUrl.split('?');

수정 후

var aUrl         = (sUrl || "").split('?');

[CSS] grid item 크기 넘칠 때

HHHONG — Thu, 29 Aug 2024 01:01:44 +0900

Grid 아이템을 한줄에 두개씩 나오게하기 위해 아래와 같이 CSS 코드를 넣었는데, 어떠한 경우에는 아이템 크기가 넘쳐서 화면을 벗어나는 경우가 생겼다.

.ec-base-product ul.grid2 {grid-template-columns: repeat(2, 1fr);}

무슨 이유인지는 잘 모르겠으나, 구글링한 결과 아래처럼 바꿔줬더니 해결 가능했다.

.ec-base-product ul.grid2 {grid-template-columns: repeat(2, minmax(0, 1fr));}

참고 : https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items

카페24 쇼핑몰 캐싱 / 변경된 코드 바로 확인하는 방법

HHHONG — Mon, 26 Aug 2024 12:54:02 +0900

카페24 쇼핑몰 파일이나 이미지 변경하면 캐싱되는데 시간차가 발생한다.

변경된 코드를 바로 확인하려면 도메인으로 접속하지말고

아래 주소처럼 카페24 주소 뒤에 작업중인 스킨 번호로 들어가면 새로운 코드가 반영된 화면을 확인할 수 있다.

https://XXX.cafe24.com/skin-skin9/

[CSS/jQuery] 크기가 다른 Grid item 자동 정렬 하기

HHHONG — Thu, 15 Aug 2024 00:05:16 +0900

Grid 기본코드

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid div {
  grid-column-end: span 1;
  grid-row-end: span 1;
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
</style>


<div class="grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
</div>

특정 칸만 크기 조절

특정 박스만 크기를 다르게 하고 싶다면 grid-column-end (행 크기 조절), grid-row-end (열 크기 조절) 를 이용해 조절하면 된다. 아래의 경우에는 big class를 가진 박스는 가로 3칸중 2칸, 세로로도 2칸씩 차지하도록 하였다.

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid div {
  grid-column-end: span 1;
  grid-row-end: span 1;
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.grid div.big { //큰박스
  grid-column-end: span 2;
  grid-row-end: span 2;
}
</style>

<div class="grid">
    <div class="item big">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item big">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
</div>

그런데 특정 박스만 크게 하는 경우에, 상황에 따라 여백이 생기는 경우가 있다.

아래 경우에는 Grid를 3칸으로 하였는데, 3n번째 크기를 다르게 하면 바로 윗줄에 여백이 생긴다. (Item 2 옆 공백)

해결방법 1. CSS로 조정하기

여백없이 알아서 채워지도록 하려면 큰박스 다음에 나오는 div를 조정하도록 하면 되는데, 박스 갯수가 몇개나 될지 모르고 하나하나 설정해주는게 여간 번거로운 일이 아니다.

.grid div:nth-child(3).big + div {grid-row: 1;grid-column: 3;}
.grid div:nth-child(6).big + div {grid-row: 2;grid-column: 3;}
.grid div:nth-child(9).big + div {grid-row: 3; grid-column: 3;}

해결방법 2. jQuery로 조정하기

박스가 많거나 css로 일일히 조정하기 어려운 경우, 아래처럼 3n번째 다음에 나오는 박스(Item 7)는 자동으로 3n번째 앞에 3번째 칸에 위치하도록 jQuery로 강제로 조정해준다.

$('.grid > div:nth-child(3n)').each(function () {
if($(this).hasClass("big") === true) {        

    var num = $(this).index(); //index
    var num2 = parseInt(num/3) + 1;

    $(this).next("div").css("grid-row", num2);        
    $(this).next("div").css("grid-column", "3");   
    $(this).next("div").css("background", "yellow");        
  } 
});

그러면 아래처럼 여백 없이 딱 맞게 조정이 된다.

[jQuery] input 엔터 시 특정 함수 실행

HHHONG — Mon, 12 Aug 2024 23:28:04 +0900

보통 입력폼에서 엔터키를 누르면 form이 전송되는데 전송되지 않고 특정 스크립트가 실행되게 하려면 아래처럼 스크립트를 추가해주면 된다.

여기서 keyCode == 13이 엔터키를 의미하고, 엔터키 누르면 form submit 대신 특정 스크립트(f_search)를 실행하게 된다.

<form>
    <input type="text" id="stx">
    <button onclick="f_search()"></button>
</form>

<script>
$("#stx").keydown(function (e) {
  if (e.keyCode == 13) {
    f_search();
    e.preventDefault();
  }
});
 
function f_search() {
    /*스크립트*/
}
</script>

[php] explode 배열 최소값, 최대값 구하기 min(), max()

HHHONG — Wed, 24 Jul 2024 16:04:50 +0900

explode 배열 최소값, 최대값 구하기

보통 데이터가 array 배열로 되어있으면 min(), max()함수를 써서 바로 최소값 최대값을 구할 수 있다.

$arr = array(1,2,3,4,5,6,7); 
$price1 = min($arr);
$price2 = max($arr);

하지만 데이터가 이미 구분자로 합쳐서 들어가져있다면 (예 : 100000|1500000|200000|130000)

배열로 변경한 후에 최소값, 최대값을 구할 수 있다.

$str = $view['sp_price'];
$sub_str = explode("|", $str);
$new_str = array();

foreach ( $sub_str as $row ) {
    $arr = explode( ',', $row );
}

echo min($arr); //최소값
echo max($arr); //최대값

또는 아래와 같이 array_combine 함수를 사용해 배열을 만들어 구할수도 있다.

$str = $view['sp_price'];
$list = explode('|', $str);
$arr = array_combine($list, $list);

echo min($arr); //최소값
echo max($arr); //최대값

VS code / Visual Studio Code 불필요한 태그 삭제하기

HHHONG — Mon, 22 Jul 2024 17:08:38 +0900

워드나 한글 프로그램이나 일반페이지에 있는 것을 그대로 복사 붙여 사용하면 필요없는 태그들까지 복사하게 된다.

이 경우 Visual Studio Code에서 정규표현식으로 쉽게 태그 제거가 가능하다.

정규 표현식 적용 전

태그 제거 방법

1) Ctrl + H를 누른 뒤, 세번째 아이콘(Use Regular Expression)을 클릭한다. 또는 Alt + R 을 누르면 선택이 된다.

2) 위칸에 아래처럼 정규식을 입력해준다. 이 정규식은 정규식에 작성한 태그 외의 태그를 모두 제거하는 정규식이다.

|는 '또는'이라 지우면 안되는 태그들을 모두 |로 구분해서 넣어주면 된다.

아래의 경우에는 이미지태그(img), 링크태그(a href, /a), 테이블태그(tr, td, tbody, table, /tr, /td, /table, /tbody), 줄내림태그(br)은 제외하고 나머지 태그와 공백 문자를 정리하도록 정규식을 넣었다.

<(?!img|a href|/a|tr|td|tbody|table|/tr|/td|/table|/tbody|br).*?>|&nbsp;

모든 태그를 제거하고 싶다면 아래처럼 <[^>]*> 만 입력하면 된다.

<[^>]*>

3) 그러면 이렇게 태그들이 선택되어지는데, 전부 바꾸기(Ctrl + Alt + Enter)를 눌러 빈문자로 만들어주면 된다.

단점은 style=""안에 들어있는 속성들은 삭제가 안되는 함정이...

그래도 간단한 태그들은 쉽게 삭제가 가능해서 편리하게 이용할 수 있다.

[php] 파일 업로드 기능 DB 저장 안될 때

HHHONG — Mon, 22 Jul 2024 12:03:43 +0900

기존에 쓰던 코드 그대로 파일 업로드해서 DB저장하는 기능을 사용하는데 아무리해도 파일 업로드가 되지 않아서 며칠 고생했는데 알고보니 간단하게 해결이 가능했다.

폼 내에 파일첨부 기능을 사용하는 경우, 폼 태그 안에 enctype="multipart/form-data" 를 꼭 넣어줘야한다.

<form name="fregisterform" id="fregisterform" action="" onsubmit="return fregisterform_submit(this);" enctype="multipart/form-data" method="POST" autocomplete="off">

[카페24] 상품 분류, 게시판 스킨별 스크립트, CSS 다르게 적용하기

HHHONG — Tue, 2 Jul 2024 19:37:05 +0900

상품 분류마다 다르게 보여주기

상품 분류 스킨은 동일한데 특정 일부분만 다르게 보여지게 하고 싶은 경우

아래 스크립트를 상품 목록파일(/product/list.html)에 로드되는 /js/module/product/menucategory.js 파일에 추가해주면 된다.

var urll = window.location.href;
var urlParams = new URL(urll).searchParams;
var cate_no = urlParams.get('cate_no');

if(cate_no =="54") {
    //54번 카테고리 분류에 보여질 스크립트
}

[사용예시]

나의 경우에는 카테고리별 설명문구를 추가해주기 위해 아래와 같이 코드를 넣었다.

상품분류페이지에서 간단한 분류 설명은 넣을 수는 있지만 3~4줄 길게 넣을수는 없어서 스크립트로 직접 넣을 수 있도록 하였다.

$('#cate').hide(); 

var urll = window.location.href;
var urlParams = new URL(urll).searchParams;
var cate_no = urlParams.get('cate_no');

var dd = document.getElementById('list_description');

if(cate_no =="54") {
    dd.innerHTML = '카테고리54 설명';
}   

if(cate_no =="71") { 
    dd.innerHTML = '카테고리 71 설명';
    $('#feather_cate').show(); 
    $('#feather_cate ul li:first-child').addClass("on"); 
}

게시판마다 다르게 보여주기

카페24 게시판 스킨은 동일하게 사용하는데, 특정 게시판에서만 일부 div가 안보이게 한다던지 차이를 줄때

아래 스크립트를 사용하면 된다.

여기서 주의할 점은 이 스크립트는 주소창의 board_no 변수를 불러와서 구분하기 때문에

게시판 주소는 무조건 www.abc.com/board/free/list.html?board_no=1002 이런식으로 .html 뒤에 변수가 오는 형태로 사용하는 경우에만 사용 가능하다.

var getBoardNo = location.href.split('board_no=')[1]; //게시판 번호 불러오기

if(getBoardNo == 1002) {
    document.getElementById("board_cate").style.display = "none";
}

[php] DB 텍스트 특수문자 (<, >, &, ", ' 등) 인식 / html 변환

HHHONG — Wed, 19 Jun 2024 12:07:55 +0900

DB 데이터 자체에는 특수문자를 포함한 데이터가 잘 들어가지는데, 불러올 때 꺽쇠나 특수문자가 들어간 부분은 삭제되고 보여지는 오류가 있어 해결할 수 있는 방법을 알아보았다.

<, >를 태그로 인식하지 않게 하기 위해서는 htmlspecialchars() 함수를 써주면 된다.

htmlspecialchar()

PHP 4, PHP 5, PHP 7, PHP 8 사용가능

어떤 문자들은 HTML에서 특별한 정의를 지니는데 그 의미를 보존하려면 HTML엔티티로 표현해야한다. 이 함수는 이러한 변환을 거친 문자열을 반환해준다.

Character	Replacement
& (앰퍼샌드)	&
" (쌍따옴표)	"
' (따옴표)	&#039
< (부등호)	⁢
> (부등호)	>

사용예시

[예시코드1]

$entity= "<b>내용내용</b>";
echo htmlspecialchars($entity);

[결과1] : <b>를 태그로 인식하지 않고 그대로 보여준다.

<b>내용내용</b>

[예시코드2]

$entity= "<title>";
echo htmlspecialchars($entity);

[결과2] : <title>를 태그로 인식하지 않고 그대로 보여준다.

<title>

변수의 경우 이런식으로 직접 넣어 사용 가능하다.

<?php echo htmlspecialchars($row['wr_5']);?>

nl2br함수와 함께 사용 하는 경우

<?php echo nl2br(htmlspecialchars($row['wr_5']));?>

참고 : https://www.php.net/manual/en/function.htmlspecialchars.php

PHP: htmlspecialchars - Manual

One MUST specify ENT_HTML5 in addition to double_encode=false to avoid double-encoding.The reason is that contrary to the documentation, double_encode=false will NOT unconditionally and globally prevent double-encoding of ALL existing entities. Crucially,

www.php.net

유튜브 영상, 쇼츠 화면 반응형 코드 iframe embed

HHHONG — Mon, 17 Jun 2024 20:57:08 +0900

유튜브 영상이나 쇼츠를 유튜브에서 복사한 코드 그대로 가져오는 경우, 반응형이 아니라서 기기에 따라 양옆에 여백이 생기게 된다.

적용전

반영형 영상

1) 먼저 영상 아이프레임 코드를 <div class="video-container"> 로 감싸준다.

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/6KYPsNmCkTw" frameborder="0" allowfullscreen=""></iframe>
</div>

2) CSS로 iframe이 영상 비율에 맞게 나올 수 있도록 한다.

.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

반응형 쇼츠

여백없이 꽉차게 보일 수 있도록 하기 위해서는 아래처럼 CSS를 조정하면 된다.

1) 먼저 쇼츠 아이프레임 코드를 <div class="shorts-container">로 감싸준다.

<div class="shorts-container">
<iframe src="https://www.youtube.com/embed/6KYPsNmCkTw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

2) CSS로 iframe이 쇼츠 비율에 맞게 나올 수 있도록 한다.

.shorts-container {
    position:relative;
    width:100%;
    height:0;;
    padding-bottom:177.78%
}

.shorts-container iframe {
     position:absolute;
     width:100%;
     height:100%;
     left:0;
     top:0;
}

적용후

디바이스 크기가 변해도 항상 가로세로 100% 맞춰서 꽉차게 나오게 된다.

카페24 게시판 스킨 변경 시 링크 변수 변경

HHHONG — Fri, 24 May 2024 17:51:42 +0900

카페24 게시판 스킨을 새로 만드는 경우,

게시판 각 항목 링크 클릭 시 기본으로 설정 되어있는 스킨(free, prouduct 등)으로 적용되어

새로 만든 스킨으로 적용이 되지 않는다. 이 경우 아래와 같이 링크 부분을 변경해 주어야한다.

[예시] 게시판 목록 (list.html파일)

게시판 상세 페이지로 넘어가는 링크 경로를 변경해주어야한다.

        <tr style="{$list_bg_color} {$list_char_color}" class="{$block_target_class}" {$block_data_attr}>
            <td class="chk no">{$checkbox}<span class="RW">{$no}</span></td>
            <td class="subject left txtBreak">
                {$icon_re}{$icon_lock}<a href="{$link_board_detail}" style="{$link_color}" class="{$block_content_class}">{$subject}</a>{$icon_file}<span class="comment">{$comment_count}</span>{$icon_mobile}{$icon_new}{$icon_hit}
            </td>
            <td class="{$category_display|display}">{$category_name}</td>
            <td>{$member_icon}{$writer}</td>
            <td class="{$date_display|display}">{$write_date}</td>
            <td class="{$hit_display|display}"><span class="RTMI">조회</span> {$hit_count}</td>
            <td class="{$point_display|display}"><img src="//img.echosting.cafe24.com/skin/skin/board/icon-star-rating{$point_count}.svg" alt="{$point_count}점" /></td>
        </tr>

위의 코드에서

<a href="{$link_board_detail}" style="{$link_color}" class="{$block_content_class}"> 를

=> <a href=" /board/스킨폴더명/read.html{$param_read} " style="{$link_color}" class="{$block_content_class}">로 변경

이런식으로 게시판 스킨 폴더 내 list.html, read.html, write.html 파일 모두 링크 부분을 변경해주면 된다.

	기존링크	→ 변경 링크
게시판 리스트	{$link_board_list}	/board/스킨폴더명/list.html{$param_list}
게시판 상세뷰	{$link_board_detail}	/board/스킨폴더명/read.html{$param_read}
글 수정	/board/free/modify.html{$param_modify}	/board/스킨폴더명 /modify.html{$param_modify}
답변 쓰기	/board/free/reply.html{$param_reply}	/board/스킨폴더명/reply.html{$param_reply}
글쓰기	/board/free/write.html{$param_write}	/board/스킨폴더명/write.html{$param_write}
이전글	{$link_board_detail_prev}	/board/스킨폴더명/read.html{$param_prev}
다음글	{$link_board_detail_next}	/board/스킨폴더명/read.html{$param_next}

* 참고 : https://sdsupport.cafe24.com/module/board/gallery/list.html

스마트디자인 서포트

갤러리 게시판의 경우 일반 게시판과 모듈, 변수들이 동일하지만 목록을 이미지형/리스트형으로 선택하여 노출할 수 있는 차이점이 있습니다. 설명 갤러리 목록 모듈입니다. onerror 이벤트를 통

sdsupport.cafe24.com

[그누보드/영카트] 글쓰기시 이모지 사용하기

HHHONG — Wed, 27 Mar 2024 10:34:54 +0900

그누보드 영카트 게시판에서 이모지를 등록하면 물음표로 뜨게 된다. 이 경우 CHARSET을 변경해주어야한다.

1. DB 기본 셋팅 변경

ALTER TABLE `yourDBName`.`yourTableName` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. config.php 파일 변경

기존
define('G5_DB_CHARSET', 'utf8');

변경
define('G5_DB_CHARSET', 'utf8mb4');

3. /adm/sql_write.sql

기존
ENGINE=MyISAM  DEFAULT CHARSET=utf8;

변경
ENGINE=MyISAM  DEFAULT CHARSET=utf8mb4;

utf8이라 되어있는 부분을 utf8mb4로 변경해주면 이모지 등록이 잘 된다.

혹시나 이렇게 했는데도 제대로 안보인다면 텍스트 나오는 부분 폰트를 이모지 폰트로 지정해주면 된다.

font-family: 'Noto Emoji', 'Segoe UI Emoji', sans-serif;

자바스크립트 예약어

HHHONG — Tue, 27 Feb 2024 22:46:33 +0900

예약어(Reserved Words)는 자바스크립트에 먼저 등록된 요소를 말한다.

이 예약어는 변수, 라벨, 펑션 네임으로 사용할 수 없다.

변수, 라벨 등에서 사용할 수 없는 예약어

arguments	break	case	continue	default
do	else	false	for	function
if	null	return	super	switch
this	true	try	typeof	var
void	while	with

예시

//사용가능
var apple = a; 
var name = a; 

//사용불가
var arguments = a;
var if = a;
var do = a;
var default = a;

생각보다 많은 예약어가 있는데 아래 표 참고

참고 : https://www.w3schools.com/js/js_reserved.asp

그누보드/영카트 사업자등록번호 인증 회원가입 및 관리 시스템 (휴·폐업자 가입 제한)

HHHONG — Tue, 30 Jan 2024 21:33:15 +0900

국세청 API를 통해 사업자번호 유효성(휴/폐업 여부)을 체크하여 회원가입을 받을 수 있는 플러그인입니다.

사업자회원 승인,보류 가능하며,

사업자회원 일괄 사업자번호 조회 및 레벨 관리가 가능합니다.

해당 코드 구입 또는 자세한 내용을 보고 싶으시다면 그누보드 컨텐츠몰에서 확인 부탁드립니다.

⬇ 바로가기 ⬇

https://sir.kr/cmall/1706584561

사업자등록번호 인증 회원가입 및 관리 시스템 (휴·폐업자 가입 제한) >

sir.kr

감사합니다.

영카트 주문내역 이카운트용 엑셀 출력

HHHONG — Tue, 30 Jan 2024 21:29:41 +0900

기존에 이카운트 ERP 프로그램으로 제조, 생산, 품목관리를 하고, 영카트로 쇼핑몰 운영을 하고 계시다면 이카운트와 영카트가 연동이 되지 않아 주문내역을 일일히 입력해주어야하는 번거로움이 있었습니다.

기존에 영카트에서도 주문내역을 출력할 수 있는 기능이 있지만
이카운트 전용으로 이카운트 판매입력 폼에 맞추어 입력 가능하도록 커스터마이징해드립니다.

소개

영카트 주문내역을 이카운트 일괄 등록 폼에 맞추어 엑셀로 출력해주는 프로그램입니다.
거래처코드/거래처명/업체전화번호/출하창고/대표자명/거래유형/품목코드 등

주요기능

* 회원별 업체명/업체코드 등록
* 상품별 품목코드 등록
* 이카운트 판매입력 폼에 맞추어 날짜별 주문내역 엑셀 파일 다운로드
* 주문내역을 이카운트에 일괄 등록

다운 받게되는 엑셀 형태 예시입니다. 다운 받은 엑셀을 이카운트에 등록하시면 거래처별로 주문내역 일괄 등록이 가능합니다.

해당 프로그램 구입 또는 자세한 내용을 보고 싶으시다면 그누보드 컨텐츠몰에서 확인 부탁드립니다.

⬇ 바로가기 ⬇

https://sir.kr/cmall/1677227002

영카트 주문내역 이카운트용 엑셀 출력 >

기존에 이카운트 ERP 프로그램으로 제조, 생산, 품목관리를 하고, <br/> <br/>영카트로 쇼핑몰 운영을 하고 계시다면 이카운트와 영카트가 연동이 되지 않아 주문내역을 일일히 입력해주어야하는

sir.kr

영카트 주문 시 할인코드 할인기능 코드 생성

HHHONG — Tue, 30 Jan 2024 21:24:21 +0900

기능소개

" 쇼핑몰이 넘쳐나는 시대. 고객 마케팅이 참 중요해졌습니다.
할인코드 기능으로 사이트 유입율 & 주문율을 더 올려보세요!"

요즘 트랜디한 사이트 아*다, 마켓*리, 오늘의* 등 이미 많은 사이트에서 고객 유입/주문율을 높이기 위해 사용중인 기능입니다.

영카트 관리자페이지에서 미리 원하는 할인코드을 지정해두고, 회원에게 홍보하세요!
예) "주문시 '오늘첫구매'를 입력하시면 할인받으실 수 있습니다."
고객은 해당 홍보 문구를 보고 회원가입 및 주문을 하게 됩니다.
할인코드는 이벤트 목적에 따라서 다양하게 만드실 수 있습니다.
예) hello2022, welcometoshop, bye2021, 오늘첫구매 등등
회원이 상품 주문시 해당 할인코드를 입력하면 관리자가 설정한 할인금액만큼 주문총액에서 할인되도록 하는 기능입니다.

미리보기

주문서 작성 페이지

관리자페이지

[ 주요기능 ]

✔ 관리자페이지에서 여러 할인코드 관리 가능

✔ 할인코드 영문, 숫자, 한글 모두 사용 가능

✔ 할인코드 사용기간 지정가능
✔ 정액할인(원)/정률할인(%),할인금액 지정, 최소주문금액 지정 가능
✔ 하나의 할인코드를 여러번 사용 또는 한번만 사용 설정 가능

주의사항

- 배송비를 제외한 상품 주문 총액에서 할인이 적용됩니다.
- 회원 주문 시에만 주문서 페이지에 할인코드 영역이 보여지게 됩니다. (비회원은 해당 기능 사용 불가)

데모 사이트

http://sample123.dothome.co.kr/

테스트 아이디 : testadmin / 패스워드 : test

할인코드 testcode1 (정액할인 1000원, 최대 5,000원, 여러번 사용가능)
할인코드 testcode2 (정률할인 10%, 최대 5,000원, 여러번 사용가능)
할인코드 testcode3 (정액할인 2000원, 최대 5,000원, 1회만 사용가능)
할인코드 웰컴할인 (정액할인 1000원, 최대 5,000원, 여러번 사용가능)

테스트 환경

- 영카트 5.4.18 / PHP 7.4.26 테스트완료
- 영카트 5.4.2.8/ PHP 5.6.40 테스트완료
- 영카트 5.3.2.0 / PHP 7.4 테스트완료

플러그인 구입 및 자세한 내용은 그누보드 컨텐츠몰에 접속하셔서 확인해주기 바랍니다.

⬇ 바로가기 ⬇

https://sir.kr/cmall/1638782516

영카트 할인코드 할인기능 >

기능소개 <br/> <br/> <br/> <br/>" 쇼핑몰이 넘쳐나는 시대. 고객 마케팅이 참 중요해졌습니다. <br/> <br/>할인코드 기능으로 사이트 유입율 & 주문율을 더 올려보세요!" <br/> <br/> <br/> <br/>요즘 트랜디한

sir.kr

그누보드 게시판 게시물 연도별로 보기

HHHONG — Mon, 15 Jan 2024 17:51:05 +0900

갤러리나 게시판 게시글이 많아지면 카테고라이징이 필요한 경우가 생긴다. 그누보드에서 게시판에 카테고리를 생성하여, 글 등록시에 카테고리를 선택할수도 있지만 날짜에 따라 자동으로 카테고라이징 하여 볼 수 있게 추가 카테고리를 추가하는 작업을 하였다.

예시화면

기본적으로 현재 연도에 해당하는 게시물만 보여지며, 게시판 우측 상단에서 연도를 선택한 뒤 '이동하기'를 클릭하면 해당 년도에 속하는 게시물만 볼 수 있도록 하는 기능이다.

카테고리 예시

코드 수정 방법

나의 경우에는 날짜를 게시물 등록 날짜가 아닌 사진을 찍은 날짜로 선택해서 등록할 수 있도록 하여서 날짜부분이 여분필드인 wr_1로 되어있는데, 게시물 등록날짜로 구분하고 싶은 경우에는 wr_1을 wr_datetime으로 변경해서 사용하면 된다.

1) /bbs/category_year.php 파일 업로드

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
$year = $_REQUEST['year'];
?>

<!-- } 연도별보기 -->
<div id="bo_cate" class="cate_year">

      <label for="year">연도별 바로가기</label>
      <select name="" id="year" class="select1">

      <?php       
      $thisyear = (new DateTime)->format("Y");      
      for($i=$thisyear; $i>=2017; $i--) {?>

      <?php if($i == $thisyear) {?>
      <option value="/bbs/board.php?bo_table=<?php echo $bo_table ?>&sca=&sop=and&sfl=wr_1&stx1=<?php echo $i;?>&stx2=" <?php if($_REQUEST['stx1'] =='' || $_REQUEST['stx1'] == $i || !$_REQUEST['stx1']){?>selected<?php }?>><?php echo $i;?>년</option>
      <?php } else {?>
      <option value="/bbs/board.php?bo_table=<?php echo $bo_table ?>&sca=&sop=and&sfl=wr_1&stx1=<?php echo $i;?>&stx2=" <?php if($_REQUEST['stx1'] == $i){?>selected<?php }?>><?php echo $i;?>년</option>
      <?php }?>

      <?php } ?>
      </select>
      <button>이동하기</button>

</div>


<script type="text/javascript">
   $(".cate_year button").on("click",function(){
      var link = $(".cate_year .select1 option:selected").val();
      window.open(link, '_self');
   })
</script>

<!-- } 연도별보기 -->

2) 게시판 스킨 list.skin.php파일 수정 (category_year.php 파일 인클루드)

<div class="bo_fx">
    <div id="bo_list_total">총 <?php echo number_format($total_count) ?></b></font>건
        / <?php echo $page ?> 페이지</span>
    </div>
    
    <?php include_once(G5_BBS_PATH.'/category_year.php');?> <!--추가-->

</div>

2-1) for문 아래 추가

 <?php 
 for ($i=0; $i<count($list); $i++) {
		
    //연도별 보기 추가
    if($_REQUEST['stx1']){ 
        $year = $_REQUEST['stx1'];
    } else { 
       $year = date("Y"); 
    }	

    $thisyear = date("Y");
    $wr_year = substr($list[$i]['wr_1'], 0, 4);

   if($wr_year == $year) {           
   //연도별 보기 추가 끝

2-2) for문 } 추가

        <?php }} ?>  <!-- } 추가 -->
        <?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>
    </ul>

2-3) 하단 페이지네이션 코드 수정

<?php echo $write_pages; ?> 한줄 삭제하고 아래 내용으로 전체 교체한다.

<!-- 페이지 -->
<?php //echo $write_pages;  ?>

<?php 

if($_REQUEST['stx1']) {
    $stx1 = $_REQUEST['stx1'];
} else {
    $qstr = "&sca=&sop=and";
    $stx1 = (new DateTime)->format("Y");
}

echo get_paging(G5_IS_MOBILE ? $config['cf_mobile_pages'] : $config['cf_write_pages'], $page, $total_page, './board.php?bo_table='.$bo_table.$qstr.'&amp;page=&amp;sfl=wr_1&amp;stx1='.$stx1.'&amp;stx2=');

?>

3) bbs/list.php 파일 수정

// 분류 선택 또는 검색어가 있다면

    if(!$stx1 && $bo_table == "m6_1") {  //게시판이름 변경

        $year = (new DateTime)->format("Y");

        $stx = $year." ".trim($stx2);
        $sfl = "wr_1";

        $sql_search = get_sql_search($sca, $sfl, $stx, $sop);

        // 가장 작은 번호를 얻어서 변수에 저장 (하단의 페이징에서 사용)
        $sql = " select MIN(wr_num) as min_wr_num from {$write_table} ";
        $row = sql_fetch($sql);
        $min_spt = (int)$row['min_wr_num'];

        if (!$spt) $spt = $min_spt;

        $sql_search .= " and (wr_num between {$spt} and ({$spt} + {$config['cf_search_part']})) ";

        // 원글만 얻는다. (코멘트의 내용도 검색하기 위함)
        // 라엘님 제안 코드로 대체 http://sir.kr/g5_bug/2922
        $sql = " SELECT COUNT(DISTINCT `wr_parent`) AS `cnt` FROM {$write_table} WHERE {$sql_search} ";
        $row = sql_fetch($sql);
        $total_count = $row['cnt'];

        } else if (($sca || $stx1 || $stx2)) {
        $stx = trim($stx1)." ".trim($stx2);
        $sql_search = get_sql_search($sca, $sfl, $stx, $sop);

        // 가장 작은 번호를 얻어서 변수에 저장 (하단의 페이징에서 사용)
        $sql = " select MIN(wr_num) as min_wr_num from {$write_table} ";
        $row = sql_fetch($sql);
        $min_spt = (int)$row['min_wr_num'];

        if (!$spt) $spt = $min_spt;

        $sql_search .= " and (wr_num between {$spt} and ({$spt} + {$config['cf_search_part']})) ";

        // 원글만 얻는다. (코멘트의 내용도 검색하기 위함)
        // 라엘님 제안 코드로 대체 http://sir.kr/g5_bug/2922
        $sql = " SELECT COUNT(DISTINCT `wr_parent`) AS `cnt` FROM {$write_table} WHERE {$sql_search} ";
        $row = sql_fetch($sql);
        $total_count = $row['cnt'];
        /*
        $sql = " select distinct wr_parent from {$write_table} where {$sql_search} ";
        $result = sql_query($sql);
        $total_count = sql_num_rows($result);
        */
    } else {
        $sql_search = "";
        $total_count = $board['bo_count_write'];
    }

애드센스 수익금 지급 받기, 신한은행 수수료 줄이는 방법

HHHONG — Tue, 21 Nov 2023 22:56:43 +0900

애드센스 수익금이 100달러가 넘으면 수익금을 지급 받을 수 있게 된다. 애드센스 수익을 받기 시작하면서부터는 관심사가 이제 어떻게 하면 수수료를 최대한 줄이고 받을 수 있을까가 되는 것 같다. 외환통장을 개설해서 환율이 오를 때 출금하여 지급액을 최대한으로 받을 수 있는 방식도 있지만, 일단은 신한 일반 입출금 통장을 등록하고 받아보기로 하였다. (다행히 이때 환율도 나쁘지는 않았다)

세상에서 가장 반가운 애드센스 송금 도착 안내 메세지!

애드센스 송금 도착 안내 메세지

애드센스 수익금은 설정한 지금 금액이 넘으면 익월 구글에서 21일에 한국 은행으로 송금하고, 며칠 뒤 25일경 해당 은행에서 이런식으로 알림이 오게 된다. 신한은행은 알림톡으로 연락이 왔다. 내가 받게될 금액은 337.07 이라는데! 수수료가 어떻게 부과되는지 알아보았다.

신한은행 외환 송금 수수료

신한은행으로 애드센스 수익금을 지급 받으면 받을 때마다 약 만원 정도의 수수료가 차감된 후 지급 받게 된다.

약 만원에 해당하는 수수료는 아래와 같이 두가지의 수수료가 합쳐진 금액이다.

①중개수수료 $5 + ② 송금수수료 5,000원

① 중개 수수료 $5

중개수수료는 애드센스(해외)에서 신한은행(국내)으로 넘어오면서 부과되는 수수료 이다. 애드센스에서는 $342.07의 금액이 지급 되었다고하는데, 은행 알림을 받으면 $5가 빠진 337.07을 지급받는다고 되어있다.

1) 애드센스 -> 신한은행으로 넘어오면서 $5 수수료

② 송금수수료 5,000원

송금수수료는 달러로 받은 금액을 원화로 변경하면서 드는 수수료이다. 송금 수수료는 원래 100불 미만인 경우 면제이나 애드센스는 최소 100불 이상부터 지급 받을 수 있으므로 해당사항 없고, 쏠을 통해 지급 받으면 50% 면제되어 할인 받아 수수료 5,000원이 차감된 후 지급 받을 수 있다. 환율도 50% 우대해주어서 최종적으로 441,651원을 받았다.

정리하자면 처음 지급 받기로한 금액에서 10달러정도 빠지고 입금 받았다. (환율에 따라서 조금씩 차이가 날 수는 있다)

애드센스 지급액 $342.07

- 중개수수료 $5

- 송금수수료 5,000원

-----------------------------------

= 최종 441,6651원 (약 $333.29) 지급 받았다.

수수료를 줄일 수 있는 방법은?

수수료를 줄일 수 있는 방법은 아주 간단하다. 바로 한번에 받는 지급 금액을 높이는 것!

위에서 말한 수수료는 수익금을 받을 때마다 부과되는 것이므로, 수익금을 한번에 많이 받아서 수수료를 최대한 줄이는 것이다.

같은 500달러를 받더라도,

- 100달러로 5번에 나눠서 받으면 수수료 약 1만원 * 5번 = 5만원

- 500달러 한번에 받으면 수수료 약 1만원 * 1번 = 1만원 !!!

지급 기준액을 변경하는 방법은

1) 애드센스페이지 좌측 메뉴에서 '지급정보' 클릭한 뒤, '설정 관리' 클릭

2) 지급 일정에서 연필 모양 아이콘 클릭

3. 지급 기준액을 입력하면 된다. 최소 $100부터 입력이 가능하다.

유의사항

연간 해외로부터 송금 받은 금액이 미화 1만불 상당액 초과시 국세청 통보 대상이 된다고하니 애드센스에서 자동 지급을 10000불 미만으로 설정해야한다.

[jQuery] 새로고침 시 스크롤 위치 맨위로 리셋해주는 스크립트

HHHONG — Sun, 19 Nov 2023 20:54:06 +0900

스크롤을 내려 페이지를 보다가 새로고침 하는 경우, 브라우저가 이전 스크롤 위치를 기억하였다가 해당 스크롤 위치 그대로 보여준다. 새로고침 할 때, 이전 위치가 아닌 가장 위로 보여주고 싶은 경우 아래 코드를 넣어주면 된다.

문서 로드시, 자동으로 scrollTop: 0 을 적용하여, 문서 맨 위로 로드될 수 있도록 해준다.

$(function(){
    $("html, body").animate({ scrollTop: 0 }, "fast"); 
});

썸네일

[jQuery] 스크롤 이벤트 / 스크롤 특정 위치에 따라 효과 변경

HHHONG — Sun, 19 Nov 2023 20:50:55 +0900

스크롤 위치에 따라 요소들에 Class를 추가해준다던지, 효과를 변경할 수 있다.

현재 스크롤 위치 구하기

$(document).scrollTop();

특정 요소의 위치 구하기

offset().top을 사용하면 문서 상단으로부터 특정 섹션, div가 있는 위치를 구할 수 있다.

$("#section3").offset().top;

scroll()기본 코드

$(window).scroll(function(){

  var h = $(document).scrollTop(); //현재 스크롤 위치
    
      if(h > 200) { // 스크롤 위치가 200을 넘으면

      } else {

      }

});

응용

현재 내 스크롤 위치와 특정요소의 위치를 통해 사이트에서 다양하게 구현이 가능하다.

1) 배경색이 검정색인 섹션(#section1)을 지날때는 상단메뉴에 class명 white를 추가해주어, 글자색을 흰색으로 변경해주고, 로고 이미지 경로 변경으로 이미지 컬러도 변경해준다.

if(h > offset && h < offset2) { //특정 div(#section1)가 있는 곳을 지날 때
       mn.addClass("white"); 
       logo.attr("src", "/img/symbol_white.svg");
}

2) 사이트에서 스크롤을 내릴때 스크롤이 200이상 내려가면 상단 메뉴에 Class명 fixed를 추가해주고, 로고도 변경해준다.

 if(h > 200) {  //스크롤이 200 이상에 위치할 때
        mn.addClass("fixed");    
        mn.removeClass("white"); 
        logo.attr("src", "/img/symbol.svg");
}

3) 그 외에는 추가한 모든 Class를 지워주고, 이미지 경로도 원래대로 돌려준다.

else {  // 그 외
        mn.removeClass("fixed");
        mn.removeClass("white"); 
        logo.attr("src", "/img/logo.svg");
}

전체코드

$(window).scroll(function(){

        var 
        mn = $("#header");
        logo = $("#header #logo img");
        h = $(document).scrollTop();
        offset = $("#section1").offset().top;
        offset2 = $("#section2").offset().top;
        
        
        if(h > offset && h < offset2) { //특정 div(#section1)가 있는 곳을 지날 때
           mn.addClass("white"); 
           logo.attr("src", "/img/symbol_white.svg");
        } else if(h > 200) {  //스크롤이 200 이상에 위치할 때
            mn.addClass("fixed");    
            mn.removeClass("white"); 
            logo.attr("src", "/img/symbol.svg");
        } else {  // 그 외
            mn.removeClass("fixed");
            mn.removeClass("white"); 
            logo.attr("src", "/img/logo.svg");
        }


    });

썸네일

[php] Undefined variable, Undefined index 에러 해결

HHHONG — Tue, 7 Nov 2023 18:52:36 +0900

php 에서 Undefined variable, Undefined index 에러메세지는 값(변수)이 제대로 정의되지 않아 발생하는 오류이다.

값이 없는 경우를 대비해서 아래처럼 미리 지정을 해주어야한다.

[에러 해결방법] isset()를 사용한 변수 선언

에러메세지가 Undefined variable : XX in /web/home/, Undefined index : XX in /web/home/ 이런식으로 뒤에 어떤 변수에 대한 오류인지 뜰텐데, 해당 변수를 isset()함수를 사용하여 값을 정해줘야한다. 해당 변수에 대한 값이 있으면 해당값을 보여주고 아니면 공백으로 값을 전달할 수 있도록 해야한다.

$value = isset($_POST['value']) ? $_POST['value'] : '';

if문을 쓰는 경우에도 아래와 같이 isset 함수를 사용하여 값에 따라 if문이 작동되도록 하면 된다.

if(isset($row['ct_qty'])) {

//코드

}

isset()함수란?

변수가 선언되었는지를 알려주는 함수이고, null과 다른지 확인해주는 함수이다.

https://www.php.net/manual/en/function.isset.php

PHP: isset - Manual

If you are annoyed by the behavior of isset() concerning null values, here is a handy function for you. its similar to array_key_exists but, its a lot more flexible and can check for multiple array keys across multiple arrays.Not recursive!Tested on php 8.

www.php.net

[jQuery] Swiper 슬라이더 버튼 컬러 변경 (Navigation, Pagination)

HHHONG — Mon, 6 Nov 2023 15:29:58 +0900

Swiper 스와이퍼 슬라이더 기본 코드

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

위와 같이 기본 CSS를 불러와 사용하면 아래처럼 모든 버튼들 컬러가 파란색으로 보여진다.

Navigation, Pagination 컬러 변경

네비게이션, 페이지네이션의 파란색을 다른 색으로 변경하는 방법은 아주 간단하다.

아래와 같이 테마 컬러를 변경해주는 코드를 추가해주면 된다. 단, 기존 Swiper CSS 코드보다 아래쪽에 위치해야한다.

<style>
    :root {
    --swiper-theme-color: #000
    }
</style>

그러면 이렇게 화살표 네비게이션과 페이지네이션이 모두 검정 컬러로 변경된다. 간단하게 변경 끝!

- Swiper 관련 다른 글들 -

[jQuery] Swiper Options 자주 사용하는 옵션

여러모로 다양하게 활용이 가능한 jQuery 슬라이더 Swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior

hongpage.kr

Swiper 슬라이더 익스플로러에서 작동 안될 때 해결 방법

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더. 작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가. 여기저기 헤매던

hongpage.kr

[오류] Swiper 오류 해결 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type '

잘 쓰고 있던 swiper 스크립트에서 어느날 갑자기 이런 오류가 떴다. Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 구글링해봤더니 Window에 파라미터를 지정해

hongpage.kr

구글 사이트 등록하기 / 구글 서치콘솔 사용 방법 SEO

HHHONG — Fri, 20 Oct 2023 19:04:38 +0900

1. 구글 사이트 등록 전 - SEO 설정

구글 사이트 등록하기전에 홈페이지 <head>와 </head>사이에 메타태그를 적절히 넣어줘야한다.

<head>

    <meta name="description" content="사이트 설명" />
    <meta name="keyword" content="사이트 키워드">
    <meta property="og:type" content="website" />
    <meta property="og:title" content="사이트 제목" />
    <meta property="og:description" content="사이트 설명" />
    <meta property="og:url" content="사이트 주소" />
    <meta property="og:image" content="썸네일주소" />
    <link rel="shortcut icon" href="파비콘 주소"> 
    <link rel="canonical" href="사이트 주소" />

</head>

SEO 메타태그 관련한 자세한 내용은 아래 포스팅 참고

https://hongpage.kr/14

[네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정

네이버에 사이트 등록하기 (네이버 웹마스터도구) STEP 1. 메타태그 삽입 네이버 또는 다른 포탈사이트에 내 홈페이지를 등록하기 위해서는 몇가지 설정을 해야하는데 그 중 가장 먼저 해야할 일

hongpage.kr

2. 구글 사이트 등록하기

1) 구글에 사이트 등록은 서치콘솔에서 가능하다. https://search.google.com/search-console?hl=ko 에 접속한 뒤, 오른쪽 URL 접두어 란에 사이트 주소를 입력하고 [계속]을 클릭한다.

2) 소유권 확인하라는 창이 뜨는데, 이 홈페이지가 실제 내가 관리하는 홈페이지인지 확인하는 절차이다.

파일을 다운받아 홈페이지 서버에 접속해서 최상단 폴더에 업로드한다.

2-1) 혹시나 FTP를 통해 서버 접속이 어렵다면 (티스토리, 카페24 등 사이트의 경우), 다른 확인 방법 중 'HTML 태그'를 복사해서 홈페이지 공통 헤더 파일의 <head>와 </head>사이에 넣어주면 된다.

3) HTML 파일을 업로드하였든, HTML 태그를 넣었든 정상적으로 잘 들어갔다면 아래와 같이 소유권이 확인되었다는 창이 뜬다. 사이트 검색 등록은 완료 되었고, 3~7일정도 후에 검색 등록이 완료 되었는지 확인하면 된다.

사이트맵 등록(선택)

소유권 확인 완료 창에서 '속성으로 이동'을 눌러 사이트맵을 등록해주면 조금 더 최적화되어 사이트가 보여질 수 있어 사이트맵을 꼭 등록하는 것을 추천한다.

검색엔진 사이트 등록하기

- 함께보면 좋은 글 -

[네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정

hongpage.kr

[네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ② 사이트 등록하기

이전글 - [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 네이버에 사이트 등록하기 (네이버 웹마

hongpage.kr

다음 사이트 검색 등록 방법

다음 검색시 사이트가 뜨게 하려면 다음에 사이트 등록을 하면 되는데, SEO설정 없이 간단하게 아래와 같이 신청하면 하면 된다. 다음 사이트 검색 등록하기 1. 다음 검색등록 페이지(https://register

hongpage.kr

다음 사이트 등록 방법 / 검색엔진 SEO

HHHONG — Fri, 20 Oct 2023 18:42:54 +0900

다음 검색시 사이트가 뜨게 하려면 다음에 사이트 등록을 하면 되는데, SEO설정 없이 간단하게 아래와 같이 신청하면 하면 된다.

다음 사이트 검색 등록하기

1. 다음 검색등록 페이지(https://register.search.daum.net/index.daum)에 접속한 뒤, 가운데 등록화면 URL에 등록할 홈페이지 주소를 입력한다.

2. 개인정보 및 서비스 이용 동의에 체크 후 [확인]을 누른다.

3. 검색시 나오게할 정보들을 입력하면 된다.

1) 제목(필수) : 사이트이름

2) 모바일 URL : 별도의 모바일 홈페이지 주소가 있는 경우 적어준다.

ex) 카페24 쇼핑몰의 경우 기존 주소 앞에 m. 붙은 모바일 주소

3) 설명 : 검색시 사이트이름 아래에 나오는 설명

4) 설명-품목 (필수) : 검색시 사이트이름 아래에 나오는 설명. 다루는 상품 또는 서비스명들을 콤마로 구분하여 적어준다.

3번과 4번에 적은 내용이 사이트명 아래에 함께 노출 된다.

5) 설명-지역 : 서비스 지역이 있는 경우 적어준다.

6) 카카오톡 채널 URL : 카카오톡 채널이 있는 경우 주소를 적어준다.

7) 디렉토리 (필수) : 사이트가 해당하는 디렉토리를 검색해서 적어준다.

모두 적고 하단에 신청자 이름과 이메일을 적어주면 끝! 이 이름과 이메일은 추후 검색등록 내용을 수정하거나 삭제할 때도 필요하니 정확하게 적어야한다.

아래처럼 꼼꼼하게 적으면 된다.

4. 알맞게 입력하고 [확인]버튼 누르면 신청 완료!
실제 사이트 검색에 반영되기까지는 3~7일정도 소요된다. 사이트 등록이 완료되면 작성한 이메일로 연락이 오니 확인하면 된다.

간단하게 다음 사이트 검색 등록 끝!

검색 등록 내역 조회/수정

내역을 확인하고 싶다면 메인페이지에서 [조회]를 눌러 사이트 주소를 입력하고 확인을 누르면 현재 상황을 조회 가능하다.

검색엔진 사이트 등록하기

-함께보면 좋은 글-

[네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정

hongpage.kr

[네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ② 사이트 등록하기

hongpage.kr

구글 사이트 등록하기 / 구글 서치콘솔 사용 방법 SEO

1. 구글 사이트 등록 전 - SEO 설정 구글 사이트 등록하기전에 홈페이지 사이에 메타태그를 적절히 넣어줘야한다. SEO 메타태그 관련한 자세한 내용은 아래 포스팅 참고 https://hongpage.kr/14 [네이버

hongpage.kr

[php] 입력 필드 쪼개기 (체크박스 값 DB 저장)

HHHONG — Wed, 18 Oct 2023 15:46:36 +0900

체크박스 또는 여러개의 입력필드 내용을 한 필드안에 저장해서 사용해야하는 경우가 있다.

아래와 같이하면 필드 하나에 데이터를 저장해 관리할 수 있다.

글쓰기 페이지 코드

'wr_1'라는 필드를 쪼개서 사용할 것이다.

값을 받을 체크박스 name은 임의로 관리하기 편한 이름으로 지정하면 된다. (type1~type4)

* wr_1 : 값을 저장할 필드 (type1~type4에서 받은 값을 wr_1에 한번에 저장한다)

* type1~type4 : 임의로 값을 받을 필드 (DB에 해당 필드 없음)

[코드 설명]

- 상단의 $wr1 = explode("|", $write['wr_1']); 와 체크박스 태그 안의 <?php if($wr1[0]){?>checked<?php } ?> 부분은 글쓰기 페이지를 수정 페이지로도 사용하는 경우에 필요하다. 해당 값이 있는 경우 체크되도록 하기 위한 것이다.

- explode로 쪼갠 값을 불러올때는 0부터 시작해야하는 것을 주의

<?php
$wr1 = explode("|", $write['wr_1']);  //수정할때 값을 불러오기 위한 코드
?>
<form name="fwrite" action="<?php echo $action_url ?>" method="post" enctype="multipart/form-data" autocomplete="off" style="width:<?php echo $width; ?>">

<!--체크박스-->
<input type="checkbox" name="type1" id="type1" value="타입1" <?php if($wr1[0]){?>checked<?php } ?>><label for="type1">타입1</label>
<input type="checkbox" name="type2" id="type2" value="타입2" <?php if($wr1[1]){?>checked<?php } ?>><label for="type2">타입2</label>
<input type="checkbox" name="type3" id="type3" value="타입3" <?php if($wr1[2]){?>checked<?php } ?>><label for="type3">타입3</label>
<input type="checkbox" name="type4" id="type4" value="타입4" <?php if($wr1[3]){?>checked<?php } ?>><label for="type4">타입4</label>
<!--체크박스-->

<button type="submit">확인</button>

</form>

글등록 처리 페이지

$type1부터 $type4까지 체크박스의 값을 |을 구분지어 $wr_1으로 저장하여 wr_1필드 데이터로 넣는다.

<?php

$wr_1 = $type1."|".$type2."|".$type3."|".$type4;
$sql ="update {$write_table} set wr_1 = '{$wr_1}' where wr_id = '{$wr_id}' ";
sql_query($sql);

alert("정상적으로 접수되었습니다. 확인 후 메일로 회신 드리겠습니다.", "이동주소");

?>

뷰페이지

<?php echo $view['wr_1'];?>이런식으로 입력값을 그대로 가져오면 타입1|타입2|타입3|타입4 이런식으로 구분자가 함께 표시된다.

| 로 구분지어 저장했던 필드값을 explode 함수를 통해 쪼개서 불러온다.

글쓰기 페이지와 코드 구성은 비슷한데, 입력 받았던 체크박스 형태 그대로 체크한것만 표기해주려면 아래와 같이 체크박스 태그에 <?php if($wr1[0]){?>checked<?php } ?>를 넣어주면 된다.

<?php
$wr1 = explode("|", $view['wr_1']);
?>

<!--체크박스-->
<input type="checkbox" name="type1" id="type1" value="타입1" <?php if($wr1[0]){?>checked<?php } ?>><label for="type1">타입1</label>
<input type="checkbox" name="type2" id="type2" value="타입2" <?php if($wr1[1]){?>checked<?php } ?>><label for="type2">타입2</label>
<input type="checkbox" name="type3" id="type3" value="타입3" <?php if($wr1[2]){?>checked<?php } ?>><label for="type3">타입3</label>
<input type="checkbox" name="type4" id="type4" value="타입4" <?php if($wr1[3]){?>checked<?php } ?>><label for="type4">타입4</label>
<!--체크박스-->

또는 특정 값만 불러오려면 아래처럼 불러오는 것도 가능하다.

<?php if($wr1[0]){ echo $wr1[0]; }?>

그누보드나 영카트 등 php 기반 입력폼에서 유용하게 쓰일 듯하다.

explode함수 사용해서 입력된 값만 표기하는 것은 아래 포스팅 참고

[php] explode 배열 값 있는 것만 콤마로 구분해서 보여주기

체크박스를 통해서 값을 받고 | 를 구분자로 배열로 저장하는 작업을 했다. 값을 저장하는 것 까지는 문제가 없는데, 값이 있는 경우만 불러오고 콤마로 깔끔하게 보여주는 방법을 고민해보았다

hongpage.kr

썸네일

.htaccess 파일 이용하여 짧은 주소 만들기 / 리다이렉션

HHHONG — Wed, 27 Sep 2023 15:01:03 +0900

홈페이지에 대한 기본적인 설정을 할 때 유용하게 쓰이는 .htaccess 파일

이 파일에서 정의를 하면 긴 주소도 짧게 사용이 가능하다.

리다이렉션 기본 코드

에디터에 아래와 같이 작성 한 뒤, 서버 가장 상위 폴더에 업로드하면 된다.

RewriteEngine On
RewriteBase /
RewriteRule 줄일주소 /기존주소 [L]

한줄한줄씩 해석을 해보자면 아래와 같다.

RewriteEngine On   <=== Rewrite를 사용하겠다.
RewriteBase /  <==== .htaccess파일이 있는 위치
RewriteRule   <===== Rule 입력

RewriteRule 작성 예시

아래와 같이 줄일 주소 부분에 notice를 적고 기존 주소를 적으면 된다.

site.com/notice로 접속시 site.com/bbs/board.php?bo_table=notice 페이지가 보여지게 된다.

RewriteRule notice /bbs/board.php?bo_table=notice [L]

변수에 따라 다르게 이동 하는 것도 가능한데,

(.*)에 들어온 값을 $1에 넣어 이동시킬 수 있다.

site.com/notice/5 접속시, site.com/bbs/board.php?bo_table=notice$wr_1=5페이지가 보여지게 된다.

RewriteRule notice/(.*) /bbs/board.php?bo_table=notice&wr_id=$1 [L]

주소창에 site.com/notice/5 와 같이 주소 입력을 하면, 기존 주소로 변경되지 않고 지정한 룰의 주소가 고정되어 보여진다.

[다른 도움이 될만한 글]

htaccess 파일을 이용하여 특정 아이피, 국가 차단하기

.htaccess 파일을 이용하여 특정 아이피, 국가 차단하기

홈페이지를 운영하다보면 트래픽이 초과 되는 경우가 종종 있는데 대부분 악의접인 접근, (로봇으로 추정되는) 불필요한 ip가 지속적으로 접속해 문제가 된 경우가 많다. 이 경우 .htaccess 파일을

hongpage.kr

[CSS] nth-child / n번째부터 n번째까지 CSS 변경

HHHONG — Wed, 27 Sep 2023 00:37:20 +0900

특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다.

3의 배수인 박스 배경 변경

.box:nth-child(3n){
    background:red
}

20번째 이후 모든 박스 배경 변경

/* 22번 부터 이후 모든 box 폰트색 변경 */
.box:nth-child(n+20) {
    background:red
}

1번째부터 5번째까지 박스 배경 변경

1번째부터 지정할때는 -n으로 시작하는 것 주의

.box:nth-child(-n+6) {
    background:red
}

15번째부터 20번째까지 박스 배경색 변경

.box:nth-child(n+15):nth-child(-n+20) {
    background:red
}

마지막에서 3번째 박스 변경

.box:nth-last-child(3) {
    background:red
}

마지막부터 홀수/짝수인 박스 배경색 변경

.box:nth-child(odd) { background:red } /*홀수*/
.box:nth-child(even) { background:red } /*짝수*/

[그누보드] 게시판 뷰페이지 이미지 클릭시 새창 뜨지 않게 하기 (view.skin.php)

HHHONG — Tue, 26 Sep 2023 15:11:30 +0900

1) /lib/thumbnail.lib.php 파일 $thumb_tag 부분 주석처리

// $img_tag에 editor 경로가 있으면 원본보기 링크 추가
    $img_tag = $matches[0][$i];
    if(strpos($img_tag, G5_DATA_DIR.'/'.G5_EDITOR_DIR) && preg_match("/\.({$config['cf_image_extension']})$/i", $filename)) {
        $imgurl = str_replace(G5_URL, "", $src);
        //$thumb_tag = '<a href="'.G5_BBS_URL.'/view_image.php?fn='.urlencode($imgurl).'" target="_blank" class="view_image">'.$thumb_tag.'</a>';
}

2) /lib/common.lib.php 파일 $img 첫번째, 세번째 주석처리

if (preg_match("/\.({$config['cf_image_extension']})$/i", $file) && isset($board['bo_table'])) {
    $attr_href = run_replace('thumb_view_image_href', G5_BBS_URL.'/view_image.php?bo_table='.$board['bo_table'].'&amp;fn='.urlencode($file), $file, $board['bo_table'], $width, $height, $content);
   // $img = '<a href="'.$attr_href.'" target="_blank" class="view_image">';
    $img .= '<img src="'.G5_DATA_URL.'/file/'.$board['bo_table'].'/'.urlencode($file).'" alt="'.$content.'" '.$attr.'>';
   // $img .= '</a>';

[jQuery] 날짜선택 플러그인 DatePicker 옵션

HHHONG — Tue, 12 Sep 2023 23:27:41 +0900

날짜 선택 시 유용하게 사용 가능한 Jquery플러그인 Datepicker

https://jqueryui.com/datepicker/

Datepicker | jQuery UI

Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b

jqueryui.com

Datepicker 기본코드

DatePicker 기본 코드는 아래와 같다.

jquery코드 로드해주고, datepicker css파일, js파일을 넣어주면 된다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker">

<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>

Datepicker 옵션

Datepicker에는 다양한 옵션들이 있어서 필요한 경우 적용해서 사용하면 된다.

option	value	설명
minDate	-1Y : 일년전 -1M : 한달전 -1D : 하루전 0 : 오늘부터	최소로 가능한 선택 일자를 지정
max Date	0 : 오늘까지 +1D : 하루후 +1M : 한달후 +1Y : 일년후	최대로 가능한 선택 일자를 지정
changeYear	true, false	연도 변경 가능한 셀렉트박스 표시
changeMonth	true, false	월 변경 가능한 셀렉트 박스 표시 여부
dateFormat	yy-mm-dd	데이터 표시 형식 지정
showButtonPanel	true, false	오늘, 닫기 버튼 활성화 여부
yearRange	2010:2020 또는 c-10:c+10	연도 범위를 지정 * 2010:2020 => 2010년부터 2020년 까지 보여줌 * c-10:c+10 => 현재 연도로부터 10년전부터 10년후까지 보여줌
showWeek	true, false	주차 표시 여부
showButtonPanel	true	캘린더 하단에 버튼 패널을 표시한다.
stepMonths	3	next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가.
buttonImageOnly	true	버튼에 있는 이미지만 표시한다.
buttonImage	이미지경로	버튼이이미지
showOn	both	버튼과 텍스트 필드 모두 캘린더를 보여준다.
showAnim	show(기본), slide, fade in, blind, bounce, clip, drop fold, none	달력 창 나올 때 애니메이션을 적용
showMonthAfterYear	true, false	월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다.
numberOfMonths	[1,1]	한번에 얼마나 많은 월을 표시할것인가. 예) [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.

한글 표기 변경 옵션

option	value	설명
dayNamesMin	['월', '화', '수', '목', '금', '토', '일']	요일 한글로 변경
monthNamesShort	['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']	월 한글 변경
closeText	닫기	닫기 버튼 텍스트 변경
currentText	오늘	오늘 날짜로 이동하는 버튼 텍스트 변경
nextText	다음 달	next 버튼 텍스트
prevText	이전 달	prev 버튼 텍스트 변경

한글로 변경하는 것은 https://hongpage.kr/13 에 더 자세히 포스팅하였다.

옵션 적용 예시

 $("#datepicker").datepicker({ 
   minDate: "0",
   maxDate: "+1Y", 
 });

예시처럼 적용하면 오늘부터 1년 후의 범위 내에 있는 날짜만 선택이 가능하다.

audio/video 태그 다운로드, 재생속도 메뉴 없애기

HHHONG — Mon, 4 Sep 2023 11:51:56 +0900

audio태그를 이용해서 음악을 넣으면 아래처럼 ... 버튼을 누르면 다운로드, 재생속도를 조절할 수 있는 메뉴가 뜨게 된다. 이 메뉴가 뜨지 않게하려면 태그 사이에 controlsList="noplaybackrate nodownload nofullscreen"을 추가하면 된다.

noplaybackrate -> 재생속도 메뉴 안보이게

nodownload -> 다운로드 메뉴 안보이게

nofullscreen -> 영상의 경우 풀스크린 안되게

코드

<audio autoplay controls controlsList="noplaybackrate nodownload nofullscreen"><source src="song.mp3" type="audio/mpeg"></audio>
<video autoplay controls controlsList="noplaybackrate nodownload nofullscreen"><source src="video.mp4" type="video/mp4"></video>

[CSS] placeholder 글자색 변경

HHHONG — Thu, 31 Aug 2023 17:51:26 +0900

placeholder 글자색 변경하는 방법은 아주 간단! CSS 파일에 아래 코드를 추가하면 된다.

input::placeholder {color:#ccc;}
input::-webkit-input-placeholder {color:#ccc;}
input:-ms-input-placeholder {color:#ccc;}

textarea::placeholder {color:#ccc;}
textarea::-webkit-input-placeholder {color:#ccc;}
textarea:-ms-input-placeholder {color:#ccc;}

[영카트] 네이버페이 연동오류 (쿼리스트링 EC_MALL_PID 전송)

HHHONG — Thu, 24 Aug 2023 18:22:37 +0900

영카트 쇼핑몰은 네이버페이와 연동하는데 아래와 같은 메일을 받았다.

네이버쇼핑 입점이 완료되실 경우 네이버페이 연동 시 주문 등록 과정에서 쿼리 스트링 중 네이버쇼핑 상품ID(EC_MALL_PID) 항목을 전송해주셔야 합니다.
네이버쇼핑에 입점하시어 네이버 쇼핑 검색에 판매 상품을 노출하고 계시는 가맹점은 네이버페이를 연동할 때 관련된 정보(MAPID)를 함께 제공해주셔야 합니다.
EC_MALL_PID는 다른 상품 관련 정보들(ITEM_ID, ITEM_COUNT, ITEM_NAME... 등)에 1:1로 대응하여 보내주시면 되며, 해당 항목의 값은 네이버 쇼핑으로 송출중인 상품 ID(MAPID 또는 MALL PID) 값을 입력해주셔야 합니다.

이게 무슨말인가했는데 아래와 같이 간단히 한줄만 추가해주면 된다.

/lib/naverpay.lib.php 파일
$item .= '&ITEM_UPRICE='.$uprice; 아래에 $item .= '&EC_MALL_PID='.urlencode($it_id); 추가

$item .= '&ITEM_UPRICE='.$uprice;
$item .= '&EC_MALL_PID='.urlencode($it_id); // 추가

일러스트레이터 PDF 내보내기 이미지 고화질로 저장하기

HHHONG — Thu, 24 Aug 2023 18:04:02 +0900

일러스트레이터에서 PDF로 내보내기 하는 경우 이미지가 깨져보이는 경우가 있다.

이 경우 간단하게 설정만 바꾸면 고화질로 내보낼 수 있다.

1) 파일 > 내보내기 > 화면에 맞게 내보내기 클릭 후,

내보낼 대지를 선택한 다음 포맷을 PDF로 한 뒤, 바로 오른쪽 위쪽 톱니바퀴 아이콘을 클릭한다.

2) PDF를 선택 후, Adobe PDF 사전설정을 [고품질 인쇄]로 선택한다. 설정값 저장 후, PDF 내보내기하면 끝!

(물론 고품질 인쇄로 하면 PDF 용량이 배가 커지는 단점이 있긴하다.)

PDF [고품질 인쇄] 설정 전/후가 이렇게나 화질 차이가 난다. 꼭 [고품질 인쇄]로 설정하고 PDF로 내보내기!!!

PDF [고품질 인쇄] 설정 전/후

[jQUery/JS] 음악 비디오 재생/일시정지/음소거 버튼 만들기

HHHONG — Mon, 21 Aug 2023 18:05:21 +0900

1. audio 태그를 사용하여 배경음악 또는 비디오를 넣는다.

<audio id="player" controls autoplay src="bg.mp3" autoplay="autoplay"></audio>

2. 컨트롤 버튼

<a id="btn_player">click me</a>

3. 스크립트 삽입 (2번의 버튼을 클릭하면 재생/일시정지 번갈아 가면서 작동함)

var video = document.getElementById("player"); 
$("#btn_player").click(function(e){
    if(video.paused==true){
        video.play(); //재생
    }else{
        video.pause(); //일시정지
    }
});

video.addEventListener("ended", function(){
    //끝났을 때
});

개별버튼

재생, 일시정지, 음소거 각각 버튼을 넣고 싶을때는 아래 코드를 이용하면 된다.

<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>

무료 캘리그라피 손글씨 한글 폰트 다운로드

HHHONG — Tue, 1 Aug 2023 19:28:16 +0900

디자인하면서 간혹 캘리그라피 같은 손글씨 폰트가 필요할 때가 있는데 매번 찾기도 번거로워서 자주 사용하는 폰트들을 한번 정리해보고자한다. 손글씨체도 디자인에 다용도로 활용하기 어려운 애매한 폰트들이 많은데 이 폰트들은 깔끔하고 뭔가 프로페셔널해보이는 손글씨라 다용도로 활용하기 좋다. 더군다나 무료 사용이 가능하다는 점!

(다만, 자세한 허용범위는 각 홈페이지를 참고!)

1. 제주한라산

제주특별자치도의 상징성과 문화적 고유성을 살리고, 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체

■ 개인/기업/상업적인 용도 사용 가능

■ 다운로드 : https://jeju.go.kr/jeju/symbol/font/infor.htm

2. 상상토끼 꽃길

사방간데 넘실데는 꽃길처럼 비단색으로 물든 감성 캘리그라피 서체, 꽃길

■ 개인/기업/상업적인 용도 사용 가능

■ 다운로드 : https://sangsangfont.com/21/?idx=79

3. 포천막걸리체

■ 개인/기업/상업적인 용도 사용 가능, 변형 금지

■ 다운로드 : https://www.pocheon.go.kr/www/contents.do?key=5582

4. 대한민국 독도

■ 개인/300인 미만 기업 사용 가능

■ 다운로드 : 폰코자기 프로그램 다운로드 후 자동 설치 https://font.co.kr/cs/app

[그누보드/영카트] 아이코드 SMS 문자 여러명한테 보내기

HHHONG — Mon, 17 Jul 2023 19:16:19 +0900

그누보드 SMS 기본 코드

그누보드에서 SMS을 보내기 위해서는 기본적으로 아래 코드를 사용한다. 이 방식은 1개의 번호에서 1개로 보내는 방식이다.

  include_once(G5_LIB_PATH.'/icode.sms.lib.php'); 
  
  $sql = " select cf_phone from sms5_config";
  $row = sql_fetch($sql);

  $send_hp_mb = $row['cf_phone']; // 보내는 전화번호 
  $recv_hp_mb = "01000000000"; //  받는 전화번호
 
  $send_hp = str_replace("-","",$send_hp_mb); // - 제거 
  $recv_hp = str_replace("-","",$recv_hp_mb); // - 제거 
 
  $send_number = $send_hp; 
  $recv_number = $recv_hp;  
            
  $sms_content = "문자내용"; 
 
  $SMS = new SMS; // SMS 연결 
  $SMS->SMS_con($config['cf_icode_server_ip'], $config['cf_icode_id'], $config['cf_icode_pw'], $config['cf_icode_server_port']); 
  $SMS->Add($recv_number,$send_number, $config['cf_icode_id'], iconv("utf-8", "euc-kr", stripslashes($sms_content)), ""); 
  $SMS->Send();

* 자세한 내용은 아래 글에서

[개발/php] - [그누보드] 아이코드 SMS 문자보내기

[그누보드] 아이코드 SMS 문자보내기

글등록시, 회원가입 완료 시 등 여러 상황에서 활용 가능한 문자보내기 코드. 발신번호는 아이코드에서 미리 등록한 발신번호만 가능하고, 환경설정에서 문자 사용 체크되어있는지 꼭 확인 필

hongpage.kr

여러명한테 보내기

동시에 여러명에게 보내야하는 경우에는 아래와 같이 array()와 for문을 사용하여 번호 갯수대로 for문을 돌려줘야한다. 여러명에게 동일한 내용을 보내더라도, array()안에 들어가는 데이터 개수가 같아야한다. (orderformupdate.php 파일 참고)

아래 코드는 한번에 01000000000 번호로 $od_hp, $default['de_sms_hp'], 01012345678 번호로 서로 다른 내용으로 문자를 보내는 경우이다.

$sms_contents = array($default['de_sms_cont2'], $default['de_sms_cont3'], $default['de_sms_cont3']);
$recv_numbers = array($od_hp, $default['de_sms_hp'], '01012345678');
$send_numbers = array('01000000000', '01000000000', '01000000000');

$sms_count = 0;
$sms_messages = array();

for($s=0; $s<count($sms_contents); $s++) {

    $recv_number = preg_replace("/[^0-9]/", "", $recv_numbers[$s]);
    $send_number = preg_replace("/[^0-9]/", "", $send_numbers[$s]);

    $sms_content = $sms_contents[$s];

    $idx = 'de_sms_use'.($s + 2);

    if($default[$idx] && $recv_number) {
        $sms_messages[] = array('recv' => $recv_number, 'send' => $send_number, 'cont' => $sms_content);
        $sms_count++;
    } 
    
}

부트스트랩 모달창 검정 배경 아래로 뜰 때 해결 방법 (Bootstrap Modal)

HHHONG — Mon, 10 Jul 2023 15:54:52 +0900

버튼이나 다양한 요소를 클릭시에 모달창을 쉽게 뛰울 수 있어 활용도가 높은 부트스트랩 모달창

부트스트랩 공식 홈페이지에 나와 있는대로 부트스트랩 스크립트와 CSS만 로드하면 쉽게 모달창을 띄울 수있다.

https://getbootstrap.com/docs/4.0/components/modal/

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

getbootstrap.com

다만, 사용할 페이지 코드에 따라서 일부 변경이 필요한데 다른 CSS코드와 겹쳐서 종종 모달창이 백그라운드보다 아래쪽에 위치하는 경우가 생길 수 있다.

모달창이 backdrop보다 아래에 위치

해결방법1) CSS변경

bootstrap.min.css 파일 .modal-backdrop 부분에서 z-index를 찾아 숫자를 조정해준다. 기존에 설정되어있던 숫자보다 낮추어야하는데, 너무 낮추면 기존의 홈페이지에 있던 요소들이 더 위로갈수 있으니 적절히 조정해주어야한다.

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;  //숫자조정
  width: 100vw;
  height: 100vh;
  background-color: #000;
  max-width:100%;
}

해결방법2) 스크립트 수정

모달창에 appendTo('body') 를 추가하여 body태그에 붙어서 뜰 수 있도록 변경하면 된다.

$(document).ready(function() {              
             
    $('#Modal').on('show.bs.modal', function () {     
          var modal = $(this);
          modal.appendTo('body');
     });

        
});

해결방법3) 모달창 코드 순서 조정

위의 방법으로도 해결되지 않으면, 모달창 코드를 강제적으로 </body>태그 바로 위로 옮겨준다.

<!--modal-->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    (중략)
</div>


</body>
</html>

보통 이 3가지 방법중 하나로 해결이 된다.

혹시라도 이 3가지 방법중에 해결이 되지 않으면, 다른 코드들 중에 </div>가 제대로 닫히지 않은 코드가 있는지 살펴보아야한다.

[책리뷰] 모든 비즈니스는 브랜딩이다 - 브랜딩 마케팅 기본서 추천

HHHONG — Sun, 9 Jul 2023 23:06:14 +0900

책의 제목처럼 요즘 모든 일에 브랜딩이 필요함을 느끼고, 그 중요성을 느끼고 있다. 단순히 브랜딩이 디자인이 아니라는 것을 알고는 있었지만 어디부터 어떻게 시작해야할지 막막해서 읽게 된 책. 브랜딩의 컨셉 구축 부터 실제 소비자의 인식으로 이어지기까지의 모든 과정을 쉽게 이해할 수 있도록 쓰여있어 술술 읽기에 좋았다. 다양한 사례들이 있어서 이런 이론이 적용되었구나 무릎을 탁 치면서 재미있게 읽었다. 한번 읽고 100% 적용하기에는 어렵겠지만 조금씩 실제 비즈니스에 적용해보도록 해야겠다.

(다 읽은 날짜 2023년 7월 9일)

모든 비즈니스는 브랜딩이다 / 홍성태 지음

브랜드관리 = 컨셉을 관리하는 것

브랜드 컨셉의 7C	브랜드 체험의 7E
고객지향성 (Customer Orientation) 응축성 (Condensation) 창의성 (Creativity) 지속성 (Continuity) 조화성 (Combination) 일관성 (Consistency) 보완성 (Complementarity)	비본질적인 요소 (Extrinsic Elements) 감성 요소 (Emotion) 공감 요소 (Empathy) 심미적 요소 (Esthetics) 엔터테인먼트 요소 (Entertainment) 자아 요소 (Ego)

1장 업의 본질, 고객의 관점에서 바라보라. 고객지향성 (Customer Orientation)

사업의 본질을 제품의 관점 뿐만이 아니라 고객의 관점에서 봐야한다.

2장 응축해야 핵심이 보인다. 응축성 (Condensation)

머리속에 떠오른 제품의 특징이나 효익은 하나로 응축될 때 사람들의 마음을 파고들 정서적인 메타포가 된다.

3장 꽃은 보이지 않는 뿌리에서 생겨난다. 창의성 (Creativity)

4장 낙수가 바위를 뚫는다. 지속성 (Continuity)

5장 햄버거로 유인하고 콜라를 판다. 조화성 (Combination)

브랜드를 관리하는 가장 큰 이유는, 브랜드 가치를 높임으로써 동일한 브랜드를 공유하는 신제품의 성공확률을 높이려는 것이다. 이를 브랜드 확장 (brand extension)이라 한다. p.90
포트폴리오 균형 (수익성과 전시성 균형)을 잘 맞추어야한다.
전시성 - 수익성
전시성 높음 - 수익성 높음 => 판매용
전시성 높음 - 수익성 낮음 => 홍보용
전시성 낮음 - 수익성 높음 => 수익용
전시성 낮음-수익성 낮음 => 구색용
브랜드 확장에서 조심할 점은 간판 제품의 '컨셉'이 이미지로 전달되어야지 제품의 '형태'로 굳어지면 안된다는 점이다. p.97

6장 컨셉은 비즈니스의 정신적 나침반이다. 일관성 (Consistency)

뚜렷한 비전은 기업 구성원의 커뮤니케이션과 운영체계의 중심이 되고, 사기를 높일 뿐 아니라 행동에 일관성을 부여해 시너지 효과를 낸다. p.103

7장 확고한 컨셉이 주인의식을 낳는다. 보완성 (Complementarity)

주인의식을 가지고 구성원들끼리 서로 도와서 기업의 사업컨셉을 효과적으로 이루게 한다. 컨셉이 분명하지 않으면 구성원들이 주인의식을 가질 수 없고, 주인의식이 없는 구성원들과 기업경영을 해가는 것은 모래위에 집을 짓는 것과 마찬가지다. p.115

8장 꼭 필요한것만 사는 것은 아니다 (Extrinsic Marketing)

니즈(needs)는 기능적 필요(꼭 필요한 것), 원츠(wants)는 기능적 욕구(없어도 살수 있음)
니즈와 관련된 제품으로 받을 수 있는 가격에는 한계가 있으며, 새로운 수요를 창출하기도 어려움
욕구의 관점으로보면 블루오션
욕구의 종류
- 사회적 지위를 표현하려는 욕구
- 개성을 표현하려는 욕구
- 소속감을 느끼려는 욕구
- 자기만족의 욕구
- 기쁨을 주고 싶은 욕구

9장 머리가 아닌 마음에 호소하라 (Emotional Marketing)

어떤 제품을 좋아햐아할 이유를 찾아주는 것은 머리지만 정작 구매할 이유를 찾아주는 것은 마음.
팔정 마케팅
- 기쁨, 즐거움, 사랑, 욕구, 노여움, 슬픔, 미움, 두려움
- 포지셔닝에서 각각의 경쟁 브랜드가 어떠한 감정에 소구하고 있는지 구별
- 시장 세분화도 감정에 의거하여 다른 시각을 가질 수 있음
- 마케팅 활용에서는 어느감정이라도 활용 가치가 있음
- 팔정의 여러 감정요소를 짝지어 연결하면 무궁무진한 상상력과 창의력 발휘 가능

10장 화성에서 온 마케터, 금성에서온 고객 (Empathy Marketing)

동정(Sympathy) 공감(empathy)은 다름
공감의 역할
- 사람강의 매력을 높혀줌
- 사람들끼리 저서적으로 조율할 수 있게 해줌
- 라포르(rapport, 신뢰감) 조성
공감을 잘하기 위해서는 감지와 소통 두가지 능력이 필요.
공감의 4단계
1) 비언어적 주의 기울이기
2) 일차공감 - 상대의 말을 유추하지 않고 듣는대로 자연스레 따라가주는 것(트래킹)
3) 고도 공감 - 상대편의 입장보다 앞서서 공감해주는 것.
4) 직면
여성적 공감

11장 아름다움이 힘이니라 (Esthetics Marketing)

디자인은 어디에나 있으며, 이제는 모든 것이 디자인 된다. p.216
예술과 디자인의 차이
- 예술은 무한한 심미성 추구, 남들이 받아들이지 못하더라도 세상의 만물을 새롭게 보고 남달리 표현하려는데에 가치가 있음. 예술가의 스스로의 동기에 의해 작품을 만듦. 예술품의 주체는 예술을 창조하는 예술가.
- 디자인은 궁극적으로 경제적 목표를 달성해야함. 제품의 새로운 아이디어나 변화, 혁신을 가시화 하는 작업. 디자인은 사고의 영역.
디자인의 주체는 디자이너가 아니라 사용자
컨셉에 따라 디자인을 다르게 해야함 - 효능충족/긍지추구/경험유희

12장 호랑이는 가죽을 남기고 브랜드는 스토리를 남긴다 - 에피소드마케팅(Episode Marketing)

고객은 브랜드와 연관된 스토리가 있으면 단순히 인식(aware)하는게 아니라 갈망(aspire)하게 됩니다. 인식은 그저 기억되는 것이지만, 갈망은 찾게되는 것을 말합니다. p.247
에피소드를 활용한 마케팅
1) 화젯거리 제공
2) 기업에 관한 정보나 메세지를 좀더 재미있게 전달
3) 기업이 직접 만든 스토리뿐 아니라 사람들 사이에 떠돌아 다니는 이야기를 활용
귀인행동 : 행동의 원인을 찾아 그 이유를 귀속시킨다.
- 기업이 손해를 보면서라도 고객의 이등을 위해 말없이 행돈한 것으로 보여져야함.
- 이야기의 원천이 기업과 상관없는 제 3자면 더 좋음.
- 긍정적인 귀인을 유도하기 위해 스토리의 당사자가 나서지 않는 것이 좋음.
스토리마이닝(Story Mining) : 스토리가 될만한 소재를 찾는 과정

13장 고객과 희로애락을 함께하라 (Entertainment Marketing)

소비자를 글자 그대로 제품을 사용하는 사람(Consumer)으로 간주할것이 아니라, 재미있고 개성있는 삶을 살아가려는 한명의 인간(People)로 봐야함.
사람들마다 다양한 삶을 살 뿐 아니라, 그 방식또한 시시각각 변화합니다. 그러므로 타깃 고객의 VALS(Value and Life Style/가치관과 라이프스타일)를 추적하고 이를 업그레이드 하도록 제안하는 일이 마케팅의 핵심이 되고 있습니다. p272
결국 시장의 승자는 누가 소비자가 원하는 새롭고 활기찬 라이프스타일을 창출하느냐로 판가름날 것입니다. p.273

14장 브랜드에 인성을 불어넣어라. (EGO Marketing)

브랜드를 단순한 이름이 아니라 사람처럼 느끼도록 인성을 부여하고 상징화해야만, 사람들을 끌어당기는 요소가 될 수 있습니다. p.283
우리가 다른 사람의 내적성격을 있는 그대로 알지 못하듯이, 소비자들도 브랜드의 진정한 성격(Brand prsonality)을 모두 파악하지는 못합니다. 단지 기업이 소비자에게 전달한 이미지(brand persona)를 인식하고 그에 반응할뿐입니다. p.284
페르소나
1) 황제 페르소나
스스로의 문화와 이미지에 대한 흔들림 없는 믿음
업계에 두드러진 선두기업, 업계최초 신제품 만들었거나 새로운 시장 개척 최고의 품질과 적절한 가격을 갖췄다는 평 가지고 있음
다섯가지 페르소나 중에 가장 뚜렷, 다른사람들에게 거부감을 줄 가능성도 가장 높은 유형
ex) 벤츠, IBM, 코카콜라, 디즈니 등

2) 영웅페르소나
영웅 한사람의 토대로 만들어짐.
기업의 대표가 업계 최고의 실력자, 그 사람의 이름 자체가 사람들의 존경심을 불러일으키는 경우.
전문성 외에도 사람들이 좋아할만한 매력을 갖추어야함.
ex) 애플 스티븐잡스, 정주영 회장의 현대그룹, 이병철 회장의 삼성그룹

3) 전문가 페르소나
- 신뢰를 구축하기 위한 마케팅에 힘을 쏟음. 시장 전반에 대한 폭넓은 지식 가지고 있음.
- 업계 최고의 전문가 5인 꼽을 때 항상 포함.
- 스포트라이트를 받기는 하지만, 겸손한 자세

4) 친구 페르소나
- 최근 많은 경영자들과 정치인이 추구하는 페르소나. 정서적 반감을 극복할 수 있음.
- 소비자들에게 다가가는 매우 강력한 수단이지만 각별한 주의 필요 -> 진실하지 못한 가식적인 기업이라는 이미지를 줄 수 있음
- 사회적 책임을 다하는 인상을 주는 경우, 개방적인 기업문화, 경영진에 외향적인 성향을 지닌 사람들이 많이 포진된 경우, 기업의 사회적 가치를 중시하는 잠재고객이 많은 경우

5) 의인 페르소나
어떤 대의명분에 대해 신안심에 가까운 집착을 가지고 있어야함.
임직원들이 기업활동에 사명감 가지고 적극적으로 참여하려는 열정이 있어야함. 제품 및 서비스에 대한 절대적인 확신 필요. 시시각각 변하는 소비자들의 옥구를 간파하고 충족시키기 위해 노력.
ex) 애플 매킨토시 출시 광고

마케팅 전략의 핵심은 한마디로 '어떻게 차별성을 인정받느냐'. 그 차이는 실제적인 차이에 근거를 두지만, 결국 인식상의 차이라는 점을 간과해서는 안됨.
마케팅과 브랜딩이야 말로 사람들의 생활을 더욱 풍성하고 윤택하게 해줄 수 있는 소중한 경영활동. 마케터는 '소비자 행동론'의 끊임없는 연구자가 되어야한다.
사람들의 사람들에 의한, 사람들을 위한 브랜드라면 지상에서 결코 사라지지 않을 것입니다. (Brand of the people, by the people, for the people, shall not perish from the earth) - 링컨대통령의 게티즈버그 연설 중

[jQuery] 결과값 숫자로 보여주기 (숫자에 콤마 찍기)

HHHONG — Mon, 5 Jun 2023 23:44:39 +0900

jquery 로 특정 영역에 값을 보여줄 때, number_format()을 사용하면 자동으로 숫자에 콤마가 찍혀서 보이게 된다. 이때 숫자가 아닐 수도 있으므로 String으로 먼저 감싸준뒤, number_format()를 사용해서 사용하면 된다.

var final = Number(price1) + Number(price2) + Number(price3);

$('.total').text(number_format(String(final)));  // total 클래스를 가진 영역에 결과 값을 보여줌 250,000

[Sql/php] rownum 결과 값에서 몇번째 행인지 구하기

HHHONG — Wed, 31 May 2023 18:21:38 +0900

SQL 쿼리를 통해 데이터를 가져와서 해당 데이터가 몇번째에 위치해 있는지 구할때 ROWNUM 기능을 활용해 불러올 수 있다.

나의 경우에는 해당 날짜의 주문건을 불러와 주문번호 순서대로 1부터 차례대로 번호를 매기는 작업이 필요하여 아래와 같이 쿼리문을 작성하였다.

SELECT @ROWNUM: = @ROWNUM + 1 AS rownum, od_id
FROM table as a, ( SELECT @ROWNUM: = 0 ) r
WHERE od_invoice_time between '2023-05-31 00:00:00' and '2023-05-31 23:59:59'
ORDER BY od_id ASC

그러면 이렇게 조건에 해당하는 데이터들이 순서대로 번호가 매겨지게 된다.

이 중에서도 특정 데이터가 몇번째에 해당하는지 알고 싶으면 한번더 Select 구문을 사용하면 된다.

SELECT rownum from (기존 조건) t where 특정 데이터 조건

SELECT rownum
from
  (SELECT @ROWNUM: = @ROWNUM + 1 AS rownum, od_id
    FROM table as a,
      ( SELECT @ROWNUM: = 0 ) r
    WHERE od_invoice_time between '2023-05-31 00:00:00' and '2023-05-31 23:59:59'
    ORDER BY od_id ASC
) t
where od_id = '2023053112162567'

여기서 주의할 점은 from ( 조건문 ) 뒤에 꼭 Alias를 지정해주어야한다. (여기서는 임의로 t로 넣음) 넣지 않으면 My SQL에서는 무조건 Every derived table must have its own alias 에러가 뜬다. 알파벳 아무거나 넣으면 된다.

PHP에서는 아래와 같이 코드를 넣어주면, 특정 조건에 해당하는 데이터중 해당 데이터가 몇번째에 위치하고 있는지 알 수 있다.

for($i=1; $row=sql_fetch_array($result); $i++) {
    
    $sql_num = "SELECT rownum from (SELECT @ROWNUM := @ROWNUM + 1 AS rownum, od_id FROM table as a, (SELECT @ROWNUM:=0) r 
    WHERE od_invoice_time between '{$fr_date} 00:00:00' and '{$to_date} 23:59:59' ORDER BY od_id ASC) t where od_id = '{$row['od_id']}'";
    $res_num = sql_query($sql_num);
    $rm = sql_fetch_array($res_num);

    echo $rm['rownum'];  //25

}

(특정날짜에 해당하는 주문건 중에서, 주문번호를 오름차순으로 정렬하였을때 해당 주문번호를 가진 주문은 몇번째인가)

택배 배송조회 주소 URL 정리 / 배송추척

HHHONG — Fri, 26 May 2023 15:49:40 +0900

쇼핑몰을 제작하다보면 각 택배사별 배송을 조회할 수 있는 링크가 필요해서 정리해보았다.

송장번호라고 적힌 부분에 송장번호(숫자만)입력하면 된다.

생각보다 택배회사가 많아서 계속해서 업데이트될 예정.

국내 택배사

CJ대한통운

https://trace.cjlogistics.com/web/detail.jsp?slipno=송장번호

조금 더 깔끔한 버전▼

https://trace.cjlogistics.com/next/tracking.html?wblNo=송장번호

CJ로지스틱스

http://ex.korex.co.kr:7004/fis20/KIL_HttpCallExpTrackingInbound_Ctr.do?rqs_HAWB_NO=송장번호

우체국택배

https://service.epost.go.kr/trace.RetrieveDomRigiTraceList.comm?displayHeader=N&sid1=송장번호

한진택배

https://www.hanjin.com/kor/CMS/DeliveryMgr/WaybillResult.do?mCode=MN038&schLang=KR&wblnumText2=송장번호

롯데택배

https://www.lotteglogis.com/home/reservation/tracking/linkView?InvNo=송장번호

로젠택배

https://www.ilogen.com/m/personal/trace.pop/송장번호

GS편의점 택배 (CVS net)

https://www.cvsnet.co.kr/invoice/tracking.do?invoice_no=송장번호

CU편의점택배

https://www.cupost.co.kr/postbox/delivery/localResult.cupost?invoice_no=송장번호

경동택배

https://kdexp.com/service/delivery/etc/delivery.do?barcode=송장번호

대신택배

https://www.ds3211.co.kr/freight/internalFreightSearch.ht?billno=송장번호

합동택배

https://hdexp.co.kr/basic_delivery.hd?barcode=송장번호

건영택배

https://www.kunyoung.com/goods/goods_01.php?mulno=송장번호

천일택배

http://www.chunil.co.kr/HTrace/HTrace.jsp?transNo=송장번호

세방

https://delivery.sebang.com/sdelivery/guest/trace/trace.xhtml?DISPATCH_NOTE_NO=송장번호

한덱스

http://btob.e-handex.co.kr/work/app/tm/tmtr01/tmtr01_s4.jsp?IC_INV_NO=송장번호

굿투럭택배

http://www.goodstoluck.co.kr/tracking/tracking_popup.php?invc_no=송장번호

오늘회러쉬

https://rush.onul-hoi.com/order/tracking?trackingNumber=송장번호

한의사랑택배(HPL)

http://www.hanips.com/html/sub03_03_1.html?logicnum=송장번호

우리한방택배

http://www.realsystem.co.kr/wooritb/search/s_search.asp?f_slipno=송장번호

홈픽

https://www.homepick.com/tracking/송장번호

우리택배(케이호남)

http://honamlogis.co.kr/page/?pid=tracking_number&SLIP_BARCD=송장번호

대한한공

https://cargo.koreanair.com/ko/tracking?awbNO=송장번호

일양로지스

http://www.ilyanglogis.com/functionality/tracking_result.asp?hawb_no=송장번호

해외 택배사

EMS

https://service.epost.go.kr/trace.RetrieveEmsRigiTraceList.comm?POST_CODE=송장번호

FedEx

https://www.fedex.com/fedextrack/?trknbr=송장번호

LX판토스

http://www.epantos.com/ecp/web/pr/dt/popup/dlvChaseInqPopup.do?quickNo=송장번호

DHL

http://www.dhl.co.kr/ko/express/tracking.html?brand=DHL&AWB=송장번호

TNT Express

https://www.tnt.com/express/en_kr/site/shipping-tools/tracking.html?respCountry=kr&respLang=ko&searchType=CON&cons=송장번호

UPS Korea

https://www.ups.com/track?track=yes&loc=ko_kr&trackNums=송장번호

UPS

https://tools.usps.com/go/TrackConfirmAction?qtc_tLabels1=송장번호

i-Parcel

https://tracking.wweconomy.ups.com/Home/Index?trackingnumber=송장번호

GSI

http://www.gsiexpress.com/track_pop.php?track_type=ship_num&query_num=송장번호

SLX

http://slx.co.kr/delivery/delivery_number.php?param1=송장번호

홍페이지 HONGPAGE

카페24 DB 접속 방법 - phpMyAdmin 없이 HeidiSQL로 연결하기

✅ 왜 HeidiSQL인가?

HeidiSQL로 DB 접속하는 방법

HeidiSQL 설치 및 DB 접속 설정

마무리 및 팁

[보안SSL] http 또는 www 접속시 https로 강제 리다이렉트 시키기

AWS S3 무료 사용 방법 - 파일 업로드하기 (영상, 이미지)

AWS S3 란?

AWS S3 무료 이용하기

S3 버킷 생성하기

파일이 제대로 보이지 않는 경우

영카트 주문 내역 페이지에서 신용카드 결제 취소 가능하도록

shop/orderinqueryview.php 파일

mobile/shop/orderinquerycancel.php

bxslider 현재 슬라이드에 클래스 추가하기

php5.X -> php 8.X 로 버전 변경하면서 생기는 오류 해결 방법

[오류 1] Warning: Undefined array key

[오류 2] Deprecated: Optional parameter $skin_dir declared before required parameter $bo_table is implicitly treated as a required parameter in /evread/www/lib/latest.lib.php on line 7

[오류 3] htmlpurifier

[오류 4] Passing null to parameter #1

[오류 5] Warning: Undefined variable $000

[오류 6] Warning: Undefined array key

[오류 7] Fatal error: Array and string offset access syntax with curly braces is no longer supported

[오류 8] Fatal error: Uncaught TypeError

[오류 9] Warning: foreach() argument must be of type array|object,

[오류 10] Fatal error: Uncaught Error: Call to a member function prepare()

[php 에러] Call to undefined function create_function() 해결 방법

스크롤 애니메이션 효과 wow.js

설치방법

[에러] Uncaught TypeError: Cannot read properties of undefined (reading 'split')

해결방법

[CSS] grid item 크기 넘칠 때

카페24 쇼핑몰 캐싱 / 변경된 코드 바로 확인하는 방법

[CSS/jQuery] 크기가 다른 Grid item 자동 정렬 하기

Grid 기본코드

특정 칸만 크기 조절

해결방법 1. CSS로 조정하기

해결방법 2. jQuery로 조정하기

[jQuery] input 엔터 시 특정 함수 실행

[php] explode 배열 최소값, 최대값 구하기 min(), max()

explode 배열 최소값, 최대값 구하기

VS code / Visual Studio Code 불필요한 태그 삭제하기

정규 표현식 적용 전

태그 제거 방법

[php] 파일 업로드 기능 DB 저장 안될 때

[카페24] 상품 분류, 게시판 스킨별 스크립트, CSS 다르게 적용하기

상품 분류마다 다르게 보여주기

게시판마다 다르게 보여주기

[php] DB 텍스트 특수문자 (<, >, &, ", ' 등) 인식 / html 변환

htmlspecialchar()

사용예시

유튜브 영상, 쇼츠 화면 반응형 코드 iframe embed

적용전

반영형 영상

반응형 쇼츠

적용후

카페24 게시판 스킨 변경 시 링크 변수 변경

[예시] 게시판 목록 (list.html파일)

[그누보드/영카트] 글쓰기시 이모지 사용하기

자바스크립트 예약어

그누보드/영카트 사업자등록번호 인증 회원가입 및 관리 시스템 (휴·폐업자 가입 제한)

영카트 주문내역 이카운트용 엑셀 출력

소개

주요기능

영카트 주문 시 할인코드 할인기능 코드 생성

기능소개

" 쇼핑몰이 넘쳐나는 시대. 고객 마케팅이 참 중요해졌습니다. 할인코드 기능으로 사이트 유입율 & 주문율을 더 올려보세요!"

미리보기

[ 주요기능 ]

주의사항

데모 사이트

테스트 환경

그누보드 게시판 게시물 연도별로 보기

예시화면

코드 수정 방법

애드센스 수익금 지급 받기, 신한은행 수수료 줄이는 방법

신한은행 외환 송금 수수료

①중개수수료 $5 + ② 송금수수료 5,000원

① 중개 수수료 $5

" 쇼핑몰이 넘쳐나는 시대. 고객 마케팅이 참 중요해졌습니다.
할인코드 기능으로 사이트 유입율 & 주문율을 더 올려보세요!"