IT/프로그래밍 21

HTML5와 시맨틱 태그

HTML5와 시맨틱 태그 HTML5의 문서 구조 HTML5에서는 문서 구조를 정의할 수 있는 새로운 요소들이 도입되어 태그만 보고도 쉽게 페이지 구조를 이해할 수 있다. 사람들이 소스를 쉽게 이해할 수 있도록 태그를 의미가 통하게, 즉 시맨틱(semantic, 의미가 통하는) 태그로 바뀐 겁니다. HTML5에서 새로 추가된 시맨틱 태그에 대해 알아보자.. -시맨틱 태그가 사용된 HTML5의 문서 구조 인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않다. 사이트의 제목과 로고, 검색 창 등이 있는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(contents) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보과 제작자 정보를 표시하는 푸..

IT/프로그래밍 2016.07.08

Node.js 설치 및 접속 실행하기

Node.js 설치 및 접속 실행 1. Node.js 란? 서버사이드 자바스크립트 기술로, 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 기존의 자바스크립트들은 전부 브라우저에서 실행하는 형태였지만 node.js 는 서버사이드에서 실행되는 자바스크립트이며 웹서버나 SMTP 서버 등과 같은 서버 프로그램을 작성할 수 있다. 2. node.js 플랫폼의 장점크롬 V8 엔진 사용 : node.js는 V8엔진 위에서 동작하는 프레임워크이다. 즉, 크롬 V8 엔진의 성능이 개선되고 업그레이드되면 Node.js 도 같이 성장한다는 말이다.비동기 방식 : 입출력이나 데이터베이스 쿼리 수행 및 라이브러리쪽까지 비동기 처리하며, 자바 보다는 느려도 적은 비용으로 중간 성능을 낼 수 있다.Jav..

IT/프로그래밍 2016.07.08

아톰(Atom) 에디터 사용법(Window 기준)

오늘은 Atom에디터에 대해 알아보겠습니다 구글에서 아톰 에디터를 검색하면 Atom의 공식사이트인 http://atom.io 가 나옵니다. 사이트를 들어가면 바로 Download Windows Installor 라고 적힌부분을 누르면 다운받을수 있습니다. Atom Editor를 실행하고 위에 보이는것처럼 File --> Settings를 누릅니다 그러면 다음과 같은 화면이 나옵니다. Packages를 들어가시면 현재 깔려있는 패키지들을 볼 수 있습니다. 다음 Install는 검색을 통해 유용한 패키지들을 다운 받을 수 있습니다. Atom을 사용하면서 유용한 패키지를 소개해드리겠습니다. linter - 자동으로 문법검사를 해줍니다. linter-htmlhint - html문법 검사를 해줍니다 linter-..

IT/프로그래밍 2016.07.07

jQuery 노드 다루기 - 4편

노드 삭제 오늘 공부할 내용은 노드의 삭제 입니다 노드 삭제 순서는 1. 제거할 노드 찾기 --> 2. 노드제거 이렇게 2가지 순서로 간단하게 노드를 삭제할 수 있습니다. 오늘의 주제 노드삭제에 대한 핵심 내용을 정리해 보겠습니다. 특정 노드 삭제 모든 자식 노드 삭제 □특정 노드 삭제 특정 노드를 삭제하고 싶은 경우 remove() 메서드를 사용합니다. 사용법 : $대상.remove() 예제를 통해 쉽게 알아 보겠습니다. Ex01 - 클릭한 노드를 삭제해 주세요. 왼쪽 사진을 보면 menu4가 삭제된 것을 확인할 수 있습니다. script에서 기준으로 잡은 노드는 사용자가 클릭한 태그이기 때문에 $("ul.menu li")를 클릭했을 경우 클릭 당한 $(this)가 remove()메서드를 통해 삭제가 ..

IT/프로그래밍 2016.07.06

jQuery 노드 다루기 - 3편

오늘 공부할 내용은 이미 만들어져 있는 노드를 특정 위치로 이동시키는 기능을 배워보겠습니다 노드 이동은 노드 추가와 동일한 append(), appendTo(), prepend(), prependTo(), insertBefore(), before(), insertAfter(), after()메서드를 이용합니다. 방법은 거의 동일합니다. 차이점이라면 메서드에 넘겨주는 매개 변수값이 신규 노드라면 추가가 되고 이미 존재하는 기존 노드라면 이동이 됩니다. 이번 노드 이동의 핵심 4가지 입니다. 첫 번째 노드로 이동 마지막 번째 노드로 이동 특정 노드의 이전 노드로 이동 특정 노드의 다음 노드로 이동 이번 노드 이동은 노드 생성 / 추가 에서 사용한 예제 그대로 사용하겠습니다. 첫 번째 자식 노드로 이동 기존 ..

IT/프로그래밍 2016.07.05