비개발자를 위한 Javascript 알아가기 #2

4,566 views

Published on

웹프로그래밍(Javascript)을 위한 기본 준비 과정과 HTML/CSS/Javascript 의 의미를 간단하게 다룹니다.

Published in: Education
0 Comments
34 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,566
On SlideShare
0
From Embeds
0
Number of Embeds
1,287
Actions
Shares
0
Downloads
6
Comments
0
Likes
34
Embeds 0
No embeds

No notes for slide

비개발자를 위한 Javascript 알아가기 #2

  1. 1. For non-developers! Learn Javascript Programming! ! Learning contents with! Tools (Browser / Editor / REPL)! HTML && CSS && Javascript! ! ! ! ! Kim min tae @ibare! NCSOFT http://ibare.kr https://medium.com/@ibare #2
  2. 2. 프로그래머에게 에디터란? 통합 가볍고 빠른 이쁜 자유 새로운 익숙한 선택할수없는 …
  3. 3. 프로그래머에게 에디터란? 어쩔 수 없는! 선택이거나! 취향입니다
  4. 4. 웹(HTML/CSS/JS) 프로그래머에게 에디터란? 취향입니다! 세상엔 너무 많은 에디터가 존재합니다.! 취향에 맞는 에디터를 선택하세요. … …
  5. 5. 웹(HTML/CSS/JS) 프로그래머에게 에디터란? 실력이 쌓이면! 만들어보는것도? 그런 일이 가능한게! 프로그래머의 매력!!!
  6. 6. 웹 프로그래머에게 브라우저란? 보통의 사람들에게 브라우저는 인터넷 사이트를 탐색하며 정보를 찾을 수 있는 어플리케이션
  7. 7. 웹 프로그래머에게 브라우저란? 전지 전능한 운영체제, (내가 만든)어플리케이션의 실행 환경 입니다.
  8. 8. 조금 어렵지만 REPL 이라는 녀석도 있음 Read–Eval–Print Loop 읽고 / 평가하고 / 출력하는 일을 / 반복하는 실행 환경 브라우저가 아닌 환경에서 Javascript 코드 실행이 가능 HTML / CSS 같은건 안되요
  9. 9. 이 강좌에서 에디터는 Brackets를 사용합니다 http://brackets.io
  10. 10. Javascript 프로그래밍이란? 1. Javascript 는 HTML을 다루기 위해 만들어진 언어! 2. 웹 UI 를 다루는 작업이 주된 목적! 3. UI 는 HTML과 CSS로 이루어짐! 4. 데이타 처리를 위해 서버와 통신도 담당! 5. 그 외에 다양한 분야로 영역을 확장 중
  11. 11. 그렇다면 HTML은 무엇인가? 우리가 보는 모든 웹 페이지는 텍스트와 이미지와 같은 요소들로 이루 어져 있다. 각각의 요소는 디자이너들의 의도한 대로 표현된다.
  12. 12. 그렇다면 HTML은 무엇인가? HTML (Hyper Text Markup Language)은 정보, 의도, 표현 등 다양한 요구를 충족시키기 위해 개발된 언어이다.
  13. 13. 그렇다면 CSS는 또 무엇인가? 브라우저는 HTML에 기본(브라우저마다 고정된) 스타일(모양)을 적용 하여 화면에 그리기(랜더링)를 수행한다.
  14. 14. 그렇다면 CSS는 또 무엇인가? 표현을 데이터와 분리하고 보다 유연하게 문서에 다양한 의도(디자인) 을 주입시키기 위해 개발된 것이 CSS라는 양식이다.
  15. 15. 그렇다면 CSS는 또 무엇인가? 표현을 데이터와 분리하고 보다 유연하게 문서에 다양한 의도(디자인) 을 주입시키기 위해 개발된 것이 CSS라는 양식이다. CSS(Cascading Style Sheets)는 표현과 관련된 광범위한 요구사 항 달성을 위해 다음과 같은 형식을 지원한다. 컬러그라데이션 텍스트 스타일 트랜지션트랜스폼 레이아웃 폰트투명도 위치 미디어(출력장치) 애니메이션크기
  16. 16. 그렇다면 Javascript의 역할은? 간단한 작업을 생각해 봅시다. 1. 사용자가 웹페이지를 마우스 클릭한다.! 2. 페이지의 배경색을 노란색으로 변경한다.
  17. 17. 그렇다면 Javascript의 역할은? 간단한 작업을 생각해 봅시다. 1. 사용자가 웹페이지를 마우스 클릭한다.! 2. 페이지의 배경색을 노란색으로 변경한다.
  18. 18. 그렇다면 Javascript의 역할은? 간단한 작업을 생각해 봅시다. 1. 사용자가 웹페이지를 마우스 클릭한다.! 2. 페이지의 배경색을 노란색으로 변경한다. Javascript는 HTML과 CSS만으로 ! 달성할 수 없는, 규정되어있지 않은 연출과 ! 사용자와의 복잡한 상호작용 구현이 ! 필요한 경우 사용된다.
  19. 19. 1 “다음시간에”;! 2 “잘자요~~; Unclosed string.

×