링크 및 이미지 관련 태그

 

 

 

---

 

링크 및 이미지는 어떤 태그를 사용할까?

 

 

---

 

 

 

 

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>

--