lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html>
  
  <head>
    <title>페이지 제목</title>
  </head>

  
  <body>
    <div>div는 블록 요소입니다</div>
    <p>p는 블록 요소입니다</p>

    <br />
    
    <span>span은</span>
    <span>인라인 요소입니다.</span>
  </body>
</html>

# 웹페이지의 레이아웃이란?

HTML(HyperText Markup Language)는 웹 페이지의 구조와 내용을 정의하는 언어로, 웹 페이지의 뼈대를 구성합니다.

`레이아웃(Layout)`은 페이지의 구조와 정보에 대한 `배치`를 의미합니다.

<br />

## HTML로 구성된 웹페이지의 기본 구조

웹페이지를 구성하는 HTML 문서는 다음과 같은 기본 구조를 갖습니다.

```html title="HTML 기본 구조"
<!DOCTYPE html>
<html>
  <head>
    
    <title>페이지 제목</title>
  </head>
  <body>
    
  </body>
</html>
```

`<head>`는 문서의 메타데이터와 스타일 등을 포함하고, `<body>`는 사용자에게 보여지는 내용을 담는 부분입니다.

<br />

## 블록 요소와 인라인 요소

HTML 요소는 크게 `블록(Block)` 요소와 `인라인(Inline)` 요소로 나뉩니다.

1. `블록 요소` : 블록 요소는 화면 전체 너비(width)를 차지하고, 각 요소는 새로운 줄에서 시작합니다. `<div>`, `<h1>`, `<p>` 등이 블록 요소에 해당됩니다.

```html title="HTML 블록 요소"
<div>div는 블록 요소입니다</div>
<p>p는 블록 요소입니다</p>
```

<br />

2. `인라인 요소` : 인라인 요소는 내용의 크기만큼만 공간을 차지하며, 줄바꿈 없이 연속적으로 표시됩니다. `<span>`, `<a>`, `<img>` 등이 인라인 요소에 해당됩니다.

```html title="HTML 인라인 요소"
<span>span은</span> <span>인라인 요소입니다.</span>
```

<br />

## 컨테이너 & 아이템

컨테이너는 여러 요소들을 묶어서 하나의 그룹으로 만듭니다. `<div>`와 `<section>`이 대표적인 컨테이너 요소입니다.

```html title="div 컨테이너 요소"
<div>
  <p>안녕하세요!</p>
  <p>반갑습니다!</p>
</div>
```
 
위 코드에서 `<div>`는 `<p>` 요소들을 묶어서 하나의 그룹으로 만들었습니다.

여기서 `<div>`는 `컨테이너(Container)` 역할을 하며, `<p>`는 `아이템(Item)` 역할을 합니다.

화면 전체의 너비를 차지하는 요소는 `블록 요소`입니다.

### `인라인 요소`는 화면 전체의 너비를 차지하는 요소이다.

웹페이지의 레이아웃이란?

HTML로 구성된 웹페이지의 기본 구조

블록 요소와 인라인 요소

컨테이너 & 아이템

인라인 요소는 화면 전체의 너비를 차지하는 요소이다.

`인라인 요소`는 화면 전체의 너비를 차지하는 요소이다.