-
HTML 자식요소와 부모요소 등의 DOM(문서객체모델)퍼블리싱/공통 2020. 7. 29. 00:51반응형
DOM(Document Object Model)은 문서객체모델이라고 한다.
문서객체모델은 HTML 문서의 구조화를 위해 필요한 개념이다.
이는 css, javascript, jQuery에서 각 요소(태그)들을 찾아서 선택할 수 있다.
DOM모델은 각 요소들의 관계를 파악하는데 도움이 되며, 보다 복합적인 구성 및 지정을 할 수 있다.
요소 사이의 관계는 부모-자식관계, 형제관계, 상위요소, 하위요소 등이 있다. 이들이 개념은 DOM, 문서객체모델이라고 한다.<html> <head> <title>My title</title> </head> <body> <h1>A heading</h1> <a href="">Link text</a> </body> </html>
DOM으로 요소관계 파악하기
위의 소스 코드를 예시로 DOM의 간단한 관계를 설명할 수 있다.
그 기준을 H1태그를 예시로 하면 아래와 같은 관계가 형성된다.부모요소
h1의 부모는 body 태그이다.
부모요소는 해당 태그의 바로 윗 상위요소를 말한다. 부모요소의 여러 속성을 상속받아 표현될 수 있다.자식요소
h1의 자식으로는 내용인 텍스트가 있다. 요소인 태그도 자식요소로 올 수 있다.
만약 body를 기준으로 한다면 body의 자식요소는 h1과 a가 있다.
표현되는 요소 중에서 부모요소보다 큰 자식요소가 올 경우 css 속성으로 overflow:hidden으로 설정하면 부모요소를 넘치는 부분을 보이지 않게 할 수 있다.형제요소
h1의 형제요소는 a이다.
형제요소는 부모요소 밑의 자식요소들을 말한다.
자식요소는 하위요소로 이어질 수 있으며, 같은 단계의 자식요소들이 서로의 형제요소들이다.상위요소
h1의 상위요소는 body, html이다.
이는 부모요소, 부모요소의 부모요소처럼 부모요소의 전체를 말한다.
위의 소스코드 예시로 하여 body, html를 말하였지만 css나 javascript로 제어할 때는 body나 html은 적용되지 않을 수도 있다.
다만 실제 웹페이지를 만들다 보면 5~7단계 그보다 많은 단계로 작성되기 때문에 상위요소의 개념을 활용할 때가 많다.하위요소
h1의 하위요소는 상위요소와 반대로 자식요소들을 말한다.
상위요소와 마찬가지로 css 등을 활용할 때를 대비하여 알아둘 필요가 있다.728x90반응형'퍼블리싱 > 공통' 카테고리의 다른 글
웹문서와 색상, 색상을 표현하는 방법(rgb color) (0) 2021.03.11 block요소와 inline요소 (0) 2021.03.11 Hypertext(하이퍼텍스트)와 절대경로 그리고 상대경로 (0) 2020.07.22 HTML5와 태그란? (0) 2020.07.17 웹페이지를 만드는 언어, HTML과 CSS, Javascript의 기본내용 (0) 2020.07.13