링크(link)는 문서와 문서 간 연결을 의미하며, 기본적으로 a태그를 사용한다.
사진과 같은 이미지 객체를 삽입할 때는 img태그로 작성한다.
a태그
a 태그는 HTML에서 내부나 외부 링크를 생성한다.
a태그는 대상 경로를 의미하는 href속성을 필수로 사용해야 하며, 그 와 target, title 속성을 선택하여 사용할 수 있다.
<a href="이동 경로" target="링크 연결 방식" title="링크 설명"></a>href 속성
href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할때 사용한다. 속성의 값으로는 대상 경로의 주소(URL)
이나 내부 문서의 id값일수도 있다. 만약, 대상 경로가 명확하지 않을 경우 href 속성 값에 "#"을 넣어주면 된다.
그렇게 되면 a태그를 클릭해도 다른 페이지로 연결되지 않는 것을 확인할 수 있다.
만약, 다시 a태그를 외부 다른 페이지나 내부의 다른영역으로 이동해야 할 경우 href 속성 값을 알맞게 수정해주면 된다.
target 속성
target 속성은 a 태그로 링크를 생성할때 대상이 연결되는 방식을 지정한다.
target의 속성값
| _blank | 새로운 웹 페이지를 열어서 실행된다. |
| _self | 현재 웹 페이지에서 실행된다. |
| _parent | 현재 태그의 부모 태그에서 새 페이지가 실행된다. |
| _top | 최상위 태그에서 열린다. _parent와 비슷한 개념 |
가장 많이 사용하는 target의 속성 값은 _blank로 생각하면 된다.
target 속성값은 생략해도 a태그에 무관하다. 생략할 경우 default의 값은 _self로 실행된다.
title속성
title 속성에는 링크를 설명할 수 있는 텍스트를 작성한다. a태그로만 설명이 불가능할 경우 title태그를 이용하여
추가적인 설명을 작성할 수 있다. target속성과 마찬가지로 생략하여 a태그를 작성할 수 있다.
title을 사용하여 코드를 작성 시 어떻게 출력되는지 확인해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<title>a</title>
</head>
<body>
<a href="https://chocobol.tistory.com/" target="_blank" title="'초코의 블로그로 이동합니다.">초코의 IT세상이야기</a>
</body>
</html>
출력 값을 확인해보면 a태그 위에 마우스를 올려놓으면 title속성 값이 실행되는 것을 확인할 수 있다.
img 태그
HTML에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용하여 이미지를 삽입할 수 있다. img의 태그는
src 속성과 alt 속성으로 구성되어있다.
<img src="이미지 경로" alt="이미지 설명">src 속성
src는 삽입하려는 이미지 경로를 입력하는 속성이다. HTMl에서 이미지 경로는 웹 브라우저에서 실행되는
HTML 파일의 위치가 기준이다. src경로를 입력할 때 경로 입력에서만 몇 가지 약속이 있다.
| 기호 | 설명 |
| ./ | 현재 폴더 |
| ../ | 상위 폴더 |
삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 img폴더에 있고 이미지 파일의 이름과 확장자가
test.png일 경우 지금 현재 폴더를 의미하는./를 사용하여 이미지를 삽입해준다.
<img src="./img/test.png">"만약 HTML의 상위 폴더에 test.png 파일이 있다고 하면../ 기호를 사용하여 출력하도록 한다.
<img src="../img/test.png">상황에 따라 상위 폴더를 여러 번을 사용해야 할 경우가 있다. 그럴 때는 상위 몇 번째 폴더에 있는지 확인 후,
상위 폴더 개수에 맞게../기호를 사용해 주면 된다. 예를 들어 2개의 상위 폴더 위에 "test.png" 파일이 있다고 가정하면
"../../img/test.png"라고 작성하면 된다.
alt속성
alt속성은 이미지를 설명할 수 있는 속성이다. 만약 기존에 사용하고 있던 이미지가 있었는데 실수로 이미지가
날아가버려서 어떤 이미지인지 알 수 없을 경우에 alt 속성의 이미지 설명을 통해서 확인이 가능하다.
이미지가 소실되어 어떤 그림인지 모를 경우 alt 속성을 사용하여 내가 어떤 이미지를 사용하고 있었는지
알 수 있다.
이미지 링크
a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있다. 지금까지 배운
a 태그와 img 태그를 사용하면 이미지를 클릭할 시 코드로 설정되어있는 사이트로 이동이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>a</title>
</head>
<body>
<a
href="https://chocobol.tistory.com/"
target="_blank"
title="초코의 IT세상 이야기로 이동!"
>
<img src="./img/test1.jpg" alt="초코의 강아지 그림" />
</a>
</body>
</html>
a 태그와 img 태그를 사용하여 이미지를 클릭하면 a태그에 링크되어있는 경로로 이동하는 걸 확인할 수 있다.
'Front-end Developer > HTML' 카테고리의 다른 글
| 10. [HTML] <form>태그, <input>태그.<label>태그 (0) | 2022.10.25 |
|---|---|
| 7. HTML 목록 만드는 태그 <ul>,<ol>,<li>,<dl> (0) | 2022.10.23 |
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
