모행

[웹프로그래밍 기초강좌 - HTML 07]

HTML 이미지태그​

(HTML기초강좌 7강)

- <img> 태그는 웹페이지에 이미지를 삽입할때 사용됩니다.

- <img> 태그는 닫는태그가 없는 태그입니다.

- <img> 태그는 두개의 필수 속성이 있습니다.

-필수 alt속성은 사용자가 어떤 이유로 이미지를 볼 수 없는 경우(느린 연결, src 속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지에 대한 대체 텍스트를 제공합니다.

1) 절대경로  

Q. 우리은행이 어디에 있나요?
A. 경기도 안양시 동안구 벌말로66 1층에 있어요~

- 현재위치가 어디이든 한번에 갈 수 있는 고유한 경로(주소) 입니다.

- 예) C:\Users\Desktop\블로그\01.HTML\07.이미지태그

- 예) https://molra0000.tistory.com/

2) 상대경로

Q. 우리은행이 어디에 있나요?
A. 쭉직진해서 오른쪽 골목으로 들어가면 1층에 있어요~

- 현재위치를 기준으로 경로를 작성하는 방법입니다.

- 현재 코드를 작성중인 위치(폴더)를 기준으로 작성한 상대적인 경로입니다.

- 예) <img src="dophin.jpg>  : 현재 작성중인 파일과 같은 폴더 안에  이미지가 있습니다.

- 예) <img src="../dolphin.jpg" : 현재 작성중인 파일 상위 폴더 안에 있습니다.

/ : 가장 최상위 디렉토리 (root)로 바로 이동
./ : 현재 디렉토리를 의미합니다. 생략가능
../ : 상위 디렉토리
../../ : 두 단계 위의 디렉토리

<실습코드>

  <p>기본이미지-크기미지정</p>
  <img src="dolphin.jpg" alt="돌고래">
  
  <p>이미지 크기지정 가로500,세로300</p>
  <img src="dolphin.jpg" alt="돌고래" width="500" height="300">

<실행화면>