lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webLightPracticeChapter2Title

webLightPracticeChapter1Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

<!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"
    />
    <title>HTML 시작하기</title>
  </head>
  <body>
    <br />
    <p>
      HTML은 <strong>HyperText Markup Language</strong>의 약자로 웹페이지의
      구조와 내용을 정의해요.
    </p>
    <div>
      HTML은 <a href="https://example.com">링크(Link)</a>를 활용해 텍스트 기반의
      문서와 컨텐츠를 서로 연결하는 <strong>하이퍼텍스트</strong>(HyperText)를
      활용한 마크업 언어로, 웹페이지의 틀을 잡는 골격과 같아요.
    </div>
  </body>
</html>

# 요소에 여백 넣기

HTML 요소간 너무 붙어있으면 웹페이지가 답답해 보일 수 있고, 너무 떨어져 있으면 웹페이지가 텅 비어 보일 수 있습니다.

그렇다면 요소간 여백을 조절하려면 어떻게 해야 할까요? 여백을 조절할 때는 앞에서 배운 `margin`과 `padding`를 사용합니다.

<br />

## margin

요소의 주변(바깥) 여백을 조정하는 데 사용합니다. 여백은 요소 주위의 빈 공간을 말하는데, 비유하자면 "요소 주변에 빈 자리"라고 생각하면 도움이 됩니다.

마치 책과 책 사이에 빈 공간을 두는 것과 같습니다.

margin은 요소 주위에 여백을 추가하거나 제거하여 요소들 사이의 간격을 조절할 수 있습니다.

여백은 픽셀(px), 백분율(%) 등의 단위로 지정할 수 있습니다.

<br />

## padding

요소의 내부(안쪽) 여백을 조정하는 데 사용합니다. 내부 여백은 요소의 내부에 있는 빈 공간을 말하는데, "요소 내부에 빈 자리"라고 생각하면 이해하기 쉽습니다.

이는 마치 책의 표지와 책 페이지 사이에 공간을 두는 것과 같습니다.

padding은 요소의 내부 여백을 추가하거나 제거하여 요소 내부의 내용과 테두리 사이의 간격을 조절할 수 있습니다.

내부 여백도 픽셀(px), 백분율(%) 등의 단위로 지정할 수 있습니다.

<br/>

예를 들어 다음과 같은 CSS 코드는 `<div>` 요소의 `margin`과 `padding`을 설정하는 예시입니다<div className=""></div>

```css title="margin, padding 설정"
div {
  margin: 10px;
  padding: 20px;
}
```

위의 코드는 `<div>` 요소 주위에 10픽셀의 `margin`을 추가하고, `<div>` 요소 내부에는 20픽셀의 `padding`을 적용합니다.