[HTML] HTML 링크와 이미지 넣기

Oli-Viaaaa 2023. 6. 25. 22:55

링크(link)는 문서와 문서 간 연결을 의미하며, 기본으로 a 태그를 사용한다.

사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다.

1. a 태그

a 태그는 HTML에서 내부나 외부 링크를 생성한다.

대상 경로를 의미하는 href 속성을 필수로 사용해야하며, 그 외의 target, title 속성을 선택해서 사용할 수 있다.

<a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>

- href 속성

href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다.

속성값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성값일 수 있다.

<a href="#">링크</a>

- target 속성

target 속성은 a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정한다.

속성값으로 _blank, _parent, _self, _top을 사용할 수 있지만 _blank를 제외하고 거의 사용하지 않는다.

href 속성과 다르게 target 속성은 생략이 가능하다.

_blank	새 윈도우창을 열어서 웹페이지를 연다(기존의 창 존재)
_self	현재 윈도우창에 그래도 링크된 페이지를 연다(현재의 프레임)
_parent	현재 프레임의 부모 프레임에서 새 웹페이지가 열린다
_top	최상위 프레임에서 열린다

- title 속성

title 속성에는 링크를 설명할 수 있는 텍스트를 작성한다.

a 태그의 콘텐츠만으로 표현하지 못한 설명을 적으면 되는데 target 속성과 마찬가지로 생략이 가능하다.

<a href="https://www.example.com" title="이 링크는 예시 웹사이트로 이동합니다.">예시 링크</a>

2. img 태그

HTML 에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용한다. img 태그는 src 속성과 alt 속성으로 구성된다.

<img src="이미지 경로" alt="이미지 설명">

src 속성

src(source)는 삽입하려는 이미지의 경로를 입력하는 속성이다. HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준이다

--이미지 경로에 사용하는 기호

기호	설명
./	현재 폴더
../	상위 폴더

HTML 파일과 이미지가 동일한 images폴더에 위치한 경우

<img src = "./images/card/jpg">
<img src = "images/card/jpg"> // 현재 폴더를 의미하는 ./ 기호 생략 가능

이미지가 HTML의 상위 폴더인 images 폴더에 있는 경우

<img src ="../images/card.jpg">
<img src ="../../images/card.jpg"> // 상위 폴더의 상위폴더 위치

- 상위 폴더 기호의 경우 여러번 사용 가능

alt 속성

alt 속성에는 삽입한 이미지 객체를 설명할 수 있는 텍스트 삽입 가능HTML 파일과 동일한 폴더에 있는 card.jpg파일을 삽입하고 설명을 넣고 싶다면 img 태그에 src속성과 alt속성을 사용해 아래와 같이 작성할 수 있다.

<img src="./images/card.jpg" alt="생일 축하 카드">

a 태그 안에 img태그를 사용할 수 있는데 그렇게 되면 이미지를 클릭했을 때 특정 링크로 이동이 가능하다

형식>
<a href="대상 경로">
	<img src="이미지 경로" alt="대체 텍스트">
</a>

예시>
<a href="http://www.google.com" tatget="_blank">
	<img src="./goole_logo.png" alt="구글로그">
</a>