2016/08
-
아래와 같은 PTE 시험 관련한 여러 글을 작성했었고, 페이스북 그룹도 만들어서 PTE Academic 시험을 준비하시는 모든 분들에이 서로 공유할 수 있는 환경도 만들어 드리고자 하였으나 잘 되지 않더군요. 제가 해외 커뮤니티에서 많은 팁과 도움을 받아서 한국분들께도 도움을 드리고 싶었지만, 제가 PTE 시험 이야기를 나눴던 수백명의 분들 중 학원 수강을 하셨던 분들이나 과외를 받으셨다는 분들 이미 점수가 나오신 분들도 이미 공개된 제 팁과 의견을 받아가고 본인이 필요한 질문에 대한 답변만 받아갈 뿐, 본인이 가지고 있는 노하우는 다른분들을 위해서 아무것도 공유를 하지 않습니다. 그래서 50명이 넘어가던 페이스북 그룹은 폐쇄를 하였습니다. 그리고 추가로 네이버 쪽지, 페이스북 메시지, 비밀댓글 등으로 ..
PTE 시험 검색 후 오신 분들께 드리는 글아래와 같은 PTE 시험 관련한 여러 글을 작성했었고, 페이스북 그룹도 만들어서 PTE Academic 시험을 준비하시는 모든 분들에이 서로 공유할 수 있는 환경도 만들어 드리고자 하였으나 잘 되지 않더군요. 제가 해외 커뮤니티에서 많은 팁과 도움을 받아서 한국분들께도 도움을 드리고 싶었지만, 제가 PTE 시험 이야기를 나눴던 수백명의 분들 중 학원 수강을 하셨던 분들이나 과외를 받으셨다는 분들 이미 점수가 나오신 분들도 이미 공개된 제 팁과 의견을 받아가고 본인이 필요한 질문에 대한 답변만 받아갈 뿐, 본인이 가지고 있는 노하우는 다른분들을 위해서 아무것도 공유를 하지 않습니다. 그래서 50명이 넘어가던 페이스북 그룹은 폐쇄를 하였습니다. 그리고 추가로 네이버 쪽지, 페이스북 메시지, 비밀댓글 등으로 ..
2016.08.19 -
Grunt는 무엇인가?Grunt는 JavaScript를 위한 task 기반의 command line 빌드 툴이다. 예를 들어서 JavaScript 프로젝트를 진행할 때, 만약 주기적으로 해야할 일이 있다면, grunt를 설치 후 다양한 작업을 할 수 있다. Grunt 설치1. Node.js & npm설치 확인기존에 Node.js가 설치 되어 있어야 함, npm을 통해서 설치해야 하기 때문에..만약 설치가 안되어 있다면 아래 링크로 이동해서 설치2016/08/18 - [개발] - Node.js 설치 및 셋팅, npm 이란? 2. CLI (command line interface) 인스톨npm install -g grunt-cli 를 커맨드창에 입력C:\Users\Jason>npm install -g gru..
Grunt 설치 및 셋팅Grunt는 무엇인가?Grunt는 JavaScript를 위한 task 기반의 command line 빌드 툴이다. 예를 들어서 JavaScript 프로젝트를 진행할 때, 만약 주기적으로 해야할 일이 있다면, grunt를 설치 후 다양한 작업을 할 수 있다. Grunt 설치1. Node.js & npm설치 확인기존에 Node.js가 설치 되어 있어야 함, npm을 통해서 설치해야 하기 때문에..만약 설치가 안되어 있다면 아래 링크로 이동해서 설치2016/08/18 - [개발] - Node.js 설치 및 셋팅, npm 이란? 2. CLI (command line interface) 인스톨npm install -g grunt-cli 를 커맨드창에 입력C:\Users\Jason>npm install -g gru..
2016.08.18 -
Node.Js는 무엇인가?웹 개발은 Front-end 와 Back-end로 나뉜다. 간단히 말하면 프론트앤드는 웹페이지 쪽의 사용자가 볼 수 있는 부분이고, 백앤드는 서버쪽을 차지하고 있다. 원래 JavaScript는 프론트앤드에서 사용이 주로 됐지만, 2009년 Node.js라는 framework의 등장으로 자바스크립트로 서버단 기술까지 제어할 수 있게 되었다.Node.js(노드js) 는 JavaScript 엔진 V8 위에서 동작하는 이벤트 처리 I/O framework이다. 서버 환경을 포함한 프론트앤드 백앤드 모두를 JavaScript라는 같은 언어로 관리할 수 있게 되었다. 기존의 Front-end 개발자들도 다른 언어를 배울 필요 없이 쉽게 서버단 처리를 할 수 있게 만들어줬다. Node.js ..
Node.js 설치 및 셋팅, npm 이란?Node.Js는 무엇인가?웹 개발은 Front-end 와 Back-end로 나뉜다. 간단히 말하면 프론트앤드는 웹페이지 쪽의 사용자가 볼 수 있는 부분이고, 백앤드는 서버쪽을 차지하고 있다. 원래 JavaScript는 프론트앤드에서 사용이 주로 됐지만, 2009년 Node.js라는 framework의 등장으로 자바스크립트로 서버단 기술까지 제어할 수 있게 되었다.Node.js(노드js) 는 JavaScript 엔진 V8 위에서 동작하는 이벤트 처리 I/O framework이다. 서버 환경을 포함한 프론트앤드 백앤드 모두를 JavaScript라는 같은 언어로 관리할 수 있게 되었다. 기존의 Front-end 개발자들도 다른 언어를 배울 필요 없이 쉽게 서버단 처리를 할 수 있게 만들어줬다. Node.js ..
2016.08.18 -
웹페이지 개발시 방법론 - Code, Test, Refine 1. Look for natural boxes2. Look for repeated elements & semantic elements3. Write your HTML4. Apply your styles (from biggest to smallest)5. Fix things그리고 다시 3~5반복함, 원하는 웹페이지가 만들어질 때까지 반응형 디자인(Responsive design)viewport 테그 - 웹페이지를 모바일 디바이스에 최석화 시켜줌initial-scale=1의 의미는device independent pixel과 CSS pixel의 비율이 1:1 모바일에서 사람이 touch 가능한 최소 크기는 40, 적어도 48px 정도는 설정 해줘야..
웹개발, 웹디자인 방법웹페이지 개발시 방법론 - Code, Test, Refine 1. Look for natural boxes2. Look for repeated elements & semantic elements3. Write your HTML4. Apply your styles (from biggest to smallest)5. Fix things그리고 다시 3~5반복함, 원하는 웹페이지가 만들어질 때까지 반응형 디자인(Responsive design)viewport 테그 - 웹페이지를 모바일 디바이스에 최석화 시켜줌initial-scale=1의 의미는device independent pixel과 CSS pixel의 비율이 1:1 모바일에서 사람이 touch 가능한 최소 크기는 40, 적어도 48px 정도는 설정 해줘야..
2016.08.12 -
Verifying toolsTo verify HTML: http://validator.w3.org/#validate_by_input To verify CSS: http://jigsaw.w3.org/css-validator/#validate_by_input Placehold siteshttp://placehold.it/ https://placekitten.com/or Fontshttps://fonts.google.com/ Editorhttp://www.sublimetext.com/Sublime Text > Preferences > Settings - User 에 아래입력 후 저장 { "autocomplete": true, "color_scheme": "Packages/Color Scheme - Defaul..
웹개발 관련 툴 모음Verifying toolsTo verify HTML: http://validator.w3.org/#validate_by_input To verify CSS: http://jigsaw.w3.org/css-validator/#validate_by_input Placehold siteshttp://placehold.it/ https://placekitten.com/or Fontshttps://fonts.google.com/ Editorhttp://www.sublimetext.com/Sublime Text > Preferences > Settings - User 에 아래입력 후 저장 { "autocomplete": true, "color_scheme": "Packages/Color Scheme - Defaul..
2016.08.12 -
display: inline block 차이점 1. display: inline 라인1 라인2시작삽입 라인2끝 라인3 2. display: block 라인1 라인2시작삽입 라인2끝 라인3 3. display: inline-block 라인1 라인2시작삽입 라인2끝 라인3 CSS Box Modelmargin, border, padding, content 구성1. Width에는 border, padding, content 만 포함된다 Icon font 사용http://weloveiconfonts.com/ Twitter
CSS 문법 정리display: inline block 차이점 1. display: inline 라인1 라인2시작삽입 라인2끝 라인3 2. display: block 라인1 라인2시작삽입 라인2끝 라인3 3. display: inline-block 라인1 라인2시작삽입 라인2끝 라인3 CSS Box Modelmargin, border, padding, content 구성1. Width에는 border, padding, content 만 포함된다 Icon font 사용http://weloveiconfonts.com/ Twitter
2016.08.11 -
VMware 설치 후 CentOS를 다운받아서 설치 이후에 CentOS에 필요한 팁을 정리 해 보려고 합니다. 한글 설정CentOS 설치 후에 한영키를 누르면 당연히 반응하지 않습니다. 다음과 같은 방법으로 한글을 입력해 봅시다.1. Applications - System Tools - Settings - Keyboard - Input Sources 에는 English(US) 만 default로 설치되어 있습니다.2. + 버튼 클릭 후 Korean(Hangul)을 추가하고3. 텍스트 입력 창에 윈도우키+스페이스(Space) 를 클릭하면 한영 전환이 됩니다. CentOS에 Git 설치하기다양한 방법이 있지만 Yum을 이용해서 설치해보겠습니다.1. 터미널을 열고 sudo yum install git 을 입력..
CentOS 사용팁VMware 설치 후 CentOS를 다운받아서 설치 이후에 CentOS에 필요한 팁을 정리 해 보려고 합니다. 한글 설정CentOS 설치 후에 한영키를 누르면 당연히 반응하지 않습니다. 다음과 같은 방법으로 한글을 입력해 봅시다.1. Applications - System Tools - Settings - Keyboard - Input Sources 에는 English(US) 만 default로 설치되어 있습니다.2. + 버튼 클릭 후 Korean(Hangul)을 추가하고3. 텍스트 입력 창에 윈도우키+스페이스(Space) 를 클릭하면 한영 전환이 됩니다. CentOS에 Git 설치하기다양한 방법이 있지만 Yum을 이용해서 설치해보겠습니다.1. 터미널을 열고 sudo yum install git 을 입력..
2016.08.09