[HTML] HTML 페이지 구조

Ninto·2022년 9월 28일

박스모델📦

박스모델은 HTML 요소들을 꾸미고,
페이지 화면에 배치하는 기본 기능을 제공한다.

▲ 웹 페이지의 모습을 박스 형태로 표현한 이미지

웹 페이지의 모든 html 요소들은 박스 형태를 갖는다.
html요소들을 중심으로 아래 세가지 CSS를 적용하여
형태가 구성된다.

border : 경계선

Margin : 경계선 외부의 여백 (마진)

Padding : 경계선 내부의 여백 (패딩)

<div>태그를 사용하면 박스 자체를 만들 수 있다.

html 요소들을 담는 박스와 같은 것이라 생각하면 된다.

원하는 요소들을 감싼 형태로 사용.

html 요소들을 웹페이지 화면에 배치,
레이아웃 하는데 많이 사용됨.

HTML 태그에는 크게 2가지 종류로 나누어진다.

Box : 아이템들을 담는 박스

박스로 사용되는 태그들 (아이템들을 감쌈)

Item : 들어가는 아이템들

아이템으로 사용되는 태그들

웹 페이지의 전체적인 윤곽을 잡는 작업

웹페이지를 제작할땐 Box 태그들을 이용하여 구조를 작성해준다.
아래는 가장 전형적인 페이지 구조를 레이아웃하는 과정이다.

▼ 먼저 구획을 나누어 몇개의 큰 박스를 화면에 배치한 다음

▼ 각 박스 안에서 세부적인 내부 요소들의 배치가 이루어진다.

아래에서 <div>태그를 사용하여 만든 페이지 구조에 대해 더 알아보자 !

<div>태그안에 id나 class 값을 설정해 박스형태로 구조를 만들 수 있다.

<div id="wrap"></div>
<div id="header"></div>
<div id="sidebar"></div>
<div id="section"></div>
<div id="footer"></div>

wrap : 전체 페이지의 요소들을 감싸는 박스
header : 상단 헤더 영역을 나타내는 박스
sidebar : 웹 페이지에서 사이드바 영역을 의미하는 박스
(웹페이지의 메인섹션, 메인콘텐츠의 옆(좌측이나 우측)에 위치하는 박스형의 요소)
section :독립적인 구획, 섹션을 나타내는 박스.
(main-section: 메인 섹션은 메인 콘텐츠 영역을 나타내는 박스)

위처럼 <div>를 사용하여 레이아웃을 하게되면,
div태그가 필연적으로 많이 반복 사용되어진다는 한계점을 가진다.

<div> 로 웹 페이지를 만들었을때의 문제점

1. 웹 페이지의 구조가 복잡해진다.
2. 가독성이 떨어진다.
3. 유지보수가 힘들어진다.
4. 문서를 이해하기 어려워진다.
5. 공동작업에 어려운 문제를 겪는다.

이러한 단점을 보완하기 위해서

2014년 제형된 HTML5버전에서 새로운 태그들이 추가되었다.

HTML5버전에서 추가된 새로운 태그들

일명, 시맨틱태그(Semantic)에 관련된 내용은

다음 포스트 글에서 자세히 다뤄보도록 하겠다. 👋👋👋