iframe을 활용하여 블로그를 꾸며보자

블로그를 하다 보면 정보를 전달하기 위한 글을 쓰는 경우가 많다. 저도 자주가 이용하는 게 등본발급방법 혹은 소득금액증명서 발급방법을 알기 위해 인터넷에 검색하는 경우가 정말 많은데요. 그럴 때 사용하면 정말 유용할 것 같아요.

iframe은 inline frame으로 현재 웹 페이지 안에 다른 웹페이지를 표시하는 데에 사용됩니다.

 

이러한 iframe의 속성은 아래와 같습니다.

속성	설명
name = "이름"	창의 이름으로 target속성의 값으로사
src="URL"	창에 표시될 문서의 URL
srcdoc="HTML코드"	창에서 보여줄 HTML콘텐츠 srcdoc속성이 지정되면 src속성은 무시됨
width="폭"	창의 폭 , 픽셀
height="높이"	창의 높이 , 픽

자 그럼 예를 들어서 웹페이지 안에서 보여줄 페이지를 두 곳만 만들어 보자고요. 금융감독원과 홈택스를 하기로 정해보고요.

먼저 HTML을 작성해 볼까요

<a href="https://www.fss.or.kr/" target="view"> 금육감독원 </a></p>
<a href="https://www.hometax.go.kr/" target="view"> 홈택스 </a></p>
<p><iframe src="https://www.fss.or.kr/" name="view" width="700" height="500">
으로 작성할 수 있겠어요

먼저 기본적인 마우스로 클릭 시 바로가기 링크를 뜻하는 것은 a href="https://www.fss.or.kr/ 부분입니다 하지만 이렇게만 하게 되면 창이하나 열리면서 금융감독원 홈페이지로 가게 되죠 웹페이지 안에서 보게 하려면 target을 지정해주어야 해요 그러면 iframe에서 name에서 불러올 수가 있는 것이에요.

 

금육감독원

홈택스

 

 

 

 

 

지금 어딘가의 홈페이지를 보여준다거나 하는데 제법 유용할 거 같지 않나요?

또한 나의 설명을 보면서 체크를 하는 게 가능하지 않을까 싶네요.

 

아! 그리고 중요한 게 name="view" 이 부분이 왜인지는 정확히 모르지만 티스토리에서는 기본모드에서 완료를 하면 저장이 안 되더라고요. HTML모드에서 완성한 상태에서 포스트를 발행해야지만 정상적으로 저장이 되니 참고해 주세요.

 

앞으로 저도 잘 활용해 보도록 하겠습니다.