[HTML]이미지와 앵커, iframe, 하이퍼이미지, 이미지맵

비타민규·2023년 8월 2일

[HTML]

목록 보기
2/25

이미지와 앵커



Anker Tag : a -- link를 걸 경우 사용


a 문서읽기
여기서 ht하이퍼 텍스트. 요청된 파일로 덮어쓰기(탭 내에서 새로운 페이지 이동)
=>'a 문서'에는 a태그로 단순 href링크가 걸려있다(로컬호스트라 실제 작동은 안됨).

a 문서 속성_self읽기
target="_self"로 이 역시 같은 페이지 내에서 새로운 탭으로 이동한다.


a 문서 속성_new읽기
새로운 탭(=새로운 프레임)이 만들어짐. target="_new"이다
a 문서 속성_blank읽기
new랑 blank랑 같음
표기예시 : <a href="a.html" target="_blank">a 문서 속성_blank</a>읽기


다음 사이트로 이동
mpa멀티플 페이지. 과거에 많이 쓰던 방법. 링크,링크,링크로 넘어감
spa 싱글페이지. 메뉴누르면 현재 보는 한 페이지내에서만 뜸
(하이퍼 이미지의 예시)
사진을 클릭하면 '다음' 페이지로 간다.


  현재는 b.html내에서 이동함을 가정한다.
<a href="kbs/kbs.html">kbs 파일</a><br> =>webapp내부이니 kbs로 이동후(kbs/) kbs.html을 부른다
<a href="/java_web1/kbs/kbs.html">kbs 파일</a> => 혹은 현재 폴더명인 java_web1부터 경로를 지정해준다.

kbs폴더로 왔을 경우 <a href="../b.html"> </a>
<!-- ..점 두개는 한 단계 상위-->
  
<a href="/kbs/kbs.html">kbs 파일</a><br> <!-- root가 아니라서 오류남-->

<a href="kbs/mbc/mbc.html">mbc 파일</a>
  => kbs폴더의 mbc폴더에 들어가 mbc.html을 열어줌
<a href="tom.bin">tom 파일</a><br>

bin파일은 브라우저에서 해석할 수 없다. 해석할 능력이 없으면 사용자에게 넘기는데, 서버가 파일을 줘버린다(사용자는 bin파일을 다운로드 받게 됨)

<a href="mailto:mingyukings@naver.com">메일 작성</a>

한 개의 html문서는 한 개의 frame영역에 출력된다

여러 개의 html파일을 한 화면에서 보려면 iframe태그를 쓰면 된다.

프레임을 korea.com로 이동
- <iframe src="https://www.daum.net" width="80%" height="500" name="star"></iframe>
height는 %로 못 줌
  
🎈<a href="https://www.korea.com/" target="star">korea.com로 이동</a>
- iframe에서 name을 star로 줬다.
🎈앵커테그에서 target="star"로 잡고 하이퍼텍스트를 주면 iframe에서 하이퍼링크가 열리게 된다


이미지맵 : 이미지 특정 영역에 링크 걸기
<img src="images/daum.png" usemap="#good"> <!-- #걸고 이름줌-->
<map name="good">
	<area shape="rect" coords="200,0,100,100" href="https://www.daum.net/">
	<!-- x좌표, y좌표, 너비, 높이-->
</map>

<footer>
	여기는 바닥글
</footer>
profile
같이 일하고 싶은 개발자가 되어야지

0개의 댓글