w3스쿨즈 HTML(8) - iframe, File Path

iframe

HTML iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용됩니다.

<iframe src="URL"></iframe>

 

width 와 height 설정(기본 px단위)

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

 

iframe 테두리 제거

기본적으로 iframe 주위에는 테두리가 있습니다.

테두리를 제거하려면 style 속성을 추가하고 CSS border 속성을 사용하십시오.

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

 

물론 CSS를 사용하면 iframe 테두리의 크기, 스타일 및 색상을 변경할 수도 있습니다.

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

 

iframe Target for a link

링크의 대상으로 iframe을 사용할 수 있습니다.

링크의 타켓 속성은 iframe의 name 속성을 참조해야합니다.

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

 

File Path

파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 ​​설명합니다.

파일 경로는 다음과 같은 외부 파일에 연결할 때 사용됩니다. (웹 페이지, 이미지, 스타일 시트, 자바스크립트 etc)

<img src="picture.jpg"> //picture.jpg는 현재 페이지와 동일한 폴더에 있습니다
<img src="images/picture.jpg"> //picture.jpg는 현재 폴더의 이미지 폴더에 있습니다.
<img src="/images/picture.jpg"> //picture.jpg는 현재 웹 루트의 이미지 폴더에 있습니다.
<img src="../picture.jpg"> //picture.jpg는 현재 폴더에서 한 단계 위의 폴더에 있습니다.

 

절대 파일 경로

절대 파일 경로는 파일의 전체 URL입니다.

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

 

상대 파일 경로

상대 파일 경로는 현재 페이지를 기준으로 파일을 가리 킵니다.

 

이 예제에서 파일 경로는 현재 웹의 루트에있는 이미지 폴더의 파일을 가리 킵니다.

<img src="/images/picture.jpg" alt="Mountain">

 

이 예제에서 파일 경로는 현재 폴더에있는 images 폴더의 파일을 가리 킵니다

<img src="images/picture.jpg" alt="Mountain">

 

이 예제에서 파일 경로는 현재 폴더보다 한 수준 위에있는 폴더에있는 images 폴더의 파일을 가리 킵니다.

<img src="../images/picture.jpg" alt="Mountain">

 

가능한 경우 상대 파일 경로를 사용하는 것이 가장 좋습니다.