서브라임(Sublime Text 3) 에디터에서 EUC-KR 한글 인코딩 및 탭 인덴트 설정 방법입니다.

서브라임(Sublime Text 3) 에디터에서는 한글 인코딩 EUC-KR을 지원하지 않아서 패키지를 설치하여야 합니다.

ConvertToUTF8 설치

1. 메뉴 → Tools → Command Palette... (Ctrl + Shift + P)
2. package install 검색
3. ConvertToUTF8 검색 및 설치

EUC-KR 한글 인코딩

메뉴 → File → Set File Encoding to → Korean(EUC-KR) 선택
깨져 있던 한글이 정상적으로 보입니다.

탭(Tab) 인덴트(indent, 들여쓰기) 설정 방법

아톰과 서브라임을 같이 사용하고 있습니다.

아톰과 동일하게 탭을 넣었을 때 2개 간격만 들어가게 변경하는 방법입니다.
에디터 우측 하단을 보면 Tab Size: 4라고 표시된 곳을 마우스로 클릭합니다.
Tab Width: 2를 선택하면 동일하게 변경을 할 수 있습니다.

Microsoft Windows10(마이크로소프트 윈도우10)에서 유닉스, 리눅스처럼 Symbolic Link(심볼릭 링크, 바로가기) 

생성하는 방법입니다.

예전 윈도우 버전에서는 자체 기능이 없어서 별도 프로그램을 이용하여 만들었습니다.

하지만 Microsoft Windows10(마이크로소프트 윈도우10)에서는 파워쉘(PowerShell)을 이용하여 유닉스, 리눅스처럼 Symbolic Link(심볼릭 링크) 을 구성할 수 있습니다.

아래는 마이크로소프트(Microsoft) 사이트에서 발췌한 내용입니다.

심볼 링크는 다른 파일 시스템 개체를 가리키는 파일 시스템 개체입니다. 가리키는 개체를 대상 이라고 합니다. 사용자에 게 기호 링크가 투명 하 게 제공 됩니다. 링크는 일반 파일 또는 디렉터리로 표시 되며, 같은 방식으로 사용자 또는 응용 프로그램에 의해 처리 될 수 있습니다. 심볼 링크는 마이그레이션 및 UNIX 운영 체제와의 응용 프로그램 호환성에 도움이 되도록 설계 되었습니다. Microsoft는 UNIX 링크와 마찬가지로 함수에 대 한 심볼 링크를 구현 했습니다.

심볼릭링크 명령을 넣는 화면 열기

- 윈도우10 돋보기를 클릭 후 "powershell" 을 입력합니다.
- 관리자로 실행을 합니다.

심볼릭링크 만들기

명령어)
New-Item -ItemType SymbolicLink -Path "원하는 디렉토리" -Name "신규 이름" -Target "실제 디렉토리 위치"

예시)
New-Item -ItemType SymbolicLink -Path "C:\Users\USER\Google 드라이브\" -Name "회사" -Target "C:\Users\USER\OneDrive"

PHP에서 2차원(다차원) Array(배열)에 있는 값을 UNSET을 이용하여 삭제 후
array_values을 이용하여 배열의 인덱스를 재 정렬하는 방법입니다.

1. 2차원 배열을 for 반복문을 돌리면서 in_array를 이용하여 원하는 조건을 찾습니다.

2. 해당 조건에 맞는 배열값을 찾았을 때 그 인덱스(index) 정보를 저장을 합니다.

3. 삭제를 해야 하는 인덱스 정보를 이용하여 unset으로 해당 배열을 삭제합니다.
- 삭제를 하고 나면 인덱스 정보가 0, 1, 2, 3 에서 0, 2 만 남게 됩니다.
- 이 상태로 이 배열을 for 반복문을 돌리게 되면 0 인덱스 값은 가져 오지만 2의 인덱스는
  맞지가 않아서 가져 오지 못합니다.

4. array_values를 이용하여 인덱스 값을 재정렬합니다.
- 0, 2의 인덱스가 0,1로 바뀌게 됩니다.

$prd_list = array
(
    array
        (
            'company' => '가',
            'sale_yn' => '판매가능'
        ),
    array
        (
            'company' => '나',
            'sale_yn' => '판매중지'
        ),
    array
        (
            'company' => '다',
            'sale_yn' => '판매가능'
        ),
    array
        (
            'company' => '라',
            'sale_yn' => '판매중지'
        )

);

print_r2($prd_list);

for($i=0;$i<count($prd_list);$i++){

  if(in_array("판매중지", $prd_list[$i]) == true){
    $sale_end[] = $i;
  }
}

print_r2($sale_end);

for( $j=0; $j < count($sale_end); $j++ )
{
  unset($prd_list[$sale_end[$j]]);
}

print_r2($prd_list);

$prd_list = array_values($prd_list);
print_r2($prd_list);

