링크와 이미지 넣기 - src속성, alt속성, 이미지 링크(img)

1)img 태그와 alt 속성/ 이미지 경로 표시

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

​

여기에서 주의할 게 바로, "src 속성" 이다.

​

src 속성 -> 삽입하려는 이미지의 경로

​

★★★★ 기준 : 실행되는 HTML 파일의 위치 !

-html 파일의 위치를 기준으로 '이미지 파일의 경로'를 나타낸다.

​

★★ html파일과 같은 위치(현재 폴더) 에 있는 경우 사용하는 ./ 은 생락할 수 있음.

​

​

​

../ 은 상위 폴더에 있던 이미지파일을 불러온 것이고,

./은 html과 동일한 폴더에 있는 이미지 파일을 불러오는 상황이다.

​

짠!

 

 

적용된 모습

 

 

이렇게 내가 설정한 이미지를 삽입했다.

​

---

2) 이미지 링크

​

​-이미지 링크란 html에서 해당 이미지를 클릭하면 특정 웹 사이트로 이동할 수 있는 링크다.

​

지금부터 우리가 모두 잘 알고 있는 검색 엔진,

'구글' 로 이동하는 이미지 링크를 만들어 보려 한다.

 

 

<a href="대상 경로">

<img scr="이미지 경로" alt="대체 텍스트">

</a>

자 코딩 입력 후 html 웹에 가보자 .

​

구글 이미지버튼이 생성 되었다.

이미지버튼에 구글 링크주소를 연결해놓았고, alt 속성을 통해 설정한 "_blank"(새 창에서 열림) 를 구현하도록 했다. 

​

고로 구글 이미지를 클릭하면

​

새 창에서 구글 홈페이지가 열리는 것을 확인 할 수 있다. 

 

이렇게 src속성, alt속성, 이미지 링크에 대해 알아보았다!