레이블이 개발인 게시물을 표시합니다. 모든 게시물 표시
레이블이 개발인 게시물을 표시합니다. 모든 게시물 표시

2015년 12월 18일 금요일

구글 분석기 - google analytics 에서 내 아이피 제외 설정

보다 정확한 분석량을 위해 구글 애널리틱스에서 내가 접속한 IP부분은 제외 하는 설정을 정리함.

내 블로그도 글치만 의뢰들어온 연동건도 요 부분 짚어서 알려줘야겠다 싶어서 포스팅 메모.


내 사이트 설정페이지에서

필터 > 필터추가로 이동한 다음

새필터만들기에서

이름 지정하고 > 필터유형에서 제외 > 해당 IP주소에서 유입된 트래픽 > 일치 설정후 
아래칸에 아이피 주소 적고 저장~ 끝.


다른 페이지도 동일 저장하려면
다시 새 필터 만들어줄 필요없이
필터추가 위 화면에서
기존필터 적용누르면
기존에 만든 필터 나오므로 그 필터 선택해서 지정해주면 된다.


2015년 7월 23일 목요일

[WP개발] 크롬에서 접속한 워드프레스 사이트가 갑자기 스타일 및 파일이 깨져보일때

내 맥 크롬에서 플젝연관된 특정 사이트가 갑자기 스타일이 깨진채로 보여서(이미지 포함) 확인해보았더니 이미지 경로나 다른 파일 참조 경로가 https로 자동으로 바뀌어있더라. 보안서버 설치도 안되어있는데.
그런데 재밌는건 사파리에선 잘된다는거...
다른사람 컴도 잘되고 모바일에서도 잘 나오고
공유기문젠가 하여 다른 와이파이로 접속해도 증상은 여전하고
바이러스 애드웨어 하나도 안잡히고
크롬 지웠다 깔아도 똑같고
시스템 clean같은거 해도 여전하고
그래서 chrome forum을 가서 봤더니


Site broken in Chrome (SSL issue) 
https://wordpress.org/support/topic/site-broken-in-chrome-ssl-issue/page/2

크롬업뎃이 되면서 wordpress에서 woocommerce계열은 다 https로 연결시켜버림.
여기는 우커머스를 설치하긴 했지만 결제모듈이 나중에 들어갈거라서 보안서버는 설치가 안되어있었던거고.

그래서 해당테마의 functions.php를 열어 아래와 같은 코드를 추가해주면 된다.
(강제로 https 비활성화)

$_SERVER['HTTPS'] = false;

이것때메 왜인가 하고 다 삭제하고 검사하고 쌩난리를 쳣네 ㅋㅋ 몇시간을 소비한것인가,,,

2015년 7월 22일 수요일

2015년 7월 19일 일요일

[CSS Tip] vertical alignment of div

1. center center align

.child-element {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: orange;
}

2. right center align


.child-element {
  position: relative;
  top: 50%;
  right:0;
  transform: translate(0%,-50%);
  background: orange;
}



+
-webkit-
-ms- prefixes

ref from http://joshbroton.com/absolute-positioning-and-horizontal-vertical-centering/


2015년 6월 9일 화요일

메르스 전파경로 시각화 - from KBS

HTML5 캔버스로 개발했네..

http://dj.kbs.co.kr/resources/2015-06-04/

뜯어봐봐야지.

그나저나 지역사회 전파는 오래지않아 일어날것 같네.

2015년 5월 8일 금요일

푸터등의 패밀리사이트 표기시, 셀렉박스 리스트 만드는방법

일반 기업 사이트 등에서 패밀리 사이트/연관 사이트 select해서 보여줄때 아래와 같이 처리한다. (일반 select태그를 써서 했더니 구글 크롬등에서는 팝업으로 인식해서 차단하더라;;;)

div로 영역잡고 li로 리스트 만들어서 마우스 클릭시 토글로 보이게/안보이게 처리한다.

예시 코드 (데모보기)

1. HTML선언
<div class="">
      <div class="">
            <div onclick="toggleItem();" style="cursor: pointer;" class="family_btn_wrap">
                <div class="family_btn">
                    계열사 바로가기
                </div>
            </div>
            <div class="family_list_wrap" id="families" style="display:none">
                <ul style="border:0; border-bottom:1px solid #808080; border-right:1px solid #808080; border-left:1px solid #808080;">
                    <li>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="http://www.google.com">사이트1(새창이동)</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="" href="http://www.cafe24.com">사이트2(같은창이동)</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="#">사이트3</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="#">사이트4</a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

