Iframe¶
목적¶
현재 WebPage 내에서 다른 WebPage를 불러와 삽입하는 기능을 제공
주요 단계¶
1. Iframe UI 생성¶
1.1. Web Page 내에서 특정 위치에 Iframe을 추가하여 외부 페이지를 포함¶
<사진 1> Iframe UI 설정 화면
1.2. Iframe UI Property¶
| Name | Description |
|---|---|
| src | 삽입하려는 WebPage의 URL 주소 |
| height | Iframe 세로 높이 설정 |
| width | Iframe 가로 너비 설정 |
| align | Iframe 정렬 방식 (left, right, middle, top, bottom) |
| frameborder | Iframe 경계선 유무 설정 (0: 없음, 1: 있음) |
| border | 업데이트 예정 |
| cellspacing | 업데이트 예정 |
| style | CSS 속성을 직접 입력하여 적용 |
2. Iframe Property - Align¶
2.1. align 속성을 활용하여 Iframe의 정렬을 설정¶
<사진 2> Iframe Property - Align 설정 적용 화면
- 상단 Iframe: align: left 설정 → 좌측 정렬됨
- 하단 Iframe: align: right 설정 → 우측 정렬됨
- 단, height 또는 width 값에 따라 정렬이 적용되지 않을 수 있음 (예: width 속성을 100%로 설정하면 left, right 정렬 적용 불가)
3. Iframe Property - FrameBorder¶
3.1. frameborder 속성을 활용하여 Iframe의 테두리 표시 여부 설정¶
<사진 3> Iframe Property - FrameBorder 설정한 화면
- 상단 Iframe: frameborder: 1 설정 → 경계선 표시됨
- 하단 Iframe: frameborder: 0 설정 → 경계선 없음