function clipboard(str){ 
    $('#clip_target').val(str); 
    $('#clip_target').select(); 
    try { 
        var successful = document.execCommand('copy');  
        alert('클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요.'); 
    } catch (err) { 
        alert('이 브라우저는 지원하지 않습니다.'); 
    }
}




버튼을 a 태그로 감싸고 a태그에 download를 붙여준다.
ex) <a href="이미지 경로" download><button>이미지 다운로드</button></a>

이렇게 해주면 어디서든 이미지가 다운로드 가능하다.

단, HTML5 이상의 버전에서만 사용이 가능하다.

'WEB > HTML' 카테고리의 다른 글

[HTML] META 태그  (0) 2021.11.29
[HTML] link 태그 사용법  (0) 2017.12.12
[HTML] 메타(meta) 태그  (0) 2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그)  (0) 2017.12.05
[HTML] class와 id의 정의  (0) 2017.12.05



서비스에서 전송하는 부분

Intent myFilteredResponse = new Intent("passData");
myFilteredResponse.putExtra("serviceData"msg);

넘겨 받는 부분

Intent intent = new Intent("passData");
String passData = intent.getStringExtra("serviceData");

하면 passData에 데이터가 들어가게 된다






코드 이그나이터 index.php 경로를 없앤 후에 경로 설정이다.

routes.php 파일을 열어주고
$route['default_controller'] = ''; 이 부분을 확장자를 제거한 원하는 컨트롤러 이름으로 설정하면 된다.

autoload.php 파일에 들어가서
$autoload['libraries'] = array('database'); 이렇게 넣어주고

database.php 파일에 들어가서 db 정보들을 변경해주면 된다.




서버에 execute로 데이터를 전송한 후에 리턴을 받고 싶은 경우가 있다.

그럴 경우에는 간단하게
urlConnect.execute().get();
뒤에 .get(); 을 써주면 된다.

그러면 오류가 뜨는데 그럴땐 Alt + Enter를 눌러서
try/catch 문을 자동으로 넣어주도록 한다.




script 불러오는 곳에 이렇게 불러와도 되고
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

js 파일을 직접 다운받아서 로컬에서 불러와도 된다.




html의 head 태그에 보면 link 태그가 많이 쓰인다는 걸 알수있다.

link를 간단하게 설명하면 말 그대로 '외부에 있는 문서를 연결해준다.' 라는 뜻이다.

link 태그의 사용법으로 기본적으로 <head></head> 사이에 사용해야한다.
중복된 link 태그 사용이 가능하고 <link></link> 형식이 아닌 <link /> 형식으로 닫는다.

rel 속성

이건 문서와 외부에서 불러올 연결관계를 설정하는 것이다.
<link rel="stylesheet"> 가 가장 기본적인데 이건 스타일 시트로써 이 문서를 불러오겠단 의미이다.

stylesheet : 스타일 시트로 연결 ( .css)
alternate : 문서 대안 ( 프린트나 번역 사이트 )로 연결
ex) <link rel="alternate" type="application/test+xml" href="/print/test">
author : 저작자로 연결
help : 도움말로 연결
license : 문서의 저작권 정보로 연결
search : 검색 도구로 연결

rel 속성들이다. 주로 높은 빈도로 사용되는 rel 속성은 stylesheet이다.
개인적으로 일반 적인 홈페이지를 만들때에는 다른 속성들은 별로, 거의 사용되지 않는다.

type 속성

type은 연결문서의 MIME 유형을 나타낸다.

css 파일일 경우 type="text/css"
js 파일일 경우 type="text/javascript"
xml 파일일 경우 type="application/txml"

주로 이렇게 3가지 속성이 많은 빈도를 차지하며, 더 MIME 유형을 보려면

https://www.sitepoint.com/mime-types-complete-list/

이 사이트를 참고 바란다.

href 속성

연결될 문서를 설정해주는 곳이다. 경로 설정에는 상대경로와 절대경로가 있다.

상대경로의 경우에는 현재 머물고 있는 페이지부터 시작해서 경로를 설정하는 방법이고,
절대경로의 경우에는 이 페이지를 가지고 있는 최상위 경로부터 시작해 설정하는 방법이다.

폴더의 위치가
/home/eeiim/common/css.css 에 css 파일이 있고
/home/eeiim/blog/style.html에 html 파일 있다고 가정한다면

style.html의 위치에서 상대 경로로 css파일을 불러오려면
href="../common/css.css"로 불러와야하는 것이고,
절대 경로로 불러오려면
href="/home/eeiim/common/css.css" 이렇게 사용하면 된다.

'WEB > HTML' 카테고리의 다른 글

[HTML] META 태그  (0) 2021.11.29
[HTML] 버튼 클릭으로 이미지 다운로드  (0) 2017.12.27
[HTML] 메타(meta) 태그  (0) 2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그)  (0) 2017.12.05
[HTML] class와 id의 정의  (0) 2017.12.05



시작하기 전에

