#06 HTML 태그의 이해 - 3. 이미지 태그

<img src="이미지 파일의 경로 또는 url"> 

 

- 이미지 저장할 때 반드시 웹문서 저장법과 동일하게 공백없이 영문으로 저장.

- 웹문서를 작업하는 폴더에 불어오고자 하는 이미지 파일이 위치

- 너무  크거나 저화질의 작은 이미지는 최소화하기

- 글자와 같이 옆으로 나열되는 성격을 가지고 있으므로 단락 구분시 태그 부여

- 단독태그이다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡalt : 주석 (한글로도 작성 가능)

width: 이미지의 가로폭

height: 이미지의 높이

**고정비는 수정하지 않는 것이 좋다 (css를 통해 수정 가능)

 

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<img> 를 문서에선 세로로 써도 웹문서에서는 가로로 표현된다.

 

따라서 <br/>을 통해 단락을 구분할 수 있다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

공백을 주는 키를 눌러서 각 <img> 와 <img> 사이에 띄어쓰기를 발생시키면 사진사이에 여백이 생긴다.

 

 

이때, 공백을 없애고 <img src~><img src~> 처럼 붙여쓰면 다음과 같이 여백이 없이 표현된다.

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

===========================================================================

인덱스를 저장한 위치를 기준으로 사진의 위치를 표현해보겠다.

 

바탕화면에 img 라는 폴더를 만들고 2개의 사진을 넣어두겠다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

아래 사진에서 웹에  팬더와 카메라 사진이 뜨지 않는 이유가 무엇일까?

 

그건 바로 index가 위치한 경로와 사진이 위치한 경로가 달라졌기 때문이다.

따라서 다음과 같이 

<img src = "img/파일의 이름"> 을 통해 index가 위치한 경로의 어느 폴더 안에 있는지 표현할 수 있다.

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

그렇다면 img 폴더 안에 test 폴더 를 만들고 그 안에 camera-03.jpg을 넣어두겠다.

 

그랬더니 빨강 그림의 사진이 뜨지 않는다. 왜일까?

 

이것또한 위치가 달라졌기 때문이다. 

 

문서 표현식에 따르면 camera-03.jpg은 img 폴더 안에 있는데 

방금 내가 camera-03.jpg을 img폴더 안에 있는 test 폴더로 옮겼기 때문에 

경로가 일치하지 않는 것이다.

위처럼 <img src= "img/test/camera-03.jpg"> 로 표현하여 나타내야한다.

 

그림이 다시 나타나는 것을 확인할 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

 

이번엔 인터넷에 있는 사진을 표현해 보겠다.

 

먼저 불러올 사진의 이미지 주소를 복사한다.

 

 

똑같이 src="불러올 이미지의 주소" 로 표현하여 나타낼 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ===========================================================================

 

파일질라를 통해 도메인에 표현해보겠다.

 

먼저, html 폴더 안에 imgtest 폴더를 만들겠다.

 

그후, 바탕화면에 있는 index2, 팬케이크, img폴더를 도메인의 imgtest폴더 안에 넣겠다.

이때, 브라우저 주소창에 [주소/imgtest]를 입력하여도 웹문서가 뜨지 않는다. 

 

왜일까?

 

그 이유는 이 웹문서의 이름을 index가 아닌 index2로 저장하였기 때문이다.

 

 

따라서 [주소/imgtest/index2.html] 이라고 입력함으로써, index2로 저장했음을 명시해줘야 한다.

 

 

imgtest 폴더 안에 test 폴더를 만들겠다. 

 

 

그러고 imgtest 폴더에 있던 index2 와 팬케이크 사진을 test폴더로 옮기겠다.

 

html폴더 > imgtest > test폴더 안의 위치로 옮겨졌다.

 

 

 

이때, index2의 위치에 팬더사진은 없기 때문에 웹문서에 팬더사진은 뜨지 않는다.

 

 

 

그렇다면, 팬더 사진도 보이도록 수정해 보겠다.

 

다음처럼 ../  라는 표현을 통해 상위폴더를 지칭할 수 있다.

 

다음 사진은 [index2가 위치한 폴더보다 하나 윗 폴더에 들어있는 img 폴더안에 있는 판다사진.]

 

을 지칭한 것이다.

 

 

그후, 저장하고 index2를 도메인에 드래그하여 덮어쓰기 한다.

 

 

다시 [주소/imgtest/test/index2.html] 을 입력하여 들어가보면 판다사진도 보이는 것을 확인할  수 있다.