[HTML] 사진,지도 삽입

(img) 태그를 이용해서 웹브라우저에 이미지를 삽입하기전에 절대 경로와 상대 경로에 대해서 알 필요가 있습니다.

이미지를 불러오기 위해서는 현재 위치를 기준으로 해서 이미지를 불러오는 상대 경호와 웹페이지나 파일이 가지고 있는 고유한 경로인 절대 경로가 있다.

 

여기서 body 태그 안에 img태그를 만들 것인데 이미지 태그의 속성으로는 src와 alt가있습니다. src는 이미지를 불러오기 위한 주고 값이고 alt는 원하는 이미지를 불러오지 못하였을 때 나타나는 텍스트 값이다.

 

 

이미지 주소를 넣지 않도 그대로 Live Server를 실행하면 alt에 입력한 대체 텍스트라는 문구가 나타납니다. 다른 무장을 적어도 상관 없습니다.

 

이미지를 html에 뛰우기 위해서는 scr 속성 부분에 값을 입력해 주어야 합니다. 먼저 상대 경로를 이용하기 위해서는 현재html파일 기준 같은 풀더에 있는 image폴더를 선택하고 근 안에 있는 파일을 찾아야 하기 때문에 image 폴더를 입력하고 (원래 같은 폴더 위치에서 찾을 때는 ./image와 같은 표현을 사용하지만 ./ 은 생략해도 됩니다.)

/ 뒤에 파일 이름을 입력해주면 됩니다. 또는 image/ 까지만 입력하면 안에 있는 파일이 자동완성으로 파일명이 뜹니다.

(이미지를 public 폴더에 넣은 상태다)

 

 

 

HTML파일 기준으로 상대경로를 이용햐 이미지를 삽입했다면, 이제는 절대 경로에 대해서 알아보겠습니다.

KIWEB 학원 사이트를 이용해서 경로와 이미지를 붙이겠습니다.

 

 

 

 

클릭시 웹사이트 경로로 이동한다.

 

 

이미지 위치 이동

태그 모양(이미지를 가운데 정렬): display:block; margin:0 auto;

 

참고: 위 예에서는 마진(margin)을 margin: 0 auto; 로 하였습니다. 이렇게 하면, 이미지의 위쪽과 아래쪽 여백은 (0)이 됩니다.
ㅇ 이미지의 위쪽 아래쪽 여백을 (0)으로 하지 않으려면, margin: 0 auto; 대신에, margin-left: auto, margin-right: auto; 로 하면 됩니다.
ㅇ 이미지의 위쪽 아래쪽 여백을 설정하려면, margin: 20px auto 20px auto; 와 같이 위쪽 아래쪽 여백에 수치를 지정하면 됩니다. 마진의 여백 수치 순서는 margin: 위쪽 오른쪽 아래쪽 왼쪽 여백 순서입니다.

참고: 위 예에서, display: block; 속성을 준 것은, 이미지를 하나의 블록(영역)으로 잡아주기 위한 것입니다. 바꾸어 말하자면, 이미지를 하나의 독립적인 블록으로 잡아 주고, 좌우의 여백(margin)을 자동(auto)으로 설정해 줌으로써, 좌우 여백이 동일하게 되고, 결과적으로 이미지가 블록의 가운데에 위치하게 됩니다.

 

.style img {
  display: block;
  margin: 0rem auto;
  width: 35rem;
  height: 30rem;
}