html 링크
- 프로그래밍/웹사이트
- 2019. 8. 2.
html 링크
오늘은 html에서 중요한 링크에 대한 내용입니다.
- 1. 연습할 html 문서 만들기.
- 2. 링크 연습하기.
1. 연습할 html 문서 만들기
이름은 원하는 것으로 만들고 뒤에 확장자를 html로 해서 만들어주세요.
그 후 메모장이나 ATOM에디터 같은 수정할 수 있는 프로그램으로 아래 내용을 추가해주세요.
<!DOCTYPE html>
<html>
<head>
<title>타이틀입니다.</title>
<meta charset="utf-8">
</head>
<body>
<p>본문 입니다.</p>
</body>
</html>이렇게 html 구조에 맞게 html문서를 만들었으면 본격적인 내용으로 넘어가겠습니다.
2. 링크
링크를 사용하기 위해 필요한 태그는 <a>태그 입니다.
(anchor의 약자를 사용함.)
물론 그렇다고 아래와 같이 a태그만 사용하면 링크가 걸리지 않습니다.
2-1. href
원하는 곳으로 링크를 걸기 위해서는 href(HyperText Reference)를 추가해줘야 합니다.
아래 사진처럼 a태그에 href를 추가하고 뒤에 주소를 추가해줍니다.
(ex) <a href="https://intunknown.tistory.com/">링크</a>
이제 크롬으로 열어보겠습니다.
링크는 잘 작동하네요.
하지만 이렇게 링크를 걸게 되면 문제가 하나 있습니다.
(이 문제는 취향 차이입니다.)
바로 링크가 새 창에서 열리지 않는다는 것입니다.
2-2. target, title속성
위의 문제를 해결하기 위한 방법으로는 target속성을 주는 방법이 있습니다.
target="_blank"를 href태그 뒤에 추가해주면 새 탭에서 링크가 실행됩니다.
(ex) <a href="링크" target="_blank">내용</a>
그럼 title속성은 뭘까요?
해당 링크가 어떤 내용을 담고 있는지 설명하는 미리 보기 문구를 설정하는 것입니다.
이 속성 역시 target처럼 a태그 안에 넣어주시면 됩니다.
(ex) <a href="주소" target="_blank" title="설명할 내용">내용</a>
브라우저로 실행해서 링크에 마우스를 올리면 아래 사진처럼 title로 설정한 문구가 출력됩니다.
