여기서는 간단하게 Let's Encrypt 를 이용하여 무료로 HTTPS 를 제공하는 튜토리얼을 진행해보겠습니다. - 무료로 Let's Encrypt 를 이용한 인증서를 만들고 적용 우선 이 문서는 영문 버전을 참고하여 작성한 문서이며 원본은 How To Secure Nginx with Let's Encrypt on Ubuntu 14.04 입니다. 기본적으로 원본 문서보다 설명이 적습니다. 자세한 사항은 원문을 찾아 보시기 바랍니다. 서버 셋팅환경은 Ubuntu NginX 입니다. 1. Let's Encrypt 설치하기 우선 필요한 것들을 설치 하도록 합니다. 이미 설치되어 있다면 굳이 설치 하지 않으셔도 됩니다. $sudo apt-get update $sudo apt-get install git bc ..
지난번에는 간단히 HTML 문서를 만들어 봤는대요. 이번에는 몇가지 태그에 대해 알아보고 사용해보겠습니다. 2015/09/14 - [웹 개발/HTML] - HTML 이란? 첫 HTML 문서 작성하기 우선 HTML 문서는 아래의 기본적인 규칙들을 따라 주셔야 합니다. 1. 문서의 처음은 로 정의해줄 것 ( 문서의 HTML 버전에 따라 다르지만 앞의 DOCTYPE html 는 HTML 5 임을 뜻합니다. ) 2. 문서는 의 안에 넣어 주도록합니다. 3. 사용자들이 보는 부분은 에 작성됩니다. 4. 아래는 최종 결과 예제 파일 입니다. 이제 간단히 태그와 코드를 보도록 하겠습니다. Heading Tag Paragraph Tags 위의 문서에 간단히 주석과 함께 문서를 만들어 봤습니다. * 주석이란? 주석은 개..
HTML 은 간단히 말하면 컨텐츠 제공자가 사용자에게 컨텐츠를 쉽고 편하게 보여 주기위한 일종의 문서 입니다. HTML 의 약자는 Hyper Text Markup Language 의 약자로 markup tag 로 이루어진 문서 입니다. Tag ( 태그 ) 는 HTML 문서를 구성하는 작은 단위로 태그라고 부릅니다. 일단 아래의 코드로 첫번째 문서를 만들고 설명 드리겠습니다. 나의 첫 HTML 문서 입니다! 이제 위의 코드를 아무 문서에 작성 후 파일 이름은 원하시는대로 하되 아래와 같이 확장자 명은 .html 로 해주시기 바랍니다. 문서 작성은 편하신 에디터 를 이용하시면 됩니다. 메모장으로도 가능합니다. 이제 이 파일을 웹 브라우져 (익스플로러, Chrome, firefox, safari )에서 열어 ..
Font Awsome 은 웹 페이지 개발시 이미지가 아닌 테그를 이용하여 아래와 같은 특수 문자를 쓸수 있도록 해줍니다. 등 사용전 알아두셔야할 것은 3.2.1 까지는 IE 8.x 등의 하위 버전을 지원하지만 4.3.0 과 같이 4.x 이상 버전에서는 저버전의 브라우저들을 지원하지 않으니 참고하시기 바랍니다. CDN 을 이용한 간단한 사용방법은 아래와 같이 버전별 URL 을 Head 사이에 넣으셔서 로드해주시고 Font Awsome 3.2.1 Font Awsome 4.3.0 아래와 같이 페이지의 문자표 테그를 참고하셔서 HTML 코드에 직접 사용하시면 됩니다. Font Awsome 3.2.1 아이콘 리스트 http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ ..
모바일 프로젝트를 핟보면 jQuery Mobile 에 있는 특정 기능만을 사용해야 할대가 있습니다. 예를 들어 swipeleft 와 같은 특정 모바일 이벤트들 을 말하는 것인대요. 기본적으로 jQuery Mobile 을 불러 올 경우 Document 를 jQuery Mobile 방식으로 변경합니다. 변경이 될 경우 뜻하지 않게 a tag 전체에 ajax 페이지 로딩 적용 및 페이지 하단에 Loading 요소가 생기는등의 작업이 진행 됩니다. 여기서 포스팅할 내용은 jQuery Mobile 에서 페이지 초기화를 간단한 스크립트로 막는 방법입니다. 우선 스크립트는 아래와 같습니다. $( document ).on( "mobileinit", function() { $.extend( $.mobile , { aut..
여기서는 NginX 에서 웹페이지에 비밀 번호 설정 및 페이지에 들어오는 ip 를 제한하는 방법을 알아 보겠습니다. 우선 IP 를 통해서 제한하는 방법 입니다. location / { allow 192.168.1.1/24; allow 127.0.0.1; deny 192.168.1.2; deny all; } 위의 설정대해 간단히 설명하자면 allow 192.168.1.1/24; - 192.168.1.1 ~ 24 까지 허용allow 127.0.0.1; - 127.0.0.1 허용deny 192.168.1.2; - 192.168.1.2 거부deny all; - 전체 거부 ip를 통한 접속 허용 및 거부는 꽤 단순합니다. 필요하실때 참고하시기 바랍니다. 두번째 방법은 Password 파일을 이용하여 비밀번호를 설..
Ubuntu 서버를 이용하여 NginX 와 PHP 를 연동하여 웹 서버를 구성하는 방법입니다. *예제는 쉽게 설치하기 위해 apt-get 을 이용합니다. 1. Ubuntu 패키지 저장소 업데이트 하기 우선 Ubuntu 의 패키지저장소를 최신으로 업데이트 하기 위해서 아래의 명령어로 python-software-properties 과 software-properties-common ( Ubuntu server 12.10 일 경우만 software-properties-common 을 설치 합니다. ) 을 설치해 주도록 합니다. sudo apt-get install python-software-properties sudo apt-get install software-properties-common ( 버전에 ..
trim 은 문자열 앞뒤의 공백을 제거하는 함수의 이름으로 자주 사용되는대요. 기본적인 Chrome 과 Firefox 에서는 문자열.trim() 으로 사용이 가능합니다. 하지만 앞의 방법은 ie7, 8 에서는 작동하는 않는 방법임으로 사용을 추천하지 않습니다. ( Javascript 에러 발생 ) jQuery 에서 사용하는 방법은 아래와 같습니다. var text = $.trim(문자열); 위와 같은 방법으로 사용하셔 주셔야 되는대요. 간혹 trim 의 사용방법이 비슷한 관계로 해깔려서 틀릴수도 있으니 참고 하시기 바랍니다. 문자열.trim() -> X : ie7, 8 및 일부 브라우저 작동 불가$.trim(문자열) -> O : jQuery 를 이용한 trim 임으로 대부분의 브라우저에서 작동 가능 ps..
Bootstrap 에서 사용하는 Mediaquery 의 사이즈 입니다. (v. 3.1.1) Media query 란 화면의 사이즈에 따라 Stylesheet 를 적용하는 방식으로 반응형 웹을 만들때 javascript 가 아닌 Stylesheet 를 이용하여 만들때 많이 사용합니다. /* 가장 작은 크기 */ @media(max-width:767px){ } /* 중간 1*/ @media(min-width:768px){ } /* 중간 2 */ @media(min-width:992px){ } /* 가장 큰 크기 */ @media(min-width:1200px){ } 위와 같은 코드를 에 넣어주시고 각 크기에 맞게 원하는 스타일을 넣어 주시면 됩니다.
요즘 웹작업을 하던 중 시안으로 나온 이미지에서 메뉴 버튼을 이미지로 뜯을까? 하다가 웹폰트인 나눔폰트를 사용해보았습니다. 결과는 만족스럽내요 :D 구글에서 나눔폰트를 찾는 방법은 Google Font 에서 Early Access 에서 찾으실수 있습니다. 링크 : http://www.google.com/fonts/earlyaccess 사용 방법은 nanum 폰트를 검색후 css 와 함께 font-family 를 css 에 적어주시면 됩니다. 아래는 예시 입니다. Nanum Brush Script (Korean)나눔 브러쉬 @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); 나눔 브러쉬 Nanum Gothic (Korean)..
jQuery 에서 색으로 어떤 액션을 구분하려고 할때 발생할수 있는 문제점으로 컬러를 가져 올때 jQuery 는 RGB로 가져오게 되어 있습니다. 이런 컬러를 흔히 사용하는 Hex 로 구분해 주는 함수 입니다. function rgb2hex(rgb) { if ( rgb.search("rgb") == -1 ) { return rgb; } else { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } } 사용 방..
jQueryMobile 에서 이벤트가 2번씩 발생할때가 있습니다. ( jQuery Mobile 의 페이지 관리 특성에 따라 특정 오브젝트에 이벤트가 중복해서 들어 갈수 있습니다. ) 개발 로직에 따라서 피해 갈수도 있지만 정말 ... 어쩔수 없는경우 중복 이벤트를 해결하는 방법으로 .off() 를 이용하실수 있습니다. 오브젝트에 이벤트를 연결하는 .bind 전에 ( 혹은 .click .mouseover 등등... ) .off 를 넣어 주실수 있습니다. 간단하게 보자면 $(".logo").bind("touchstart",function(){ if(btnStatus == 'true'){ var id = $.mobile.activePage.attr('id'); if(id != "MAIN"){ $(".uiBlo..
크로스도메인을 통한 데이터 전송은 자주 있는 방식인대요. jQuery 플러그인으로 GET과 Yahoo API를 이용한 플러그인이 있기는 하지만 간단한게 jQuery 의 기능만으로 구현하는 방법을 소개드리겠습니다. 우선 jQuery 의 코드 입니다. $.ajax({ crossDomain:true, type: "POST", url: "http://api.test.com/testapi/", data: {url:document.URL}, success: function(data){ log(data); } }); 위의 코드에서 주요하게 보실점은 바로 crossDomain:true 부분입니다. jQuery 에서 crossDomain 을 true로 설정하면서 크로스 도메인을 사용한다는 설정을 하게됩니다. 하지만 jQ..
jQuery 는 매우 사용하기 쉬운 인터페이스를 제공하면서 관련 플러그인 역시 만들기 쉽게 해놓은 javascript 프레임워크 입니다. 여기서는 간단하게 jQuery 의 플러그인을 만들어 보겠습니다. jQuery.fn.myPlugin = function() { // 플러그인 내용이 들어갈 곳 }; 위의 코드는 기초적인 myPlugin 이라는 이름으로 만든 플러그인 폼입니다. 하지만 역시 jQuery 에서는 $을 써주는게 더욱 자연스러워 보입니다. 위의 코드는 아래와 같이 수정할 수 있습니다. (function( $ ){ $.fn.myPlugin = function() { }; })( jQuery ); 에서는 바로 jQuery 로 이미 요소를 받아서 $ 으로 처리 하기 때문입니다. 또한 위의 함수에서 만..
처음 HTML 을 공부하실때 많이 궁금해 하시는 부분일것이 div 와 같은 박스 를 중앙으로 위치 시키는 것입니다. 아래와 같이 붉은 상자처럼 페이지의 중앙으로 위치시키는 방법인대요. 텍스트의 경우 text-align:center; 로 중앙으로 오지만 div 나 ul li 와 같은 경우 중앙에 위치하기 위해서는 div와 css 의 구조를 맞춰줘야 합니다. 우선 간단하게 예를 들어 보면 -HTML- 나는 중앙 상자 -CSS- #wrapper_element{ width:100%; height:450px; border:1px solid gray; } #element{ width:450px; height:450px; border:1px solid red; margin:0 auto 0; text-align:cen..
Ubuntu 에서 Apache, Mysql, PHP 를 간단하게 셋팅하는 방법입니다. 1. Apache2 설치하기 $ apt-get update $ apt-get install apache2 이제 ip를 학인 후 주소창에 ip를 써주시고 아래와 같은 창을 볼수 있으시면 정상적으로 설치 된것을 의미 합니다. 2. Mysql 설치 및 셋팅하기 $ sudo apt-get install mysql-server libapache2-mod-auth-mysql php5-mysql 혹시 Mysql 관련 보안 설정이 필요 하신분은 아래의 스크립트를 실행하여 보시기 바랍니다. 알아 두셔야 할 점은 기본설치시 아래의 보안 사항들은 거의 기본적으로 적용되어 있습니다. $ sudo mysql_install_db $ sudo /..
Ubuntu 14.04 에 Jetty 9 ( jetty 9.2.1) 을 설치하는 간단한 방법입니다. 기본적으로 root 로 진행하겠습니다. 1. apt 를 이용하여 JAVA 를 설치 합니다. $apt-get install openjdk-7-jdk 2. jetty 를 위해서 java 를 symlink 를 만들어 줍니다. $mkdir /usr/java $ln -s /usr/lib/jvm/java-7-openjdk-amd64 /usr/java/default 3. /opt 로 이동후 jetty 최신버전을 받아 주도록 합니다. $wget "http://eclipse.org/downloads/download.php?file=/jetty/9.2.1.v20140609/dist/jetty-distribution-9.2...
Ubuntu 에서 간단하게 apt를 이용하여 nginx 와 php를 설치하는 방법입니다.apt 를 이용함으로 기본적으로 root 사용자를 이용합니다. 1. nginx 설치 $apt-get install nginx 설치하셨다면 IP로 http 접속시 아래와 같은 화면을 보실수 있으실것입니다. nginx 의 버전 체크는 $nginx -v 로 확인하실수 있습니다. 2. php-fpm 설치하기 php 역시 빠르게 설치하기위해 apt-get install 을 이용하여 설치해 주도록합니다. $apt-get install php5-fpm 3. nginx 설정 및 php 연동하기 nginx 를 설정하여 php를 연결할 차례 입니다. 아래와 같이 /etc/nginx/sites-available/default 를 열어 수..
- Total
- Today
- Yesterday
- cocos2d-x
- php
- 개발
- Tutorialbook
- 에러
- 웹 개발
- Laravel
- Nodejs
- 웹 개발자
- Developer
- 우분투
- ubuntu
- SNS
- mac
- 웹 서버
- 서버
- 서버 개발
- JavaScript
- 튜토리얼북
- 게임 개발
- 설치
- html
- 게임
- it
- Database
- 인터넷
- 웹
- 맥
- 데이터베이스
- 개발자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |