html
HTML - 링크 만드는 요소
링크란
웹서핑을 하면서 글자나 그림을 클릭하면 다른 웹페이지나, 그림으로 연결되는 그 부분이 바로 하이퍼링크를 해놓은 부분입니다.
즉, 링크를 클릭하면 다른 장소로 이동할 수 있게 해주는 태그가 하이퍼 링크 태그라고 부릅니다. 링크 기본 구조는 다음과 같습니다.
<a>태그에서 사용할 수 있는 속성은 다음과 같습니다.
이미지에 링크 태그를 연결할 경우 다음과 같이 해주세요.
이메일 주소에 링크를 연결하고 싶다면 이렇게 하세요.
음악이나 영상에 링크를 연결하고 싶다면 이렇게 하세요.
다운로드 링크를 만들고 싶을 때 이렇게 해주세요. download 속성이 설정되면 링크가 가리키는 파일을 다운로드합니다.
여기서 앵커 이름은 임의로 할 수 있으며 <a>태그와 연결한 태그의 앵커 이름은 동일해야 합니다.
즉, 링크를 클릭하면 다른 장소로 이동할 수 있게 해주는 태그가 하이퍼 링크 태그라고 부릅니다. 링크 기본 구조는 다음과 같습니다.
<a href="링크 시킬 주소" target="_값" > 글자 </a>
<a>태그에서 사용할 수 있는 속성은 다음과 같습니다.
속 성 | 설 명 |
---|---|
href | 링크한 사이트나 문서, 또는 이미지 |
target | 링크한 내용을 새 창으로 보여줄지, 현재 창에 보여줄지를 설정.
|
download | 링크한 내용을 다운로드하게 합니다. |
rel | 현재 문서와 링크한 문서의 관계 |
hreflang | 링크한 문서의 언어를 지정. |
type | 링크한 문서의 파일 유형(mime-type)을 설정. |
이미지에 링크 태그를 연결할 경우 다음과 같이 해주세요.
<a href="링크 시킬 주소"><img src="그림 주소"></a>
이메일 주소에 링크를 연결하고 싶다면 이렇게 하세요.
<a href="mailto:메일주소">운영자에게 메일보내기</a>
음악이나 영상에 링크를 연결하고 싶다면 이렇게 하세요.
<a href="음악주소">제목</a>
다운로드 링크를 만들고 싶을 때 이렇게 해주세요. download 속성이 설정되면 링크가 가리키는 파일을 다운로드합니다.
<a href="#" download="파일 이름(또는 URL)">download</a>
앵커 만들기
페이지가 긴 문서에서 특정한 요소를 클릭하면 그 위치로 이동시켜주는 기능을 앵커라고 부릅니다.<h1 id="[앵커 이름]">제목</h1>
<a href="#[앵커 이름]">빠른 이동</a>
여기서 앵커 이름은 임의로 할 수 있으며 <a>태그와 연결한 태그의 앵커 이름은 동일해야 합니다.
<h1 id="anchor">제목</h1>
<a href="#anchor">빠른 이동</a>
0 댓글