배꼽파지 않도록 잘 개발해요

이벤트(event) 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 웹에서도 이벤트가 발생함. 웹에서 발생하는 이벤트의 예 웹페이지 사용자가 버튼을 클릭했다, 클릭 이벤트! 웹페이지 사용자가 키보드를 눌렀다, 키다운 이벤트! 웹페이지 사용자가 입력 폼의 내용을 제출했다, 제출 이벤트! ... 외 다수 이벤트 핸들러(handler) 이벤트가 발생되면 실행될 코드 블록, 함수가 이 역할을 담당함. 이벤트 핸들러 등록 : 이벤트 핸들러 역할을 수행할 함수를 정의하는 것 event handler register : 이벤트가 발생하면, 이 함수를 호출해라! 예시) 웹 사용자가 버튼(button) 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면? const handleC..

Document Object Model, DOM 렌더링 : 해석한 HTML 코드를 화면을 통해 보여주는 과정 렌더링의 세부 과정 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)인 DOM을 생성함. 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링함. DOM의 존재 목적 DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface)임. 사진 넣기 (3분쯤 나오는 화면) Document & methods window.document 브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조함. window.document..

자바스크립트의 역할 • 웹브라우저가 가진 기능을 실행시킴 • HTML/CSS 통해 렌더링된 화면을 조작할 수 있음 → 자바스크립트는 웹브라우저를 조작함으로써 역할을 수행함. 자바스크립트 코드를 더하는 방법 (주로 body 맨 밑에 씀) • HTML 문서 내부에 작성하기 : 자바스크립트 파일 확장자 : *.js 자바스크립트 태그 : 객체 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단 자바스크립트 코드 내에서 객체 : 값 또는 기능을 갖고 있는 데이터 자바스크립트 : 웹브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어 웹브라우저 객체 대표 : window (브라우저에 대해서 무언가를 하겠다) 객체 사용법 객체.데이터 : 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터를 사..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 • CSS : Cascading Style Sheets Cascading : 계단식 Style : 멋을 내다 Sheets : (종이) 한 장 → 계단식으로 스타일을 정의하는 문서! CSS는 HTML 문서에 스타일을 더해줌. HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있음. • CSS가 일하려면 - CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없음. - HTML : 웹 문서의 콘텐츠를 구성하는 언어 - CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어 (색상, 크기, 위치 등) H..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 • HTML = HyperText Markup Language HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트 Markup : (콘텐츠를) 표시하다 Language : 언어 => 하이퍼 텍스트와 콘텐츠를 표시해주는 언어! • HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될지를 정의한 HTML 문서를 제작함. 완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. • HTML 문서는 파일의 확장자가 html ..