Your SlideShare is downloading. ×
비개발자를 위한 Javascript 알아가기 #4.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,354
views

Published on

4장 예제를 이해하기위한 보충설명 DOM, DOM API 그리고 CSS 셀렉터

4장 예제를 이해하기위한 보충설명 DOM, DOM API 그리고 CSS 셀렉터

Published in: Education

0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,354
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
17
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. For non-developers! Learn Javascript Programming! ! Learning contents with! DOM (Document Object Model)! CSS Selector & DOM API! ! ! ! ! Kim min tae @ibare! NCSOFT http://ibare.kr https://medium.com/@ibare #4.1
  • 2. 브라우저가 HTML을 다루는 방법! 잠깐! 브라우저가 뭔가요?! 조금 개발자스러운 답변을 원합니다. 브라우저란 HTML 문서를 읽고 해석한 후 ! 해석한 결과를 바탕으로 스타일을 적용하고! 그 결과를 사용자에게 표시해주는 소프트웨어.! 
 *문서 해석과 스타일 적용은 문서의 내용이 변경될 때 마다! 반복적으로 일어나며 이 변경은 Javascript에 의해 ! 빈번하게 발생할 수 있다.
  • 3. 브라우저가 HTML을 다루는 방법! 읽기 결과 적용 표시 javascript image css my.html DOM 1 2 3 4 DOM에 변화가 생기면 2~4 구간이 반복 읽고 분석한 결과를! DOM 형태로 재구성 스타일 (CSS) 적용 화면에 최종 표시! (랜더링) 변경
  • 4. 브라우저가 HTML을 다루는 방법! CSS 적용전 CSS 적용 Javascript 작동
  • 5. 브라우저가 HTML을 다루는 방법! ! DOM, 돔, Document Object Model 이란? HTML 문서의 요소를 효과적으로! 다루기(찾기, 추가, 삭제, 수정)위하여 모든 요소를! 분리하고 상하관계를 설정한 후 배치한 구조 프로그래머들은 이런 구조를! 나무(Tree) 구조라 부른다.
  • 6. 브라우저가 HTML을 다루는 방법! ! DOM, 돔, Document Object Model 이란? html head body title text h1 text p text a text하나의 뿌리에서 가지를! 뻗는 나무와 비슷하다하여! 나무(Tree) 구조라고 부른다 document
  • 7. DOM을 다루기 위해 제공되는 주요 기능들 document.getElementById ! document.getElementsByName ! document.getElementsByTagName ! document.getElementsByClassName ! document.querySelectorAll 지정한 ID를 가진 요소 찾기 지정한 이름을 가진 요소들 찾기 지정한 태그 이름을 가진 요소들 찾기 지정한 클래스 이름을 가진 요소들 찾기 지정한 CSS 셀렉터로 찾아지는 요소들 찾기
  • 8. DOM을 다루기 위해 제공되는 기능 사용 예 html head body title text h1 text p text a text document var eles = document.getElementsByTagName(‘h1’); var eles = document.getElementsByTagName(‘a’); *
  • 9. CSS Selector 란? CSS는 HTML의 요소에 스타일을 적용하기! 위한 목적으로 만들어 졌으며, CSS Selector는! 스타일이 적용될 대상을 결정하기 위해 제공된다. CSS 선택자 (Selector) 선택된 대상들에 적용될 스타일
  • 10. CSS Selector 란?! DOM API vs. CSS Selector html head body title text h1 text p text a text document var eles = document.getElementsByTagName(‘h1’); var eles = document.getElementsByTagName(‘a’); * h1 { … } a { … }
  • 11. CSS Selector 란?! DOM API vs. CSS Selector DOM API와 CSS Selector 모두 DOM 요소를! 탐색할 수 있으나 사용 목적은 완전히 다름! ! DOM API는 DOM 요소의 추가, 수정, 삭제와! 같은 광범위한 목적을 가지고 있으며,! ! CSS Selector는 스타일을 적용할 대상을! 선택하기 위해서만 제공된다.
  • 12. 1 “다음시간에”;! 2 “잘자요~~; Unclosed string.