HTML Markup 방법과 DOM 트리구조

 

 

DOM(Document Object Model)

 

---

 

• HTML을 코딩하는 것을 마크업 한다고합니다. 모든 태그는 컨텐츠 요소로 다른 태그를 포함할 수 있는 중첩구조를 가지게 됩니다.
• 그러다보면 처음에 열린 태그, 두번째 열린태그 등.. 계층구조를 가지며 DOM 트리구조를 형성하게 됩니다.
• DOM 트리구조를 이해해야 CSS에서 HTML을 선택할 때에도 잘 이해할 수 있게 됩니다.
• 단, 빈요소(Empty Element) 태그는 다른 태그를 컨텐츠요소로 포함 할 수 없습니다.

 

 

중첩코딩

 

<div>
    <h1>Hello, HTML</h1>
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
    <p>
        Let's coding.
        <strong>Important content</strong>
    </p>
</div>

                                                                                                   

위의 마크업을 브라우저가 해석하는 DOM 트리구조로 나타내 보았습니다.

 

 

 

A. HTML 태그 중첩

- HTML태그의 중첩규칙은 어렵진 않지만, 반드시 알고 있어야합니다.

- 바로 HTML 블럭요소와 인라인요소의 차이점을 알아야하는데요, 아래의 표를 참조해서 알아두세요.

- 또다른 중요한 사실은 똑같은 블럭요소라도 컨텐츠로 들어가는 요소들에 대한 제한사항이 모두 다릅니다. 처음에는 헷갈리겠지만 몇종류 되지않으니 익숙해질때까지 코딩하다보면 자연스레 알게됩니다. 너무 걱정하지 않으셔도 됩니다. ^^

 

 

---

그렇다면, HTML 블럭요소와 인라인요소의 차이점은 무엇일까요?

대표적인 차이점 몇개를 정리해 드릴게요

Content	블럭요소	인라인요소	인라인 블럭 요소
CSS	크기, 상하여백 지정가능	크기와 상하여백을 가질 수 없다.	크기, 상하여백 지정가능
중첩규칙	모든 인라인 요소 또는 인라인블럭 요소를 컨텐츠 요소로 포함 할 수 있다.	어떠한 블럭요소도 콘텐츠요소로 포함할 수 없다. ---------------------- 단, <a> 태그는 제외된다. 인라인 요소지만 HTML5부터 컨텐츠요소로 블럭요소가 오는 것을 허용한다.	어떠한 블럭요소도 콘텐츠요소로 포함할 수 없다.
특징	마크업 할때마다 새로운 블럭에 시작한다. 한줄에 여러개가 배치되려면 CSS로 스타일링 해야한다.	자신이 가진 컨텐츠 만큼만 늘어난다. 한줄에 공간이 있다면 여러개가 배치될 수 있으며, 공간이 부족할 경우 자동으로 줄 바꿈 된다.	인라인 요소와 동일하다. 하단에 불필요한 1px 정도의 여백이 생길 수 있다.
자주쓰이는 해당 태그	<h1>~<h6>, <p>,<div>, <blockquote>, <table>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <header>, <main>, <footer>, <nav>, <section>, <article>, <figure>, <figcaption>,  <address>, <form>, <fieldset>, <legend>, <template>... 등등	<a>,<label>, <span>, <strong>, <em>,<b>, <i>, <time>, <mark>, <q>, <abbr>, <small>, <sub>, <sup> ... 등등	<img>, <input>, <select>,<textarea>, <button>, <meter>.. 등등

 

 

 

B. 요소별로 컨텐츠요소(Child element)로 허용되는 범위 정리

Content	블럭요소(Block level elements)
컨텐츠 요소로 어떠한 블럭요소도 허용하지 않는 태그	<h1>~<h6>, <p>, <dt>
지정된 태그만 컨텐츠 요소(child)로 허용하는 태그 이는 반대로 허용된 태그는 지정된 부모태그만 가능하다는 뜻이 된다.	<ul> : <li> 태그만 허용된다. <ol> : <li> 태그만 허용된다. <dl> : <dt>, <dd> 태그만 허용된다. <table> : 테이블 관련요소들만 허용된다. <select> : <option>등 관련요소만 허용된다.
자기자신 포함 모든 블럭요소를 허용하는 태그	<div>
자주쓰이는 해당 태그	<h1>~<h6>, <p>,<div>, <blockquote>, <table>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <header>, <main>, <footer>, <nav>, <section>, <article>, <figure>, <figcaption>,  <form>, <fieldset>, <legend>, <template>... 등등

 

 

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.