Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - DOM과 HTML (요소/태그/엘리먼트, 속성, 블록 태그/인라인 태그, html과 JS 분리, JS로 DOM 제어하고 값 바꾸기) 본문

프로그래밍/Javascript 자바스크립트

[인프런] Javascript입문 - DOM과 HTML (요소/태그/엘리먼트, 속성, 블록 태그/인라인 태그, html과 JS 분리, JS로 DOM 제어하고 값 바꾸기)

비비 bibi 2020. 10. 22. 15:13

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

DOM과 HTML

HTML

HyperText Markup Language 의 약자
WWW(World Wide Web)의 3요소 중 하나.
- HTML (웹 문서)
- URL (웹 문서의 주소)
- HTTP (웹 문서를 주고받는 통신규칙)
팀 버너스리에 의해 만들어 졌다. (WWW와 함께 만들어짐)
인터넷 = 네트워크망(미국 국방성에서 만듦)
인터넷을 통해 웹 브라우저에서 보이는 화면이 WWW이다.

요소 (엘리먼트, Element) (=태그)

HTML에서의 요소 단위는 태그tag 이다.
여는 태그<>와 닫는 태그</>로 이루어짐.
- 닫는 태그가 없는 태그도 있다. (img, br, input)
태그tag는 '속성attributes' 과 '컨텐츠contents'를 가질 수 있다.
- 태그 사이에 들어오는 값은 '컨텐츠contents'
- 태그 안에 들어오는 값이 '속성attributes'과 '속성값'

예를 들어
<h2 id="header"> hello </h2> 에서..
<h2> : 여는 태그
</h2> : 닫는 태그
hello : 컨텐츠
id : 속성
"header" : (속성 id의) 속성값

속성(Attributes)

객체의 속성과 비슷하게, 엘리먼트(태그)도 속성을 가질 수 있습니다.
➕ 객체와 엘리먼트(태그)는 상당히 유사하다.

<a href="http://codesquad.kr" title="코드스쿼드">

<a> : 엘리먼트=태그
href : 속성
"http://codesquad.kr" : (속성 href의) 속성값
title : 속성
"코드스쿼드" : (속성 title의) 속성값

블록 엘리먼트(블록 태그 Block Tag)

(사용했을 때) p, h1, div .. 처럼 줄이 바뀌는 엘리먼트(태그)

인라인 엘리먼트(인라인 태그 Inline Tag)

(사용했을 때) span, img, input, button, a .. 처럼 줄바뀜이 없는 엘리먼트(태그)

HTML과 JS 분리하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h2>Hello</h2>
<p id="main">This is p element</p>
<script>
    // 자바스크립트 내용
</script>
</body>
</html>

지금까지는 html안에 javascript를 넣어서 썼지만, 이제 html과 javascript를 분리해 볼 것이다.
두 파일을 분리해 좀 더 깔끔하게 관리할 수 있다는 장점이 있다.

dom.html (분리한 html파일)

html파일에서 <script></script> 사이에 자바스크립트 내용을 넣는 대신,
<script src="자바스크립트 파일 경로"></script> 로 적어준 뒤
JS파일을 따로 만들어서 거기에 자바스크립트 코드를 넣는다.

*src = source의 줄인말.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<title>HTML Tutorial</title> 
<head> 
</head> 
<body>

<h1>This is a heading</h1>
<h1>Another h1 heading</h1> 
<p id='main'>This is a paragraph.</p> 

<script src="dom_test.js"></script> 
</body> 
</html>

dom_test.js (분리한 JS 파일)

console.log("Hello JS");

DOM (Document Object Model, 문서 객체 모델)

HTML문서의 "요소element"들을 "객체object"를 이용해서 계층 구조로 표현하는 방법.
* 계층 구조 hierarchy structure : 족보와 같은 부모-자식의 트리 구조를 계층구조라고 칭함. (= 트리 구조)
DOM의 표준: W3CDOM (DOM 표준위원회)
DOM 구현체: 웹 브라우저. Gecko(게코 - 모질라 파이어폭스에서 사용), Webkit(애플에서 만듦) 등

html 객체

HTML 문서 자체도 "객체"로 간주된다.

window: 최상위 객체!
document: dom의 최상위 객체이면서 window의 하위 객체.
(원래는 window.document로 사용해야 하지만, 둘은 같기 때문에 document로 사용 가능)
(window.document === document; // true)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Big title</h1>
<h2>Hello 1</h2>
<p id="main">This is p element</p>
<h2>Hello 2</h2>
<script src="dom_test.js">
    // 자바스크립트 내용
</script>
</body>
</html>

Q. 위 문서의 계층구조는?
((↑ 상위))
html
window
document
h1 (1개)
h2 (1개)
p (1개)
h2 (1개)
((↓ 하위))

var list = document.getElementById('main');
main.innerHTML = "Hello";

JS로 DOM 제어하기

모든 HTML 엘리먼트는 객체이므로 다른 객체와 마찬가지로 JS로 제어가 가능합니다.

var a = document.getElementsByTagName('h2'); 
// ()내의 태그 이름을 가진 객체를 가져오는 메서드.
// get"Elements"ByTagName()이기 때문에 같은 태그이름의 모든 객체를 가져온다.

var b = document.getElementById("");
// id값이 ""인 객체 하나를 가져오는 메서드. 
// id는 unique하므로 언제나 하나이다. 따라서 get"Element"ById()

a; // HTMLCollection(2) [h2, h2]
a[0]; // <h2>Hello 1</h2>
a[1]; // <h2>Hello 2</h2>

//.innerHTML : 태그 내의 컨텐츠를 가리킴.
a[0].innerHTML;  // "Hello 1"
a[0].innerHTML = "Hello"; // 웹문서의 첫 번째 h2 내용이 'Hello 1' -> 'Hello'로 바뀜.

DOM 객체의 값 바꾸기

var element = document.getElementById('id')
element.innerHTML = '값'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Big title</h1>
<h2>Hello 1</h2>
<p id="main">This is p element</p>
<h2>Hello 2</h2>
<script src="dom_test.js"></script>
</body>
</html>

// 위 html문서에서 JS에서 이렇게 제어하면
<script>
var p = document.getElementById("main");
p; // <p id="main">This is p element</p>
p.innerHTML = "나는 p태그입니다"; // <p id="main">나는 p태그입니다</p> 로 문서 내용이 바뀜.
</script>

참조 강좌 ) 생활코딩 WEB1 - HTML & Internet
opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여

opentutorials.org

이 강좌를 함께 들으면 html과 인터넷에 대해 더 깊게 이해할 수 있을 것이다.

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런] Javascript입문 - 추가로 공부할 것들(2) CSS (참고 강좌) (0)	2020.10.22
[인프런]Javascript입문 - DOM으로 버튼 추가 (0)	2020.10.22
[인프런]Javascript입문 - 객체와 프로토타입 (프로토타입, 배열/객체/참조변수) (0)	2020.10.21
[인프런]Javascript입문 - 참조 변수와 Call by Reference (참조변수/일반변수, call by Value/call by Reference) (0)	2020.10.21
[인프런] Javascript입문 - 객체 2 : 객체의 생성자(생성자를 사용해 객체 만들기) (0)	2020.10.20

'프로그래밍/Javascript 자바스크립트' Related Articles