PHP는 급격하게 성장하며 더 나은 프로그래밍 언어가 되고 있다. 보통 동적인 언어가 생겨나면 그 언어는 프로그래머가 거리낌없이 기업 애플리케이션을 만들 수 있도록 하기 위해 더 엄격해진다.

PHP의 경우 더 나은 PHP는 객체 지향 PHP를 의미한다. 이 뜻은 여러분이 더 많은 객체를 사용하고, 더 나은 코드 테스트를 할 수 있고, 재사용 가능한 컴포넌트를 작성하고, 일반적으로 여러분의 연봉이 오른다는 의미이다.

PDO를 사용하는 것은 객체지향과 재사용 가능한 애플리케이션의 데이터베이스 층을 만드는 첫단계이다. 이 문서의 나머지 부분에서 볼 내용과 같이 PDO로 객체지향 코드를 작성하는 것은 생각보다 더 간단하다.

PDO 존재를 확인하기

만일 여러분이 PHP 5.5.X나 그 이상을 사용한다면 이미 PDO를 포함하고 있을 확률이 있다. 확인하기 위하여 간단하게 리눅스, Mac OS X, 윈도우 명령 프롬프트에서 터미널을 열고 다음과 같은 명령어를 따라하라.

<?php phpinfo();?>
를 통해서 PDO를 검색해 PDO가 있는지 확인해본다.

PDO가 있을 경우에 이 부분은 건너 뛰어도 된다.

PDO가 없을경우에 설치를 진행해야하는데 진행 방법은 의외로 간단하다.

mysql로 접속해 
sudo yum --enablerepo=remi,remi-php56 install php-pdo
sudo yum --enablerepo=remi,remi-php56 install php-mysqlnd
를 차례대로 입력한다.


그다음 php.ini 파일에 접속을 하여서
;extension=php_pdo_mysql.dll의 ; 주석을 제거한다.

이제 사용환경 설정은 끝났으니 기본적인 연결을 알아보겠다.
PDO의 선언의 기본은 try catch 안에서 한다.


$db_info['host'] = 'localhost'; 
$db_info['database'] = 'database_name'; 
$db_info['user'] ='id'; 
$db_info['password'] = 'pw'; 

try{ 
    $con = new PDO('mysql:host='.$db_info['host'].';dbname='.$db_info['database'].';charset=utf8', 
                                  $db_info['user'], $db_info['password']); 
    $con->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
}catch(PDOException $e) { 
    echo $e->getMessage(); 
}

- PDO::ATTR_EMULATE_PREPARES : 이 속성은 Preppared Statement 를 데이터베이스가 지원 하지 않을 경우 에뮬레이션 하는 기능으로 false 를  지정하서 데이터베이스의 기능을 사용하도록 한다.

- PDO::ATTR_ERRMODE : 이 속성은 PDO 객체가 에러를 처리하는 방식을 결정한다. 


$query = "SELECT COUNT(*) AS cnt FROM member WHERE member_id = ?"; 
$result = $con->prepare($query); 
$result->execute(array($member_id)); 
$row = $result->fetchAll(PDO::FETCH_NUM);

인젝션 방어를 위해서 PDO에서는 placeholder를 사용하는데, 변수가 들어갈 곳에 ?를 넣는다.
그리고 스테이트먼트를 생성하고, 배열을 통해 변수 값을 ?에 순서에 맞게 집어넣는다.

PDO::FETCH_NUM : 숫자 인덱스 배열 반환
PDO::FETCH_ASSOC : 컬럼명이 키인 연관배열 반환
PDO::FETCH_BOTH : 위 두가지 모두
PDO::FETCH_OBJ : 컬럼명이 프로퍼티인 인명 객체 반환

변수가 없을경우에는
$query = "SELECT COUNT(*) AS cnt FROM member"; 
$result = $con->prepare($query); 
$result->execute(); 
$row = $result->fetchAll(PDO::FETCH_NUM);


이렇게 써도 무방하다.




html을 작성할때 많은 meta 태그가 사용된다.
특히 검색엔진에 등록할 때 meta 태그를 적어주면 검색에 관련된 키워드, 설명등등 용이하게 작용된다.

검색엔진에 등록할 경우

<meta name="keywords" content="웹 코딩의 기본" />
<meta name="description" content="웹의 관련된 코딩을 설명을 해주는 블로그" />
<meta name="author" content="이아임">

meta name="keywords" 같은 경우는 사용자가 검색했을 경우 이 키워드를 통해 검색이 된다.
meta name="description" 일 경우에는 그 키워드로 검색 후 이 사이트가 어떤 사이트 인지 설명을 적어주는 곳이다.
meta name="author" 일 경우에는 저작자의 표시다.

하지만 요새 사이트 같은 경우는 이 meta 태그를 악용하는 사례가 많기 때문에 전혀 다른 태그를 사용한다.
keywords 메타 태그는 무시하는 경우가 많지만 description과 author 메타 태그를 수집해서 검색에 반영하기 때문에 잘 작성해주는게 좋다.

