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"
    />

    <title>`iframe` 태그 예제</title>
  </head>

  <body>
    
    <iframe src="https://example.com" width="500" height="300"></iframe>

    
    <iframe
      src="https://www.codefriends.net/hello"
      style="border: none;"
      width="400"
      height="400"
    ></iframe>
  </body>
</html>

# iframe 태그

`iframe` 태그는 웹 페이지 내에 다른 웹 페이지를 표시하는 태그입니다.

<br />

```html title="iframe 태그 예시"
<iframe src="https://example.com" width="500" height="300"></iframe>
```

이 코드를 사용하면 `example.com` 웹 페이지가 현재 페이지의 500x300 크기의 영역 안에 표시됩니다.

<br />

## iframe 태그 주요 속성

### `src`

- `src` 속성은 임베드할 웹 페이지의 URL을 지정합니다.

- 코드 예시:

  ```html title="iframe src 속성 예시"
  <iframe src="https://example.com"></iframe>
  ```

<br />

### `width` & `height`

- `width`와 `height` 속성은 `iframe`의 크기를 지정합니다.

- 코드 예시:

  ```html title="iframe width & height 속성 예시"
  <iframe src="https://example.com" width="400" height="250"></iframe>
  ```

<br />

### `frameborder`

- `frameborder` 속성은 iframe 주변의 테두리 유무를 지정합니다. 다만, 최신 웹 브라우저는 더 이상 이 속성을 사용하는 것을 권장하지 않고, CSS의 `border` 속성을 사용하시는 것을 권장합니다.

- 코드 예시:

  ```html title="iframe frameborder 속성 예시"
  
  <iframe src="https://example.com" frameborder="0"></iframe>

  
  <iframe src="https://example.com" style="border: none;"></iframe>
  ```

<br />

## 어떻게 사용하나요?

`iframe` 태그는 동영상(예: 유튜브), 지도(예: 구글지도), 외부 웹사이트 등을 웹 페이지 안에 포함시킬 때 주로 사용합니다.