Web 프로그래밍

하루만에 끝내는 AngularJS

출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/ AngularJS 란? Angular는 자바스크립트로 만든 client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션(혹은 웹사이트) 개발의 정수이다. 그리고 모던 웹을 다루는 새로운 방법이자 HTML5가 가져올 미래를 위한 큰 발판이다. 이 글은 필자가 Angular를 경험해보며 알게 된 것들과 조언, 우수 사례를 바탕으로 작성해본 이름하여 하루만에 끝내는 Angular 강좌다. 용어 Angular는 새로 등장하는 용어와 “MVC로 […]

하루만에 끝내는 AngularJS 더 읽기"

HTML5-나무위키

원문 : https://namu.wiki/w/HTML5 1. 개요[편집] 2008년 1월부터 논의가 시작된 버전으로 2014년 10월 28일 확정된 HTML의 최신 표준이다. XHTML에서 다시 HTML로 회귀하게 되었다. 따라서 HTML5는 XHTML의 상위 버전이 아니라, HTML4.01의 상위 버전이다. 플래시나 실버라이트 등의 플러그인을 기반으로 하는 응용 프로그램에 대한 필요성을 줄이는 것에 초점을 맞추고 있다. 이러한 방향성 덕분에 한국에서는 웹표준에 대한 문제가 이슈로 떠오르면서 함께 주목을 받기도 하였다. 2014년 10월 28일, HTML5의 최종 권고안이 확정되어

HTML5-나무위키 더 읽기"

CSS 20가지 유용한 팁

출처 : http://cafe.naver.com/hacosa/19081 1.Use Reset.css   ff, ie 등 브라우져가 처리 하는 방법이 다릅니다. 동일하게 재설정 할 필요가 있습니다.   프레임워크가 사용하는 몇몇 reset.css 안내   야후 reset CSs : http://developer.yahoo.com/yui/reset/Eric Meyer’s CSS Reset : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/Tripoli : http://devkick.com/lab/tripoli/ 2. Use Shorthand CSS ( css 문장을 짧게 표시 )   .header {      background-color: #fff;      background-image: url(image.gif);      background-repeat: no-repeat;      background-position: top left;     }   위 css 를  아래처럼 변경 할 수 있습니다. .header

CSS 20가지 유용한 팁 더 읽기"

[CSS] 자주쓰는 속성 요약 정리

출처 : http://durst.tistory.com/94 ■ Box Model width (너비) width: 250px; height (높이) height: 100px; border (경계선) border: 5px solid #6374AB; border: 5px solid gray; margin 방법1)    margin : 10px  20px  30px  40px ;    (상/ 우/ 하/ 좌) 방법2)    margin : 10px  20px ;    (상=하/ 우=좌) 방법3)    margin : 10px ;        (상=우=하=좌) 방법4)   

[CSS] 자주쓰는 속성 요약 정리 더 읽기"

CSS 선택자(Selector)와 우선 순위

출처 : http://circlash.tistory.com/570 선택자란 CSS에서 스타일을 적용할 대상을 정의하는 기능을 한다. CSS의 세부 스타일 적용에 대해 알고 있어도 선택자를 알지 못하면 내가 원하는 부분에 스타일을 적용할 수 없다. 그러나 많이 사용되는 몇 가지만 기억하면 간단하게 사용할 수 있다. 기본적인 스타일 지정 방법은 다음과 같다. [태그나 class, id 이름=선택자] {속성:값} 1. 선택자 종류 선택자는 크게 다음과 같이

CSS 선택자(Selector)와 우선 순위 더 읽기"

HTML5, CSS 스터디 링크

http://kiara77.tistory.com/176 http://xeguidebook.com/Html5_css3 HTML5 시리즈 강좌 리스트[HTML5강좌] 1. HTML5 개요[HTML5강좌] 2. HTML4 vs HTML5 (1)[HTML5강좌] 3. HTML4 vs HTML5 (2)[HTML5강좌] 4. Sementic Element (1)[HTML5강좌] 5. Sementic Element (2)[HTML5강좌] 6. Strong Web Form[HTML5강좌] 7. Rich Text Edit API[HTML5강좌] 8. Video Element[HTML5강좌] 9. Audio Element[HTML5강좌] 10. Canvas Element[HTML5강좌] 11. Drag & Drop API[HTML5강좌] 12. Offline Web Application[HTML5강좌] 13.