in_array

(PHP 4, PHP 5, PHP 7)

in_array — Checks if a value exists in an array

Description ¶

in_array ( mixed $needle , array $haystack [, bool $strict = FALSE ] ) : bool

Searches for needle in haystack using loose comparison unless strict is set.

Parameters ¶

needle

The searched value.

Note:

If needle is a string, the comparison is done in a case-sensitive manner.

haystack

The array.

strict

If the third parameter strict is set to TRUE then the in_array() function will also check the types of the needle in the haystack.

Return Values ¶

Returns TRUE if needle is found in the array, FALSE otherwise.

Examples ¶

Example #1 in_array() example

$os = array("Mac", "NT", "Irix", "Linux");
if (in_array("Irix", $os)) {
echo "Got Irix";
}
if (in_array("mac", $os)) {
echo "Got mac";
}
?>

The second condition fails because in_array() is case-sensitive, so the program above will display:

Got Irix

Example #2 in_array() with strict example

$a = array('1.10', 12.4, 1.13);

if (in_array('12.4', $a, true)) {
echo "'12.4' found with strict check\n";
}

if (in_array(1.13, $a, true)) {
echo "1.13 found with strict check\n";
}
?>

The above example will output:

1.13 found with strict check

Example #3 in_array() with an array as needle

$a = array(array('p', 'h'), array('p', 'r'), 'o');

if (in_array(array('p', 'h'), $a)) {
echo "'ph' was found\n";
}

if (in_array(array('f', 'i'), $a)) {
echo "'fi' was found\n";
}

if (in_array('o', $a)) {
echo "'o' was found\n";
}
?>

The above example will output:

'ph' was found 'o' was found

HTML5, CSS 편집기 아톰(Atom)에서 Emmet을 이용한 A태그(Tag) 생성 방법입니다.

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 단축키

