프로그래밍/HTML5 Web
-
[HTML5] 벤더 프리픽스 제거 메서드 removePrefix() Method프로그래밍/HTML5 Web 2016. 7. 10. 16:05
현재 HTML5의 표준은 계속 제정중인데요. 확정된 기능이 아닐경우에는 벤더 프리픽스를 사용하여 범용성을 높여줍니다. 하지만 벤더 프리픽스가 바뀌었을 경우에를 대비해서 보완하는 코드를 작성합니다. removePrefix() 함수는 벤더 프리픽스를 제거합니다. 12345678910111213141516171819202122232425262728 removePrefix() //Set Variable var prefixes = ['webkit', 'ms', 'moz', 'o']; //Upper Function var capitalize = function (name) { return name.substr(0, 1).toUpperCase() + nmae.substr(1); }; //Remove Prefix fu..
-
[HTML5] 기본 기능과 벤더 프리픽스 제거프로그래밍/HTML5 Web 2016. 7. 9. 22:43
기존의 웹페이지는 document.getElementById() 메서드로 문서 객체를 선택하였으나 HTML5 부터는 document.querySelector로 문서 객체를 선택할수 있습니다. 12345678910111213141516171819202122 querySelector() Method window.addEventListener('load', function () { // Set Variable var header = document.querySelector('h1'); // Change style Properties header.style.color = 'white'; header.style.backgroundColor = 'black'; }); Header HeaderColored by Co..
-
MongoDB 데이터 검색, 정렬, 수정, 삭제기능으로 CRUD 앱 구현프로그래밍/HTML5 Web 2016. 7. 7. 17:52
본 게시글은 http://writingdeveloper.tistory.com/205 의 사전지식이 있어야 구현이 가능하므로 미숙한 부분에 대해선 링크를 참조하시길바랍니다. 데이터 검색데이터를 검색할때에는 find() 메서드를 이용하는데 find()메서드를 이용하면 데이터를 배열의 형태로 추출이 가능합니다. 원하는 속성을 추출하지 않고 싶을 때에는 find() 메서드의 두 번째 매개변수에 속성을 선택하고 불을 입력하면됩니다._id 속성을 false값으로 지정하였으므로 _id값을 출력하지 않습니다. 하지만 일반적으로 find()메서드를 사용할때 _id 속성은반드시 추출하므로 대부분 _id 속성이외의 속성에 true또는 false값을 입력하는데 true와 false중 하나만 사용해서 값을 추출하는것이 코드의 ..
-
MongoDB 기본 명령어와 조작법프로그래밍/HTML5 Web 2016. 7. 6. 15:53
이 강의는 기본적으로 컴퓨터에 MongoDB 서비스가 설치되어있다는 것을 전제로 진행합니다. 설치되어있지 않은 분들은 http://writingdeveloper.tistory.com/204 글을 참고하여 MongoDB를 설치한 후에 진행하시길 바랍니다. 기본 명령어MongoDB는 자바스크립트 코드를 이용하여 데이터베이스를 관리하므로 MongoDB는 모든 자바스크립트 코드를 입력 가능합니다. 예로 아래와 같은 코드의 사용이 가능합니다. 1273+52cs 당연히 결과값은 325가 나오겠지요. 또한 자바스크립트의 변수 선언문과 반복문도 그대로 사용가능합니다. 123456789var a=0;for(var i=0; i
-
Windows 운영체제에서 MongoDB 설치 및 세팅프로그래밍/HTML5 Web 2016. 7. 6. 14:57
MongoDB는 자바스크립트로 데이터를 관리하는 데이터베이스입니다. Node.js가 크롬의 V8 자바스크립트 엔진을 사용한것처럼 MongoDB도 V8 자바스크립트 엔진을 사용합니다. 설치 MongoDB 처음 시작하면서 애먹었던것이 설치방법입니다. Node.js 처럼 대충 next눌러서 설치하는것이 아니라 수동으로 뭔가 많이 해줘야하더군요. 설치 홈페이지부터 서적과 많이 달라져있던터라 꽤나 힘들었습니다. 서적에는 zip형식의 압축 파일 형식으로 되어있었지만 홈페이지에는 버전또한 1버전정도 올라갔고 MSI파일로 설치형식이 아예 변경이 되어있었습니다. 참고하실점은 최신 버전에서는 기본 설치 경로가 C 의 Program Files 안에 들어있다는 점입니다. 물론 CMD에서도 경로를 cd 명령어로 똑같이 잡아주어..
-
[HTML5 & CSS3] Chapter 2. HTML5 태그 기본프로그래밍/HTML5 Web 2014. 4. 8. 15:57
이 포스팅은 모던 웹 디자인을 위한 HTML5+CSS3 입문 (한빛미디어)의 내용을 요약한 것으로 저작권법상 소스코드는 기입하지 않습니다. 개인적인 공부를 위한 요약이므로 상세하게 공부하기 위해서는 여기를 눌러 책을 구입하는것을 추천드립니다. - HTML5의 페이지는 사용자에게 보이는 뷰와 사용자에 보이지 않는 코드로 나누어진다. - HTML5의 태그들에는 종류가 아주 다양하다. 외울 생각을 하지 말고 필요한게 있으면 그 요소가 떠오를 수 있을 정도의 공부만 필요하다. 또한 공부를 목적으로 최대한 빨리 정리하는것에 목표를 두고 있으므로 소스 코드 작성에 시간을 많이 투자 하지 않도록 하겠다. - 태그들은 여기를 눌러 생활코딩 홈페이지의 HTML사전을 참고하는것이 좋다.- 최근의 웹 개발도구에서는 자동 완..
-
[HTML5 & CSS3] Chapter 1. HTML5 개요프로그래밍/HTML5 Web 2014. 4. 8. 01:52
이 포스팅은 모던 웹 디자인을 위한 HTML5+CSS3 입문 (한빛미디어)의 내용을 요약한 것으로 저작권법상 소스코드는 기입하지 않습니다. 개인적인 공부를 위한 요약이므로 상세하게 공부하기 위해서는 여기를 눌러 책을 구입하는것을 추천드립니다. Chapter 1에 들어가기에 앞서 HTML5을 공부하는 것은 다음 세가지를 공부하겠다는 이야기입니다.1. HTML5 기본 태그2. CSS3 선택자 및 속성3. 자바스크립트 특히 이 책에서는 자바스크립트를 다루지 않으므로 자바스크립트 수업을 병행하는것을 추천드립니다.현재 진행하고 있는 페이스북 스터디 그룹(클릭하시면 연결됩니다)에 동참하여 다른 분들과 함께 자바스크립트를 공부하실수 있습니다. 또는 생활코딩 홈페이지에서 이고잉님께서 자바스크립트 강의를 제작중이십니다...