2. javascript 함수 추가 (toggleItem)

function toggleItem() {
    if (document.getElementById("families").style.display == "" ) { document.getElementById("families").style.display="none";
   } else {
document.getElementById("families").style.display="";
   }
}

2015년 4월 21일 화요일

php를 사용 하여 특정 html 페이지를 긁어올때 방법.

* php를 사용 하여 특정 html 페이지를 긁어올때 아래의 세가지 케이스가 있다.

1. file_get_contents 함수 이용

아래의 코드를 삽입하여 확인 (특정 사이트의소스를 그대로 다 가져옴)
<? echo file_get_contents(http://www.google.com); ?>
이게 안되면.. 2번으로 (서버에 따라 막혀있을수 있음)

2. curl함수 이용 (fsocketopen을 이용하는 방법도 있다고 함.)

<?php
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, 'http://www.google.com');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$file_contents = curl_exec($ch);
echo $file_contents;
?> 

3. snoopy 라이브러리 사용

공개된 스누피 오픈소스를 이용하는 방법이다.
아래의 링크로 이동하여 다운받아 설치하여 사용한다.

http://sourceforge.net/projects/snoopy/?source=directory



* 참고 사이트 : http://phpinside.tistory.com/?page=4

2015년 4월 7일 화요일

meta tag / 메타태그 예시

<meta property="og:title" content="제목"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="콘텐츠 전체 url"/>
<meta property="og:image" content="썸네일 이미지"/>
<meta property="og:description" content="콘텐츠의 간략한 내용"/>
<meta property="og:article:thumbnailUrl" content="아이콘"/>
<meta property="og:article:author" content="출처"/>
<meta property="og:article:author:url" content="출처 경로"/>

2015년 4월 1일 수요일

[WP 팁/플러그인] Contact form 7 을 사용하여 메일 송수신이 잘 되지않을때

워드프레스의 Contact From 7을 사용중에
간혹 메일이 전송/수신이 되지 않는경우가 있다.

지금까지 찾아본 정리 팁은 다음과 같다.

1. Gmail  계정으로 연결한다.
구글 앱스 또는 쥐메일 계정으로 등록시켜 놓으면 좀 더 안정적인 메일전송을 기대해볼 수 있다.

다만 나의 경험상 메일 주소를 그대로 등록해놓았을때 배달이 안될 때가 있었는데
그때에는 환경설정에 들어가 미러링 처럼 정의된 또 다른 메일주소를 입력하니 정상적으로 동작하기도 하였었다.

그밖에 쥐메일/보안 관련 메일 전송시 Configure SMTP 플러그인을 사용하는 방법도 추천.

2. Gravity Forms, Ninja Forms 등의 플러그인도 유명하다고 한다.
나는 직접 설치해서 써보지 않아 자세한 설명은 생략.
- Ninja Forms : 바로가기 / 그나저나 내가 좋아하는 레드컬러에 반쯤 삐져나온 닌자 캐릭 귀엽...;
- Gravity Forms : 바로가기
- 두 플러그인에 대한 비교 페이지


3. 자신의 서버 호스팅의 환경/세팅과 연관되어있을수도 있으니 체크.

4. 그밖에 Contact From DB 플러그인 이용하여 사용자의 전송정보를 DB로 함께 보관할수도 있다.


[Web 팁] 웹사이트에서 유투브 동영상 화면을 모바일에 최적화되어 보이게 하기

웹사이트(일반, 워드프레스, 기타 블로그 등)에 유투브 재생화면을 삽입 시

보통 데스크탑 사이즈에서는 잘 보이는데 모바일에서 보았을때 화면이 아예 늘어나버려서 다른 내용과 영역이 틀어져보일때

아래와 같은 코드를 삽입하여 모바일화면에서도 최적화되어 보이게 처리한다.

<div class="video-container">
         <iframe src="유투브동영상주소" frameborder="0" width="560" height="315"></iframe>
</div>

의 형식으로 HTML편집기에 삽입


CSS는 아래와 같이 지정한다.
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.9QwuEd44.dpuf


이렇게 하면 화면사이즈에 따라 재생플레이어가 유동적으로 변화한다.

여기서 굵은 표시가 된 iframe태그는 유투브 플레이 화면에서 하단에 있는
공유 > 소스코드로 이동하여 보이는 코드를 복사후 교체하면 된다.