description 메타 태그 내에 페이지 요약을 넣을 때 가급적 20단어를 넘지 않아야 한다.
검색 엔진은 description을 적당한 크기까지만 읽고 나머지는 임의로 무시하기 때문이다.

만약 지극히 개인적인 사이트이고, 사이트가 검색엔진에 노출되기를 원하지 않는다라고 한다면, robots 네임을 사용하면 되는데

<meta name="robots" content="index,follow" /> 
 - 모든 걸 허용
<meta name="robots" content="noindex,follow" /> 
 - 문서는 가져가지 않는 대신에 링크를 가져감
<meta name="robots" content="index,nofollow" /> 
 - 문서를 가져가는 대신에 링크를 가져가지 않음
<meta name="robots" content="noindex,nofollow" /> 
 - 문서와, 링크 둘가 가져가지 않음.


위에서 보면 대충은 이해가 될 것이다.
index의 경우 문서 허용, follow 일 경우 링크 허용이다.
index : 로봇이 문서 가져가기 허용
follow : 로봇이 링크 가져가기 허용
noindex : 로봇이 문서 가져가기 비허용
nofollow  : 로봇이 링크 가져가기 비허용

웹 주소가 바꼇을 경우에는 

<meta http-equiv="refresh" content="5; url=http://naver.com/
" />

처럼 5초후에 naver.com으로 넘어가줘라란 뜻이다.

글씨가 깨질경우 인코딩 변경
필자가 개발하는 환경은 UTF-8 환경이기 때문에 utf-8로 포맷을 맞춘것이다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

html5에서는 
<meta charset="utf-8"> 
로만 사용해도 된다.

원하는 입맛대로 뒤에 있는 charset을 바꿔주면 되겠다.
그리고 여기서 http-equiv가 있다.
서버가 클라이언트로부터 온 http request를 접수한 다음 http response를 다시 웹 브라우져로 보내준다. 
그 http response의 헤더를 각 html 문서 별로 따로 설정할 수 있는 것이 http-equiv 메타 태그라고 이해하면 된다.


http-equiv 속성의 경우

Content-Type, refresh, default-style

이 있는데 Content-Type의 경우 문자 포맷 설정을 할때 사용

refresh 같은 경우는 요즘 웹 표준에서 권장하지 않는 방식이다. 그러므로 잘 사용하지 않는다.

default-style 같은 경우는 선호하는 스타일 시트 선택이다.




일단
 https://developers.naver.com/apps/#/register

로 이동하여 API를 신청해준다.

그러면 아이디와 시크릿값을 받을 것이다.

PHP로 설명을 하겠다.
<?php
// 한글깨짐 방지
header("Content-Type: text/html; charset=UTF-8");
// 발급받은 클라이언트 아이디
client_id = "Client_ID";
// 발급받은 클라이언트 시크릿 값
$client_secret = "Client_Secret";
// 검색어 url 형식에 맞게 엔코딩
$encText = urlencode("검색어");
// JSON을 이용해서 검색
$url = "https://openapi.naver.com/v1/search/local.json?query=".$encText;
// XML을 이용해서 검색
$url = "https://openapi.naver.com/v1/search/local.xml?query=".$encText;

/*
블로그 검색 = "https://openapi.naver.com/v1/search/blog.json=".$encText;
뉴스 검색 = "https://openapi.naver.com/v1/search/news.json=".$encText;
책 검색 = "https://openapi.naver.com/v1/search/book.json=".$encText;
성인 검색어 판별 = "https://openapi.naver.com/v1/search/adult.json=".$encText;
백과사전 검색 = "https://openapi.naver.com/v1/search/encyc.json=".$encText;
영화 검색 = "https://openapi.naver.com/v1/search/movie.json=".$encText;
카페 검색 = "https://openapi.naver.com/v1/search/cafeatricle.json=".$encText;
지식인 검색 = "https://openapi.naver.com/v1/search/kin.json=".$encText;
지역 검색 = "https://openapi.naver.com/v1/search/local.json=".$encText;
오타변환 검색 = "https://openapi.naver.com/v1/search/errata.json=".$encText;
웹문서 검색 = "https://openapi.naver.com/v1/search/webkr.json=".$encText;
이미지 검색 = "https://openapi.naver.com/v1/search/image.json=".$encText;
쇼핑 검색 = "https://openapi.naver.com/v1/search/shop.json=".$encText;
전문자료 검색 = "https://openapi.naver.com/v1/search/doc.json=".$encText;

json 기반으로 작성됐으며 뒤에 .json을 .xml로 변경해주면 코드 그대로 변경사항 없이 사용가능하다.

*/

$is_post = false; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_POST, $is_post); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
$headers = array(); 
$headers[] = "X-Naver-Client-Id: ".$client_id; 
$headers[] = "X-Naver-Client-Secret: ".$client_secret; 
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
$response = curl_exec ($ch); 
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); 
echo "status_code:".$status_code."<br>"; 
curl_close ($ch);

if($status_code == 200) { 
    echo $response; 
} else { 
    echo "Error 내용:".$response; 
}



+ Recent posts