개발 공부 기록하기

[생활코딩] 8강. 링크(link) <a> 본문

프밍/HTML

[생활코딩] 8강. 링크(link) <a>

태영(泰伶) 2022. 10. 2. 18:40

보통 웹페이지들의 어떤 text 등과 연결된 문서.

 

복습,,

HTML = Hypertext Markup Language

 

여기서 Hypertext의 의미가 이러한 link 시스템을 가진 문서 체계이다.

 

 

<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>

 

'링크이름' 부분이 <a> tag의 content 영역.

 

<a>의 속성

href link를 클릭했을 때 이동해야 될 바로 그 연결된 문서 주소(URL) 작성.
title 링크 위로 롤오버(rollover)했을 때 도움말 같은 것이 뜨는 것.
content영역에 적힌 링크이름만으로는 설명이 부족하다고 생각할 때, 부가 설명을 하기 위함임.
이 설명을 잘 적어두게 되면 검색엔진에서 노출되고 사용자가 원하는 적합한 정보를 제공하기에 유리하니까 성실하게 적어두는 게 중요함.
꼭 작성해야하는 건 아님.
target 지금 창에서 링크의 주소로 이동할지, 아니면 새 탭에서 그 주소로 이동할지 지정.

_self        : 현재의 문서가 로드된 프레임, 현재 문서 사라짐. 
_blank     : 새로운 창(탭)을 띄우고 거기에 문서를 로드.
_parent    : 현재 문서가 frame이나 iframe에 로드된 경우 현재 문서를 로드한 프레임에 문서를 로드.
프레임(frame) 이름

 

 

강의에서 나온 예제로 클론 코딩해보자ㅎㅎ

<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		</head>
		<body>
			<p>
				<a href="https://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.
			</p>
			<p>
				<a href="https://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새 창에서 생활코딩 홈페이지를 연다.
			</p>
			<p>
				<a href="https://opentutorials.org/course/1" target="_self">생활코딩</a> : 현재 프레임에서 생활코딩 홈페이지를 연다.
			</p>
			<p>
				<a href="https://opentutorials.org/course/1" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다.
			</p>
			<p>
				<a href="https://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개</a> : 생활코딩의 HTML 소개 페이지 중 참조 부분으로 문서를 이동한다.
			</p>
		</body>
	</html>

↓

네 번째 '생활코딩'에 마우스 커서를 대고 캡처했다.

 
  • 첫 번째 '생활코딩'을 누르면 지금 켜진 그 탭에서 미리 href로 지정해둔 홈페이지가 열린다. (href외에는 아무런 속성을 지정하지 않았다.)

 

  • 두 번째 '생활코딩'을 누르면 새로운 탭이 켜지면서 그 비어있는(_blank) 탭에서 href로 지정해둔 홈페이지가 열린다.

 

  • 세 번째 '생활코딩'을 누르면 첫 번째처럼 지금 켜진 그 탭에서 미리 href로 지정해둔 홈페이지가 열린다. (즉, _self가 default값임을 알 수 있다.)

 

  • 네 번째 '생활코딩'에 마우스를 가져다 대면 title 속성값으로 적어두었던 '생활코딩 홈페이지'가 도움말처럼 나타난다.

 

  • 다섯 번째의 'HTML 소개'를 누르면 href로 지정해둔 페이지의 특정 부분까지 자동으로 스크롤이 내려가서 화면에 띄워준다. 북마크 기능이라고 한다. (오래된 강의라 그런지 똑같이 코드를 쳤는데, 없는 페이지라고 나온다ㅠㅠㅠ)

 

<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="Content-type" content="text/html; charset=utf-8"
		</head>
		<body>
			<iframe name="sample" src="https://w3c.org" width="100%" height="300"></iframe>
			<a href="https://opentutorials.org" target="sample">아이프래임</a>
		</body>
	</html>

↓

프레임(frame) = 하나의 문서 안에 다른 문서를 로드(load)할 수 있는 기법.

 

그 중에서도

아이프래임(iframe) = 문서 한 가운데에 자신이 원하는 공간을 뻥 뚫어서 원하는 문서를 위치시키는 기법.

 

 

target속성의 속성값이 바로 윗줄의 iframe tag의 name 속성값과 일치하므로,

생성된 웹페이지의 '아이프래임'부분을 누르면 w3c 페이지가 load된 바로 저 위치에 '아이프래임'에 연결된 문서(웹페이지)가 뜬다.

 

이렇게ㅎㅎ

 

 

그리고 저 소스 코드에서 target 속성과 그 속성값을 지우면!

연결된 문서인 opentutorials.org/는 켜져있는 바로 요 탭에서 

이렇게 전체화면으로 나온다.

저작자표시 비영리 변경금지

'프밍 > HTML' 카테고리의 다른 글

[생활코딩] 10강. 줄바꿈 <br/>  (0) 2022.10.02
[생활코딩] 9강. 문단 <p>  (0) 2022.10.02
[생활코딩] 7강. <body> tag  (0) 2022.10.02
DAY 3. <form>에서 사용하는 tag  (0) 2022.08.21
DAY 3. <input> tag에서 주로 사용하는 속성  (0) 2022.08.21
'프밍/HTML' Related Articles more
Comments