2016. 1. 18. 13:58ㆍlanguage/html
링크 연결이란 그림이나 글자와 다른 문서를 서로 연결하는 작업을 말한다.
클릭시 다른 사이트로 이동(네이버로 이동하거나 구글로 이동)하는 것도 링크 연결이 될 수 있으며 메일을 보낼 수도 있고 책갈피 처럼 클릭 시 원하는 위치로 스크롤링 되어지는 것도 링크 연결이라 할 수 있다.
링크 연결은 a 태그를 사용한다.
a 태그는 href 속성을 사용하여 설정된 주소로 링크연결 또는 위치 이동을 가능하게 해준다.
1.1 같은 문서 내의 링크
웹페이지에 현재 보고있는 html 강좌들이 하나의 페이지에 모두 나온다고 가정해보자.
인덱스 (목차) 가 없으면 보고 싶은 위치로 이동하려면 스크롤을 내려가며 직접 확인해야한다.
하지만 같은 문서 내에 링크를 걸어두면 원하는 위치로 바로바로 이동할 수 있다.
이해가 되지 않는다면 직접 해봐야 이해가 될것이다.
* 설정하는 방법
1) <a name="이름"></a> 을 이용하여 이동할 위치에 책갈피 설정을 한다.
2) <a href="#이름">글자나 그림</a> 를 이용하여 책갈피로 설정된 위치로 이동 할 수 있도록 링크를 설정한다.
ex) 같은문서내의링크.html
br 태그를 계속 입력한 이유는 줄바꿈을 많이 생성해서 스크롤을 강제로 만들기 위함이다.
직접 실습해보면 어떻게 이동되는지 쉽게 알 수 있다.
1.2 링크 연결
그림이나 글자와 다른 문서를 서로 연결하는 작업을 말한다.
내 홈페이지에서 다른 홈페이지로 이동 할 수도 있고 내 홈페이지 내에 다른 페이지로 이동할 수도 있다.
관리자에게 메일도 보낼 수 있고 네이버나 구글로 이동 시켜 줄 수도 있다.
* 설정하는 방법
그림이나 글자와 다른 문서를 서로 연결하는 작업을 말한다.
형식) <a href="문서명 또는 url주소">그림이나 글자</a>
<a href="mailto:이메일주소">그림이나 글자</a>
ex) 링크연결.html
결과는 직접 실습해 보길 바란다.
'language > html' 카테고리의 다른 글
HTML5 javascript 에서 Image 썸네일 만들기 (0) | 2016.04.15 |
---|---|
[HTML 기초 강좌] 11. CSS ( 스타일시트 ) 적용하기 (2) | 2016.01.18 |
[HTML 기초 강좌] 10. img map 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 9. Table 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 8. iframe과 target (8) | 2016.01.18 |
[HTML 기초 강좌] 6. img 태그 (8) | 2016.01.18 |
[HTML 기초 강좌] 5. 목록을 나타내는 ul 태그, ol 태그, dl 태그, li 태그 (10) | 2016.01.18 |
[HTML 기초 강좌] 4. hr 태그 ( 구분선, 수평선 ) (8) | 2016.01.18 |
[HTML 기초 강좌] 3.문자 형태 태그와 문장 형식 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 2. Header 태그와 Font 태그 연습 (4) | 2016.01.18 |