Language/HTML
링크 및 이미지 관련 태그
아-니지
2025. 2. 17. 10:44
링크 및 이미지는 어떤 태그를 사용할까?
a 태그
--
a 태그는 HTML에서 내부 또는 외부에서 링크를 생성하여
웹 문서에서 다른 페이지, 파일, 이메일, 전화번호 등으로 연결할 때 사용하는 태그로
대상 경로를 의미하는 "href 속성"은 필수로 사용하고, 그 외에 "target 속성", "title 속성"을 선택해서 사용할 수 있다.
href 속성은
a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다.
href 속성 값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성 값일 수 있다.
만약 대상 경로가 명확하지 않아 잠시 보류할 때에는 대상 경로 대신 "#"를 넣으면 연결되지 않는다.
<a href = "#"> 링크 </a>
target 속성은
a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정할 때 사용한다.
속성 값 종류
- _self : (기본값) 현재 창에서 열기
- _blank : 새 창(새 탭)에서 열기
- _parent : 부모 프레임에서 열기
- _top : 최상위 프레임에서 열기
일반적으로 "_self"와 "_blank"를 제외하고는 거의 사용하지 않는다.
title 속성은
링크를 설명할 수 있는 텍스트를 작성한다.
(링크에 마우스를 올려놓으면 텍스트 박스로 설명이 나온다.)
기본 형식
<a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>
예시 코드
<a href="https://www.google.com" target="_blank" title="구글">구글 홈페이지 이동하기</a>
--
img 태그
--
HTML에서 이미지 객체를 삽입할 때 사용하며
"src 속성"과 "alt 속성"으로 구성된다.
src 속성은
이미지가 존재하는 경로를 입력하는 속성으로
이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치를 기준으로 경로를 작성한다.
이미지 경로에 사용하는 기호
- ./ : 현재 폴더
- ../ : 상위 폴더
alt 속성은
해당 이미지에 대한 설명할 수 있는 텍스트를 작성하는 속성으로
예상치 못하게 이미지가 나오지 않는 경우 이미지를 해당 텍스트로 대체하여 나온다.
기본 형식
<img src="이미지 경로" alt="이미지 설명">
예시 코드
<!-- 이미지 파일이 HTML파일과 동일한 폴더에 존재하며 이미지명이 test.jpg -->
<img src="./images/spring boot.png">
<!-- 이미지 파일이 HTML파일의 상위 폴더에 있는 images폴더에 존재하며 이미지명이 test.jpg -->
<img src="../images/spring boot.png">
--
이미지 링크 태그 작성 방법
--
이미지에 링크를 걸어서 이미지를 클릭하면 링크 이동하는 방법은
a 태그 안에 img 태그를 작성하면 해당 img 태그가 a 태그의 콘텐츠(내용)가 된다.
(a 태그에는 텍스트뿐만 아니라 여러 요소가 올 수 있다.)
기본 형식
<a href = "대상 경로">
<img src="이미지 경로" alt="대체 텍스트">
</a>
예시 코드
<a href = "https://www.google.com" target="_blank">
<img src="spring boot.png" alt="구글 이동">
</a>
--