💻 Web/-- HTML | CSS

HTML 벼락치기 3 - 앵커(anchor) , iframe

내용이 많은 웹페이지의 경우 문서의 특정위치로 이동 할 수 있도록 링크를 거는 기능을 말합니다.

id속성을 이용하여 항목을 클릭하면, 그 항목과 연결된 본문으로 스크롤을 위치시킵니다.

앵커 생성

id값을 입력해주면 됩니다.

<p id="댕댕이">댕댕이 </p>

앵커와 연결되는 링크 생성

하이퍼링크와 같은 태그를 사용하며, URL은 "#" + "앵커 id"로 설정하면 됩니다.

<a href="#댕댕이"> 댕댕이 사진보기 </a>

img, pdf, ppt 등 모든 파일을 다운로드 가능하도록 링크를 만들 수 있습니다.

<a> 태그로 URL을 걸어주고, download만 써주시면 됩니다.

<a href="댕댕이.jpg" download> 댕댕이 사진 다운로드 </a>

웹 페이지의 내부에 또다른 내장 윈도우를 만들어서 다른 HTML페이지를 출력 가능하도록 해주는 기능입니다.

출력할 html문서의 url을 적어주고, 예외시(에러발생시) 출력될 문자열을 설정하면 됩니다.

<iframe src="register.html" width="200" height = "150"> 다른 브라우져로 접속해주세요 (iframe error)
</iframe>

(대형 포털사이트 (google, naver)등은 인라인 프레임으로 로드되지 않습니다.)

*iframe 태그안에 html문서 작성하기

srcdoc 속성을 사용하시면 됩니다.

<iframe src="아무거나.html"  width ="400" height="300" srcdoc="<html><head></head><body><h1>iframe의 srcdoc 속성으로 작성a되었음.</h1></body></html>">
</iframe>

srcdoc으로 html문서를 직접 작성하게되면, src=""의 html문서는 무시됩니다.

*타겟 속성으로 iframe에 하이퍼링크 출력하기

이전 포스팅에 있었던 <a href="URL">은 하이퍼 링크였습니다.

<a href = "링크주소(URL)" target="링크를 여는 방식" > 내용(텍스트 및 이미지) </a>

이때 iframe의 name을 설정해주고, <a href = "URL" target="iframe의 name>을 한다면, iframe에서 링크를 출력할 수 있습니다.

<iframe src="index.html" width = "300" height="300" name="아이프레임1"> </iframe>
<a href = "링크주소(URL)" target="아이프레임1" > 내용(텍스트 및 이미지) </a>

강아지

CSS 벼락치기 2 - 텍스트, 색 , 폰트 , 박스 (0)	2020.03.22
CSS 벼락치기 1 - 기초 구성(시트) , CSS적용 방법 , 셀렉터 (선택자, Selector) (0)	2020.03.20
HTML - web form , 폼 , input (0)	2020.03.19

Contents

새소식