예시 페이지 : http://bigture.co.kr/?p=4348



* 참고 사이트 : http://avexdesigns.com/responsive-youtube-embed/

2015년 3월 24일 화요일

브라우저 크기에 따라 이미지 리사이징

모바일, 웹의 브라우저의 크기에 따라 유동적으로 삽입된 이미지가 함께 리사이징 되는 효과.
<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>  
<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div> 

여기서 58.536585%는 알아서. 나는 가로사이즈가 꽉 차있어야 하는 상황이었기때문에 100%으로 변경했다.


출처 : http://stackoverflow.com/questions/4572621/auto-image-resize-based-on-browser-window-dimensions

img태그 이미지 위에 또 이미지를 올릴때

아래와 같은 예시를 참고

<html>
<head>
<title>test</title>
<style type="text/css">
#chk {
position:absolute;
left:10;
top:10;
}
</style>
<script language="JavaScript">

</script>
</head>
<body>
<img src="http://dummyimage.com/600x400/a34653/342433"> <!-- bg 그림 //-->
  <div id="chk"><a href="#"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png"></a></div>  <!-- X 그림 //--> 

</body>
</html>

* 결과 보기 http://jsbin.com/qigikumipo

APM에서 웹페이지 상에 한글이 깨져보일때

한글 깨짐 문제

/etc/mysql/my.cnf 중 [client], [mysqld]에 default-character-set 값을 추가해줌

예를들어 데이터베이스의 인코딩으로 UTF-8을 쓴다고 하면 my.cnf 파일을 아래와 같이 수정해 준다.

[client]
default-character-set=utf8
[mysqld]
default-character-set=utf8

&

메모장에서 파일 저장시 반드시 uft-8 인코딩 으로 지정해주고 저장.


http://opentutorials.org/course/195/1361

2015년 3월 23일 월요일

.htaccess 파일을 이용하여 특정아이피만 접근허용 또는 접근 불허

서버상에서 루트 path에 .htaccess파일을 생성하여
아래와 같이 추가한다.

1. 특정 아이피/관리자만 볼수있도록 홈페이지 접근 제한
 - 특히 홈페이지를 잠시 닫아놓거나 오픈 이전에 특정몇명만 접근이 가능하도록 설정한다.

<Limit GET POST>
deny from all
allow from 아이피주소
allow from 아이피주소
:
</Limit>

2. 특정 아이피만 차단
 - 스팸성이 있는 접근을 차단하기 위해 해당 아이피만 접속이 안되도록 설정 할 수있다.

<Limit GET POST>
deny from 아이피주소
deny from 아이피주소
:
</Limit>

위와 같이 설정하면 차단된 아이피로 홈페이지 접근시 HTTP 403 접근권한 없음 페이지가 보인다.


2015년 3월 18일 수요일

AWS EC2에 RDS 디비 phpmyadmin 연동하기

링크 : http://ryusstory.tistory.com/293

을 바탕으로 설정하였다.

그래도 안되어서 몇시간 애먹었는데 이것저것 하다보니 결국 됐다

마지막에 고친것은 원래 phpmyadmin 깐 폴더명이 phpMyAdmin으로 돼있는데 잘 안돼서 저걸 다 소문자로 했더니.... 안되었다가 다시 원복하니까 드디어 페이지가 로딩되며 동작하였다.

그리고 접속 가능한 IP 주소 설정시, 편집기 열어 ip주소 넣어줄때 RDS 주소로 넣어줘야 한다. 나는 별 생각없이 EC2 고유 주소로 넣어줘서 안됐었다;

커맨드 창에서 파일 내용 찾기

예를들어 C:\ 내에 있는 파일 내용을 찾고싶다면

cmd 하고,


findstr /s "문자열" C:\ 

입력 한다.


리눅스 서버용량 체크


fdisk -l
현 서버 하드정보 및 파티션 내역


* df : 전체 파티션 기준

df -m   //  M 단위로 용량 확인
df -k    // K 단위로



* du : 현재 디렉토리 기준 (하위 폴더 포함) 파일용량 체크

du -h // K이상 계산하여 수치 용량 출력 (기호 출력)
du -m  // M단위 용량 수치 출력 (기호 출력X)
du -m > file.txt  //용량정보를 file.txt에 저장해라
du -sh // 토탈 수치만 보여줌

아파치 서버 재시작 하지않고 설정 적용하기

httpd 로 재시작 하려는 경우

/etc/init.d/httpd graceful 입력

-k 제외