lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

webLightBasicChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
  </head>
  <body>
    <div>기본 요소</div>
    <div style="position:fixed; bottom:60px; right:60px;">
      화면을 기준으로 고정된 위치 가진 요소
    </div>
  </body>
</html>

# 레이아웃(Layout) 기초

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

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

<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>
```

<br />

## 포지셔닝

요소의 위치를 조절하는 것을 포지셔닝(Positioning)이라고 합니다. 위치는 `position` 속성으로 조절할 수 있습니다.

- `static`: 요소 위치의 기본값입니다.

- `relative`: 원래 위치를 기준으로 상대적으로 이동합니다.

- `absolute`: 부모 요소를 기준으로 절대적인 위치를 갖습니다.

- `fixed`: 화면을 기준으로 고정된 위치를 갖습니다.

```html title="포지셔닝"
<div>기본 요소</div>
<div style="position: fixed; bottom: 60px; right: 60px;">
  화면을 기준으로 고정된 위치 가진 요소
</div>
```

포지셔닝에 대해서는 이후 수업에서 자세하게 설명 드리겠습니다 🙂

`일반적으로 <head>` 태그는 문서의 메타데이터와 스타일을 포함합니다.

일반적으로 `<head>` 태그에는 사용자에게 보여지는 내용을 담는다.