HTML 구조 이해

소개

Fontend 개발에 있어 HTML 사용은 기본이 됩니다. 웹 페이지를 이루는 기반으로써 구성요소는 무엇인지, 어떻게 구조화하는 것이 좋은지, 구조화에 필요한 box 모델에 대해서 한번 정리 해보려 합니다. 

HTML(Hyper Text Markup Language)

웹을 이루는 가장 기초적인 마크업 언어로, 콘텐츠의 구조와 의미를 정의하는데 사용됩니다. 

기본적으로 HTML 을 이루는 요소는 아래와 같습니다.

요소는 속성도 가질 수 있습니다.

HTML을 이루는 요수와 속성에 대한 기본 용어인 Opening tag, Closing tag, Content, Element, Attribute 들을 인지하고 있으면, 개발간 필요한 정보들을 검색하는데 유용할 수 있습니다.

HEAD

html 에서 head 는 페이지에 대한 메타데이터를 포함하고 있습니다. 페이지를 열 때 body와 다르게 사용자에게 보여지지 않는다는 것이지요. head 에 들어갈 수 있는 것들은 아래와 같은 메타데이터 값으로, html 페이지에 대한 데이터를 나타냅니다.<meta charset=”utf-8″> <meta name=”viewpoint” content=”content”>

BODY

html 에서 body 는 사용자에게 보여지는 것들을 포함합니다. 사용자에게 보여지는 부분인 만큼 위에서 언급한 HTML 요소들을 이용하여 올바르게 브라우저에 보여질수 있도록 구조화하는 것이 중요합니다. 기본적인 구조는 아래와 같이 잡는 것이 좋습니다.

Box 개념

HTML 을 구조화하기 위해서는 box 개념만 생각하면 됩니다. box 개념이라고 하면 위의 “HTML 구조 그림”과 같이 네모 상자를 통해 document 에 표현할 부분을 구분하는 방법인데요.

CSS 를 사용하게 될 때에도 이 box 개념이 중요하게 되는데, 박싱 방법에 따라 성능에도 영향을 줄 수 있으니, 어떻게 박싱을 하여 document를 보여줄지 항상 염두해두는 것이 좋습니다.

TAG

HTML Element 를 구성하는데 사용되는 tag 는 크게 두가지로 분류됩니다.

Box 와 Item 인데요.

• Box
  • 사용자 눈에 보이지 않으면서 document 를 구조화 하는데 사용
  • tag : header/footer/nav/aside/main/section/article/div/span/form
• Item
  • 사용자 눈에 직접적으로 보이는 tag
  • tag : a/input/label/img/video/audio/map/canvus/table
  • 사용자 눈에 보이는 Item 은 또다시 Block 과 Inline 으로 유형이 구분 됩니다.

Block vs Inline

눈에 보이는 Item 을 표현할 때 Box 모델을 이용하여 표현이 되게 됩니다. Box 모델은 두가지의 유형이 있습니다.

Block 과 Inline 인데요. 이 두 유형의 차이 점은 아래와 같습니다.

• Block
  • block 유형의 tag 를 사용하면, 그 tag 는 한 줄을 모두 사용하여 표현됩니다. 즉, block 유형의 tag 사용하고 다음 tag 사용하게 되면 다음 tag 는 무조건 다음줄에 표현이 됩니다.
  • <h1> <p> 등이 이에 해당됩니다.
• Inline
  • inline 유형의 tag 를 사용하면, 그 tag 의 다음에 공간이 허용되는 한 개행없이 표현이 됩니다.

html 을 구조화하여 작성하는데 필요한 box 모델에 대한 개념을 정리해보았는데요. 잘 기억해둔다면, 이후 CSS를 통해 어떻게 보여줄지에 대해서도 쉽게 이해하고 점목시킬 수 있을 것 같습니다.

참고

• https://developer.mozilla.org/ko/docs/Web/HTML

• https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model