220318 React DOM
⭐ React ⭐
1. DOM (문서객체모델)
- 'Document Object Model' 의 줄임말
- HTML 문서의 요소들에 쉽게 접근하기 위해
계층으로 표현된 인터페이스
- HTML 단위 (요소) 하나하나를 객체로 생각하는 모델
- 텍스트도 객체이고, 버튼도, 태그와 같은 element들도 객체가 될 수 있다.
<body>
<h1>오늘 할 일</h1>
<div>
<h3>리액트 강의 1주차 듣기</h3>
<p>리액트 강의 다 듣기</p>
<button>완료</button>
</div>
</body>
- 위 코드에서 div는 h3, p, btn태그를 포함하고 있다
- 여기서 div 태그는 하위 요소들의 부모 요소라고 하고
- div에 속해 있는 태그는 div 태그의 자식 요소라고 한다
- div와 하위 태그의 관계는 '부모-자식 관계'라고 한다
- 하위 태그들 즉, h2, p, btn의 관계는 '형제 관계"라고 한다
- 또 div는 body 안에 포함되어 있는데,
이것을 그림으로 나타내면 이렇게 된다
- 이것을 ⭐트리 구조⭐ 라고 한다
즉 DOM은 구조화된 문서를 표현하는 형식이고, 그 형식은 '트리 구조'이다
- DOM트리를 확인하는 방법은
- 브라우저를 열고, 개발자 도구를 키면 되는데
- 윈도우는 [Ctrl + Shift + i / F12]
- 맥은 [Cmd +Opt + i ]
- 눌러서 개발자 도구를 열 수 있다
//console창에서 확인이 가능하다
// 현재 dom 트리를 볼 수 있다
document
// dom 트리 중, body의 내용을 확인한다
document.body
// dom 트리 중, head의 내용을 확인한다
document.head
- 더 자세한 내용은 공식 문서에서 볼 수 있다
Author And Source
이 문제에 관하여(220318 React DOM), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@nulee1000/220318-React-1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
계층으로 표현된 인터페이스
- 텍스트도 객체이고, 버튼도, 태그와 같은 element들도 객체가 될 수 있다.
<body>
<h1>오늘 할 일</h1>
<div>
<h3>리액트 강의 1주차 듣기</h3>
<p>리액트 강의 다 듣기</p>
<button>완료</button>
</div>
</body>- 위 코드에서 div는 h3, p, btn태그를 포함하고 있다
- 여기서 div 태그는 하위 요소들의 부모 요소라고 하고
- div에 속해 있는 태그는 div 태그의 자식 요소라고 한다
- div와 하위 태그의 관계는 '부모-자식 관계'라고 한다
- 하위 태그들 즉, h2, p, btn의 관계는 '형제 관계"라고 한다
- 또 div는 body 안에 포함되어 있는데,
이것을 그림으로 나타내면 이렇게 된다
- 이것을 ⭐트리 구조⭐ 라고 한다
- DOM트리를 확인하는 방법은
- 브라우저를 열고, 개발자 도구를 키면 되는데
- 윈도우는 [Ctrl + Shift + i / F12]
- 맥은 [Cmd +Opt + i ]
- 눌러서 개발자 도구를 열 수 있다
- 브라우저를 열고, 개발자 도구를 키면 되는데
//console창에서 확인이 가능하다
// 현재 dom 트리를 볼 수 있다
document
// dom 트리 중, body의 내용을 확인한다
document.body
// dom 트리 중, head의 내용을 확인한다
document.headAuthor And Source
이 문제에 관하여(220318 React DOM), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nulee1000/220318-React-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
