링크 만들기

링크 만들기

• '링크'는 웹 문서가 다른 문서와 구별되는 가장 큰 특징입니다.
  클릭만 하면 연결된 곳으로 즉시 이동해 웹 사용을 더욱 편리하게 해주기 때문입니다.

<a> 태그, href 속성 - 링크 만들기

• 링크를 만드는 <a> 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 됩니다.
• 링크를 이용해 다른 문서나 사이트로 연결하려면 많은 속성들 중 기본적으로 href 속성을 이용해 주소를 지정해야 합니다.

기본형 : <a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>
               <a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>

1. <a> 태그 안에서 사용할 수 있는 주요 속성

속 성	설 명
href	링크한 문서나 사이트의 주소를 입력합니다.
target	링크한 내용이 표시될 위치(현재 창 또는 새창)를 지정합니다.
download	링크한 내용을 보여 주는 것이 아니라 다운로드 합니다.
rel	현재 문서와 링크한 문서의 관계를 알려줍니다.
hreflang	링크한 문서의 언어를 지정합니다.
type	링크한 문서의 파일 유형을 알려줍니다.

2. 텍스트 링크의 밑줄과 글자 색 바꾸기

• 텍스트 링크는 기본적으로 밑줄이 있는 파란색 글자로 표시됩니다. 이렇게 하면 화면에 있는 여러 텍스트 밑줄 중에서 링크로 사용되는 텍스트를 구별하기 쉽기 때문입니다.
• 또한 텍스트 링크를 클릭해 링크된 내용을 한 번 살펴보고 나면 텍스트 링크 색은 보라색으로 바뀝니다. 그리고 텍스트 링크를 누르고 있으면 즐 링크를 활성화시키면 글자 색은 빨간색으로 바뀝니다.
• 이런 밑줄이나 색을 없애거나 바꾸고 싶을 경우 CSS의 text-decoration: none; 을 이용해 밑줄을 없애거나 color : black; 을 이용해 색을 바꿀 수 있습니다.

a태그를 이용해 링크만 걸었을 때

a 태그를 이용한 후 CSS로 밑줄과 색을 변경했을 경우

<style>
.exam1 {width: 300px; height: 80px; border: 2px solid pink; padding: 40px 0 0 40px;}
.exam1 a {text-decoration: none; color: black}
</style>

target 속성 - 새 탭에서 링크 열기

• 링크된 이미지나 텍스트를 클릭하면 문서가 현재 브라우저 창에서 나타나게 되서 예전 문서로 되돌아가려면 브라우저 창의 [이전 페이지] 버튼을 눌러야 하는데 target 속성을 사용하면 현재 화면 뿐만 아니라 새로운 화면에서도 링크를 열 수 있습니다.
• 현재 페이지 안에 캥거루처럼 다른 페이지를 넣을 수 있는데 이때 사용하는 것이 아이프레임(iframe) 입니다. 아이프레임은 프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것을 말합니다.
• <iframe> 태그를 이용해 현재 문서에 다른 문서를 포함시키거나 자바스크립트를 이용해 팝업 창을 열도록 했을 때 현재 문서는 부모 문서가 되고 <iframe> 으로 삽입된 문서와 팝업 문서는 자식 문서가 됩니다. 자식 문서에서 링크할 때 target을 _parent 속성으로 지정하면 부모 문서 창에 표시할 수 있습니다.

target 속성에서 사용할 수 있는 값

속성 값	설 명
_blank	링크 내용이 새 창이나 새 탭에서 열립니다.
_self	target 속성의 기본 값으로 링크가 있는 화면에서 열립니다.
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시합니다.
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시합니다.

한 페이지 안에서 점프하는 앵커 만들기

• 특정 요소를 틀릭해 다른 페이지로 이동하지 않고 한 페이지 내에서도 이동하는 링크를 만들 수 있습니다. '앵커(anchor)'라고 불리는 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와줍니다.
• 예를 들어 인터넷 서점의 웹 사이트에서 책 정보를 볼때 한 페이지에 모두 들어있어 긴 문서가 나열 되어 있지만 목차 부분을 클릭하면 목차 내용이 있는 위치로 바로 이동할 수 있는 것이 그것입니다.
• 앵커는 한 페이지의 내용이 너무 길거나 서로 구분할 내용으로 구성되어 있는 경우 사용하면 편리합니다.
• 앵커를 사용하려면 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정해야 합니다. 이렇게 붙여 놓은 앵커 이름들은 마치 링크를 만들 때처럼 <a> 태그의 href 속성을 사용해 링크합니다. 다만 앵커 이름 앞에 #을 붙여 앵커를 표시합니다.

기본형 : <태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
               <a href="#앵커 이름"> 텍스트 또는 이미지 <a>