a[#].icon$>span{icon$} + TAB

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 생성

A태그 및 그 안의 SPAN 태그도 같이 한번에 생성하였습니다.

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 복사

생성된 태그에 뒤에 마우스를 놓고 Ctrl + Shift + D 를 통해서 줄 복사를 합니다.

HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 편집 및 완성

줄복사한 내용이 숫자들을 순서에 맞게 변경하여 완료합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  a[#].icon$>span{icon$}
  
  <a href="#" class="icon1"><span>icon1</span></a>
  <a href="#" class="icon2"><span>icon2</span></a>
  <a href="#" class="icon3"><span>icon3</span></a>
  <a href="#" class="icon4"><span>icon4</span></a>
  <a href="#" class="icon5"><span>icon5</span></a>

</body>
</html>

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

JavaScript(자바스크립트)에서 구분자를 이용하여 배열 만들기

// 구분자로 구성된 문자열
var str = "aa/bb/cc/dd/ee"; 

// 구분자(/)를 통해 나뉜 결과는 배열로 저장된다.
var arr = str.split("/");  

// 결과값 : ["aa", "bb", "cc", "dd", "ee"]
console.log(arr);

JavaScript(자바스크립트) 타입 변경하기(String, Number)

// 숫자를 스트링로 바꾸기
var tt = 2
console.log(typeof tt);    // Result : number
tt = String(tt);
console.log(typeof tt);    // Result : string

// 스트링을 숫자로 바꾸기
tt = "2"
console.log(typeof tt);    // Result : string
tt = Number(tt);
console.log(typeof tt);    // Result : number

Number 이외에 parseInt를 사용할 수 있습니다.
- Number는 문자열이 숫자가 아닌 경우 NaN으로 리턴을 합니다.
- parseInt는 문자열이 숫자로 시작하는 경우에는 숫자가 끝날때 까지만 형변환하여 리턴을 합니다.

var num = Number('1000달러');

console.log (num);
// 결과값 NaN

var num = parseInt('1000달러'); 

console.log (num);
// 결과값 1000

※ parseFloat() : 문자열을 실수로 바꿔줍니다.

tt = "2.1"

tt = parseFloat(tt);
console.log(tt);
// Result : 2.1

tt = parseInt(tt);
console.log(tt);             
// Result : 2

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

사이트를 운영하다 보면 별도의 디렉토리를 이용하여 서브 도메인을 구성한 후
해당 디렉토리로 접근 시 서브 도메인으로 리다이렉트(Redirect, 이동)해야 할 때가 있습니다.

이 때는 해당 디렉토리에서 .htaccess를 생성 후 아래와 같이 처리를 하게 되면
원하는 대로 페이지가 이동하게 됩니다.

RewriteEngine On

RewriteCond %{HTTP_HOST} ^domain.com [NC]
RewriteRule ^(.*)$ http://www.domain.com$1 [L,R=301]
RedirectMatch 301 ^/test/(.*)$ http://test.domain.com/$1

위와 같이 설정을 하였을 때의 결과는
http://www.domain.com/test 로 들어오게 되면 http://test.domain.com/로 바뀌게 됩니다. 

RewriteEngine On
RewriteEngine을 사용하는 것을 설정합니다.

HTTP_HOST
URL 에서 호스트 이름 부분이며 클라이언트가 보낸 HTTP 헤더중 Host: 헤더에 있는 값이 됩니다.
가상 호스트 기반 rewrite 규칙을 설정할 경우에 많이 사용됩니다.

NC
대소문자를 구분하지 않습니다.

R=301은 그 주소로 영구 이동하는 것입니다.
R=301로 기재를 하면 도메인 주소를 바꿨을 때에 검색 엔진이, 예전 주소를 바뀐 새 주소로 갱신하여 줍니다.

프로그램으로 리다이렉트를 할 수 있지만 이 경우 단순 페이지 이동이기 때문에 전체 URL변경은 할 수 없습니다.
하지만 .htaccess를 활용하게 되면 하위 주소까지 모두 도메인을 바꿀 수가 있습니다.

반응형 웹사이트, 모바일 최적화 점검을 하기 위해서는 다양한 모바일 기기가 필요합니다.
이 많은 기기를 확보하기는 어렵습니다.
이러한 어려움을 다음에서 웹사이트를 통하여 기기별 반응형 웹사이트, 모바일 최적화 점검을 할 수 있습니다.

다음 트로이(Daum Troy Labs) 찾기

다음 검색 사이트에서 "다음 트로이"로 검색을 합니다.

다음 트로이(Daum Troy Labs) 화면

왼쪽에서 원하시는 휴대폰을 선택 후 주소에 테스트할 주소를 넣게 되면 해당 사이트를 확인할 수 있습니다.

다음 트로이(Daum Troy Labs)에서 제공하는 기능입니다.

멀티스크린 모드

- 이제 여러개의 디바이스를 선택해서 비교해 볼 수 있습니다. 화면 왼쪽의 '멀티스크린 모드'를 켜고 원하는 디바이스들을 선택하세요.

테스트 환경 공유하기

- 현재 상태의 테스트 환경(디바이스들,URL)을 공유할 수 있는 URL을 확인하려면 화면 우측 상단의 버튼을 클릭하세요. 클라이언트들이 만족할 겁니다.

40개 이상의 인기있는 디바이스

- 삼성, LG, Apple, Google, 팬텍, HTC, Sony, 샤오미, 레노버, ZTE 등 전세계의 인기있는 모바일, 패블릿, 태블릿 모드가 준비되어 있습니다.

다음 트로이(Daum Troy Labs) 단점

- 실제 기기별 이미지 해상도를 구현하지는 못합니다.
- 하지만, 전체 화면 사이즈와 문제 여부를 점검하기에는 충분히 좋습니다.

티스토리 검색 엔진 최적화(search engine optimization, SEO)을 위해

Google Search Console, 네이버 웹마스터 도구, 다음 검색 등록, 줌(Zum) 검색 등록을 마쳤습니다.

티스토리 빙(Bing) 검색 엔진 최적화(search engine optimization, SEO)를 위한 웹마스터 도구 등록 방법입니다.

Bing 웹 마스터 도구 검색

검색 엔진에서 "Bing 웹 마스터 도구"로 검색을 합니다.

Bing 웹 마스터 도구 로그인

Microsoft, Google, Facebook 중 원하는 계정으로 로그인을 합니다.

Bing 웹 마스터 도구 사이트 등록

Bing 웹 마스터 도구를 등록하시는 분들은 Google Search Console에 이미 등록을 하였을 것입니다.
그럼 왼쪽의 사이트 추가를 하지 마시고 Google Search Console에서 가져 오기를 하세요.

Google Search Console에서 가져 오기

Google 로그인을 한 후 Google Search Console에서 원하는 사이트를 선택하세요.

Bing 웹 마스터 도구 사이트 등록 완료

Google 로그인만으로도 Google Search Console을 통해서 사이트 등록을 할 수 있습니다.
물론 사이트맵도 같이 등록이 됩니다.

2019/10/12 - [유용한 활용팁] - 티스토리 Meta Tag 플러그인으로 Goolge Search Console, 네이버 웹마스터 도구 등록하기

2019/10/13 - [유용한 활용팁] - 티스토리 다음 검색 엔진 최적화(search engine optimization, SEO)를 위한 Daum 검색 등록 방법

2019/10/30 - [유용한 활용팁] - 티스토리 줌(Zum) 검색 엔진 최적화(search engine optimization, SEO)를 위한 검색 등록 방법

2019/10/31 - [유용한 활용팁] - 티스토리 구글(Google), 네이버(Naver) 검색 엔진 최적화(search engine optimization, SEO)를 위한 사이트맵(sitemap.xml) 등록 방법