HTML5, CSS 스터디 링크 더 읽기"

HTML5 태그 일람표

출처 : http://xeguidebook.com/Html5_css3/1006 ■ HTML5에 새로 추가된 태그와 삭제된 태그 태그 속성 설명 버전 <!– –> – 주석 comment    4 / 5 <DOCTYPE> – 문서 형식 docment type 4 / 5 <a>   href=”URL” hreflang name=”이름” media ping rel taget=”_blank” , “_parent” , “_self” “_top” type 하이퍼링크  hyperlink 하이퍼링크로 호출되는 파일 경로   중간 부분을

HTML5 태그 일람표 더 읽기"

CSS3 요약 정리

출처 : http://trendition.tistory.com/ (웹표준가이드) nth-child div p:nth-child(n) :  div 요소안에서 n번째 자식 요소인 p요소에 스타일 적용   div p:nth-child(odd), div p:nth-child(2n+1) :  홀수번째 자식 요소 div p:nth-child(even), div p:nth-child(2n) :   짝수번째 자식 요소   div p:first-child: 첫번째 자식요소 div p:last-child: 마지막 자식요소            속성 셀렉터 Selector [attribute^=value] :  속성이 value 로 시작하는 항목 Selector [attribute$=value] :  속성이 value 로 끝나는 항목  Selector [attribute*=value] :  value 가 포함되는 항목   

CSS3 요약 정리 더 읽기"

검색엔진 sphinx 사용방법

소개 MySQL에서 데이터 검색시 데이터가 많은 경우 자료를 검색하는데 소모되는 시간이 크다. MySQL의 데이터를 별도의 검색엔진이 인덱싱하여 인덱싱을 검색함으로서 시간 소모를 줄일 수 있다. 여기서는 오픈소스 프로그램인 Sphinx 검색 엔진을 도입해보고, Sphinx 검색엔진과 MySQL, 그리고 PHP와 함께 사용해도록 한다. 설치 환경 OS : Debian 7 64Bit S/W : MySQL : 5.6.11 / PHP 5.4.4-14 설치할

검색엔진 sphinx 사용방법 더 읽기"

타이머 표시 예제

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head>    <meta content=”text/html; charset=EUC-KR” http-equiv=”content-type”>    <title>TEST</title></head> <body>    <div>남은시간:</div>    <div id=”timer_msg”></div></body></html> <script language=”javascript”>    <!–    /* lifetime을 수정하여 최초 남은시간을 정의 */    var lifetime = 60;    var hour, min, sec;     /* 초단위 시간을 시/분/초로 분리하여 계산 */    function calc_time() {        hour = Math.floor(lifetime / 3600);        min = Math.floor(lifetime / 60

타이머 표시 예제 더 읽기"

개발자를 위한 FireFox 설치 후 필수 추가도구

1. Firebug 제작자 : Joe Hewitt, Jan Odvarko, robcee, FirebugWorkingGroup 파이어버그(FireBug)는 파이어폭스 확장 모듈로 jQuery개발에 꼭 필요한 도구이다. https://getfirebug.com/ 2. Web Developer 제작자 : Chris Pederick 파이어버그의 DOM 인스펙터 기능뿐만 아니라, 쿠키 조작, 폼 상세검사, 페이지 크기 조정 등 다양한 작업들을 지원하는 도구들을 포함하고 있다. 이 툴바를 사용하여 손쉽게 자바스크립트를 비활성화시켜, 사용자 브라우저가 자바스크립트를 지원하지

개발자를 위한 FireFox 설치 후 필수 추가도구 더 읽기"

tomcat+mysql 설치

1. JDK를 설치한다. 2. PATH에 C:\Program Files\Java\jdk1.6.0_12\bin 을 추가한다. 3. CLASSPATH=C:\Program Files\Java\jdk1.6.0_12\lib\tools.jar 환경변수 추가 4. tomcat 설치 5. mysql 설치 6. mysql-connector-java-x.x.x-bin.jar 다운로드 7. mysql-connector-java-5.0.7-bin.jar -> c:\Program Files\Apache Software Foundation\Tomcat 5.5\common\lib\ 에 복사 8. Tomcat 5.5/conf/server.xml에서 <Service name=”Catalina”>~</Service>밑에 아래와 같이 호스트별로 추가시켜 준다.       <!– localhost 호스트 추가 (기본적으로 있음) –>     

tomcat+mysql 설치 더 읽기"

위로 스크롤