웹 기술 기초

브라우저에서 사용되는 DOM(Document Object Model)에 대한 설명으로 올바른 것은?

  1. A서버에 있는 데이터베이스의 테이블 구조를 브라우저로 보내기 위해 HTML 표(table 요소) 형태로 변환한 것이다
  2. BHTML 문서를 요소 등을 노드로 하는 트리 구조로 나타낸 것으로, JavaScript에서 읽고 쓸 수 있다
  3. CCSS 규칙을, 파일을 작게 하여 읽어 들이기를 빠르게 하기 위해 공백을 제거하고 압축한 형식이다
정답과 해설 보기

정답: B. HTML 문서를 요소 등을 노드로 하는 트리 구조로 나타낸 것으로, JavaScript에서 읽고 쓸 수 있다

브라우저는 HTML을 파싱하여, html 요소를 루트로 하고 head, body, 그 안의 단락 등을 노드로 하는 트리 구조(DOM 트리)를 만듭니다. JavaScript는 document.querySelector로 요소를 찾거나, 텍스트나 속성을 바꿔 쓰거나, 요소를 추가하여 DOM을 통해 페이지를 바꿉니다. DOM이 바뀌면 브라우저는 필요에 따라 배치 계산과 그리기를 다시 합니다. DOM은 특정 프로그래밍 언어에 의존하지 않는, 문서를 조작하기 위한 인터페이스로 표준화되어 있습니다.

이 분야 연습하기 분야로 돌아가기

웹 기술 기초의 다른 문제

  1. 위의 CSS를 지정한 요소에서, 좌우 보더의 바깥쪽 끝에서 끝까지의 폭은?
  2. 다른 스타일 지정은 없는 것으로 한다. 위의 HTML에서 'Hello'라는 문자의 색은?
  3. 브라우저가 첫 화면을 표시하기까지의 처리(중요 렌더링 경로)에서는 <head> 안에 속성 없이 쓴 <script src="app.js">가 있으면 HTML 파싱이 거기서 멈춘다. 이 요소에 defer 속성을 붙였을 때의 동작으로 올바른 것은?
  4. 위의 JavaScript를 브라우저에서 실행했을 때 콘솔에 표시되는 문자의 순서로 올바른 것은?
  5. 브라우저의 동일 출처 정책에서 https://www.example.com/app/index.html과 같은 출처로 간주되는 URL은?