시작 : https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML
디버깅: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
HTML5용 브라우저 점수확인하기 :
점수를 확인하고 싶은 브라우저를 켜고
http://html5test.com/ 로 들어가면 점수가 나온다.
350점 이상이면 HTML5를 사용하기 적합한 브라우저이다.
2016년 10월 14일 금요일
IDE - Komodo
Komodo
Komodo 공식사이트: http://komodoide.com/komodo-edit/메뉴얼: http://docs.komodoide.com/manual
다운로드 및 설치:
공식사이트에 들어가서, Komodo Edit을 다운로드 후 설치한다.
사용환경: 윈도우 7, Komodo-Edit-10.1.1-17414
장점:
- 무료
- Windows, Mac OS X, Linux 모두 사용가능
설정 (Preferences)
설치 하고 나면 첫 화면에 customize를 할 수 있는 화면이 뜬다.
테마 바꾸기 (Color Scheme): 화면 색상과 코드 색상을 고르는것. 나는 내가 좋아하는 Monokai로 바꿔줬다.
키조합 (Key Bindings): 단축키 설정이다. 나는 기본인 Legacy로 뒀다.
기본 브라우저 (Default Browser): 테스트시 사용할 브라우저 설정. System defined default browser 로 놔둠 (Chrome 사용중)
* Preferences > Web&Browser > Preview in Broswer을
Preview in external browser (specified above). 으로 선택해준다.
기본 설정은 mobile Web app development에 적합하지 않음
Next,
인덴트 간격 (Indentation Width): 기본 4인 간격보다 내가 좋아하는 2로 변경해줌.
Next & Finish
사용방법:
1. 새 프로젝트 만들기
New Project 클릭 > 프로젝트 저장할 위치 선택 > 저장 (자동으로 코모도프로젝트 확장자가 붙음)
2. 새 파일 만들기
New File from Template 클릭 > 원하는 template 선택 > filename 쓰고 > open클릭
예제) html문서 만들기
카테고리: Web 선택 > HTML5선택 > Filename: index.html 입력 > Open 클릭
3. 브라우저에서 미리보기 (Browser Preview)
2016년 7월 12일 화요일
javaScript - e.preventDefault();
javaScript - e.preventDefault();
사용하는 이유: #가 붙은 <a>태그 사용시, 최상단으로 이동함을 막아줌.
참고사이트: http://ismydream.tistory.com/98
소스코드 예제)
현재 브라우저와 구버전 IE 모두 사용하게 해줌
if (e.preventDefault){ //preventDefault가 작동하면,
e.preventDefault(); //그대로 사용하고
} else { // 작동 안하면,
e.returnValue = false; // 구 버전 IE용 코드를 사용해라
}
사용하는 이유: #가 붙은 <a>태그 사용시, 최상단으로 이동함을 막아줌.
참고사이트: http://ismydream.tistory.com/98
소스코드 예제)
현재 브라우저와 구버전 IE 모두 사용하게 해줌
if (e.preventDefault){ //preventDefault가 작동하면,
e.preventDefault(); //그대로 사용하고
} else { // 작동 안하면,
e.returnValue = false; // 구 버전 IE용 코드를 사용해라
}
2016년 7월 1일 금요일
2016년 6월 30일 목요일
WordPress + SASS + Grunt
WordPress
WampServer + WordPress + SASS + Grunt + git
작업환경: Win7, Wamp, Bracket
준비과정
<개발환경 준비물>
1. 로컬호스트 환경 (Wamp)
2. 워드프레스 (Underscores theme 사용)
3. 코드 에디터 (bracket)
4. 브라우저와 개발자툴
5. 버전 컨트롤 프로그램 (git)
순서
1. Ruby 설치 후 SASS 설치
2. Node.js 설치 후 Grunt.js 설치
3. WampServer 설치 (wamp서버 start 후 WordPress 설치하기)
- 설치버전: WAMPSERVER (32 BITS & PHP 5.5) 2.5
4. WordPress 설치 및 Theme 설정
5. Git 설정
6. grunt 설정
< SASS 설치하기>
- Sass를 설치하기 위해서는 Ruby가 필요하다.
1. 윈도우용 루비설치 (version: Ruby 2.3.0)
- 크롬에서 다운로드 하면 안될수도 있으므로 다른 브라우저에서 다운로드 하기
루비 공식 사이트: http://rubyinstaller.org/downloads/
*add Ruby executables to your PATH 꼭 선택해주기
-> pc 아무곳에서나 루비를 사용할 수 있도록 하기 위해서
*루비가 잘 설치 되었는지 확인방법:
실행(윈도우키+R) > cmd > ruby -v > 엔터 > 버전정보가 나오면 잘 설치한것
2. Sass 설치 (version: sass-3.4.22)
실행(윈도우키+R) > cmd > gem install sass > 엔터
추가 사이트:
prefix 확인: http://bourbon.io/
작동순서
.scss 작성 > SASS > .css로 변환> Autoprefixer > .css 완성
< Grunt.js 설치하기>
- Grunt.js 를 설치하기 위해서는 Node.js 가 필요하다.
1. Node.js 설치
2. Grunt.js 설치 (version: grunt-cli@1.2.0)
실행(윈도우키+R) > cmd > npm install -g grunt-cli > 엔터
* -g (global)를 쓰면,pc 아무곳에서나 grunt를 사용할 수 있다
< 로컬 호스트 환경 구축하기>
WampServer 사이트: http://www.wampserver.com/en/
Wamp설치
WAMPSERVER (32 BITS & PHP 5.6.15) 3
Apache : 2.4.17 MySQL : 5.7.9 PHP : 5.6.15
다운로드 > 실행 > 기본 브라우저와 코드에디터 설정 > Wamp 실행
*Wamp 실행중 에러 : code 740 error
해결: C:\wamp\wampmanager.exe 파일을 오른쪽 마우스눌러 관리자 권한으로 실행해주면 됨
< 워드프레스 설치 및 테마 설정 >
1. WordPress설치
<순서>
1. PHP Admin데이터 베이스 생성
2. WordPress 다운로드한 후 로컬 호스트에 압축 풀어 설치 후
어드민 계정 설정(http://localhost/프로젝트명/wp-admin/)
2. WordPress 테마 (Underscores) 설정
1. 테마를 만들기 위해, Theme Unit Test 더미 데이터 다운로드
다운로드: https://codex.wordpress.org/Theme_Unit_Test
참고사이트: http://triki.net/wordpress-theme-unit-test-sample-data-setup-151123
http://localhost/프로젝트명/wp-admin/import.php (Tools > Import) 에서
WordPress 선택 > 파일선택 (다운로드 파일) > 파일 업로드
-> visit site 해보면, 임의 글들이 작성되어 있는것을 확인 할 수 있다.
2. Theme 설치 -> Underscores
다운로드: http://underscores.me/
Advanced Options 누르고,
필드를 알맞게 입력후, _sassify!체크 박스 체크 후 Generate
파일이 다운로드 되면,
C:\wamp\www\프로젝트명\wp-content\themes
에다가 압축 풀어 넣어준 후,
http://localhost/프로젝트명/wp-admin/themes.php (Appearance > Themes)
에서 Activate 해주기.
< git 설정하기>
1.git bash 에서, C:\wamp\www\프로젝트명\wp-content\themes\underscoresass 으로 이동
2. git init
3. gitignore 파일 작성
* sass 와 grunt 사용할때는 아래 내용을 꼭 삽입해 주어야 한다.
node_modules .npm-degug.log tmp .sass-cache *.css.map
4. git폴더 안에 gitignore 파일 넣은 후 git add *
5. git commit -m "메세지"
< grunt 설정하기>
1. ctrl+r 에서 C:\wamp\www\프로젝트명\wp-content\themes\underscoresass 으로 이동
2. npm init
3. 설정
4. underscoresass 안에 package.json 생성됨 > 수정
5. 모듈 설치 (sass, watch, autoprefixeer)
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-autoprefixer --save-dev
WampServer + WordPress + SASS + Grunt + git
작업환경: Win7, Wamp, Bracket
준비과정
<개발환경 준비물>
1. 로컬호스트 환경 (Wamp)
2. 워드프레스 (Underscores theme 사용)
3. 코드 에디터 (bracket)
4. 브라우저와 개발자툴
5. 버전 컨트롤 프로그램 (git)
순서
1. Ruby 설치 후 SASS 설치
2. Node.js 설치 후 Grunt.js 설치
3. WampServer 설치 (wamp서버 start 후 WordPress 설치하기)
- 설치버전: WAMPSERVER (32 BITS & PHP 5.5) 2.5
4. WordPress 설치 및 Theme 설정
5. Git 설정
6. grunt 설정
< SASS 설치하기>
- Sass를 설치하기 위해서는 Ruby가 필요하다.
1. 윈도우용 루비설치 (version: Ruby 2.3.0)
- 크롬에서 다운로드 하면 안될수도 있으므로 다른 브라우저에서 다운로드 하기
루비 공식 사이트: http://rubyinstaller.org/downloads/
*add Ruby executables to your PATH 꼭 선택해주기
-> pc 아무곳에서나 루비를 사용할 수 있도록 하기 위해서
*루비가 잘 설치 되었는지 확인방법:
실행(윈도우키+R) > cmd > ruby -v > 엔터 > 버전정보가 나오면 잘 설치한것
2. Sass 설치 (version: sass-3.4.22)
실행(윈도우키+R) > cmd > gem install sass > 엔터
추가 사이트:
prefix 확인: http://bourbon.io/
작동순서
.scss 작성 > SASS > .css로 변환> Autoprefixer > .css 완성
< Grunt.js 설치하기>
- Grunt.js 를 설치하기 위해서는 Node.js 가 필요하다.
1. Node.js 설치
2. Grunt.js 설치 (version: grunt-cli@1.2.0)
실행(윈도우키+R) > cmd > npm install -g grunt-cli > 엔터
* -g (global)를 쓰면,pc 아무곳에서나 grunt를 사용할 수 있다
< 로컬 호스트 환경 구축하기>
WampServer 사이트: http://www.wampserver.com/en/
Wamp설치
WAMPSERVER (32 BITS & PHP 5.6.15) 3
Apache : 2.4.17 MySQL : 5.7.9 PHP : 5.6.15
다운로드 > 실행 > 기본 브라우저와 코드에디터 설정 > Wamp 실행
*Wamp 실행중 에러 : code 740 error
해결: C:\wamp\wampmanager.exe 파일을 오른쪽 마우스눌러 관리자 권한으로 실행해주면 됨
< 워드프레스 설치 및 테마 설정 >
1. WordPress설치
<순서>
1. PHP Admin데이터 베이스 생성
2. WordPress 다운로드한 후 로컬 호스트에 압축 풀어 설치 후
어드민 계정 설정(http://localhost/프로젝트명/wp-admin/)
2. WordPress 테마 (Underscores) 설정
1. 테마를 만들기 위해, Theme Unit Test 더미 데이터 다운로드
다운로드: https://codex.wordpress.org/Theme_Unit_Test
참고사이트: http://triki.net/wordpress-theme-unit-test-sample-data-setup-151123
http://localhost/프로젝트명/wp-admin/import.php (Tools > Import) 에서
WordPress 선택 > 파일선택 (다운로드 파일) > 파일 업로드
-> visit site 해보면, 임의 글들이 작성되어 있는것을 확인 할 수 있다.
2. Theme 설치 -> Underscores
다운로드: http://underscores.me/
Advanced Options 누르고,
필드를 알맞게 입력후, _sassify!체크 박스 체크 후 Generate
파일이 다운로드 되면,
C:\wamp\www\프로젝트명\wp-content\themes
에다가 압축 풀어 넣어준 후,
http://localhost/프로젝트명/wp-admin/themes.php (Appearance > Themes)
에서 Activate 해주기.
< git 설정하기>
1.git bash 에서, C:\wamp\www\프로젝트명\wp-content\themes\underscoresass 으로 이동
2. git init
3. gitignore 파일 작성
* sass 와 grunt 사용할때는 아래 내용을 꼭 삽입해 주어야 한다.
node_modules .npm-degug.log tmp .sass-cache *.css.map
4. git폴더 안에 gitignore 파일 넣은 후 git add *
5. git commit -m "메세지"
< grunt 설정하기>
1. ctrl+r 에서 C:\wamp\www\프로젝트명\wp-content\themes\underscoresass 으로 이동
2. npm init
3. 설정
4. underscoresass 안에 package.json 생성됨 > 수정
5. 모듈 설치 (sass, watch, autoprefixeer)
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-autoprefixer --save-dev
피드 구독하기:
글 (Atom)