#HTML 강좌 - 이미지 삽입

앞 강좌를 거치지 않고 오셨다면 아래 링크를 따라가셔서 공부하고 오시기를 권해드립니다.

→ #HTML 강좌 - 표제테크(h)  줄바꿈테그(br/p)  수평선테그(hr)
→ #HTML 강좌 - 글자의 서식 , 주석처리 방법

■  html 을 사용해서 이미지 삽입하기

※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png" alt="다음로고" title="다음으로 이동">

위 소스를 메모장으로 붙여넣은다음 test.htm 으로 저장한후 실행해보세요. 저장하실때 파일형식을 모든파일로 변경하셔야합니다. 그러면 아래와 같이 이미지가 나타날것입니다.

이미지의 주소를 알면 이렇게 테그를 사용해서 이미지를 넣을수가 있습니다. 자 그럼 소스를 하나하나 분석해보도록 하겠습니다. 

<img src="주소"/> 의 형태가 기본골격입니다. src 는 주소를 의미합니다. 여기서 추가로 alt 라는 테그가 나오는데 이것은 이미지를 불러오지 못했을때 대안으로 나타날 텍스트 입니다. 가끔 인터넷이 불안전해서 이미지를 불러오지 못할때라던지 아니면 원래 이미지가 삭제가 되었다면 보는 사람은 당황스러울것입니다. 이럴때 대안으로 글자를 나타나게 할수가 있는데 이때 사용하는것이 alt 입니다. 그리고 마우스를 이미지에 가져갔을때 설명창을 뛰울수가 있는데 이때 사용하는 테그가 title 입니다. 아래와 같이 이미지에 마우스를 가져가면 설명 문구 "다음으로 이동"가 나옵니다.

그렇다면 이미지의 주소를 어떻게 알수가 있는지 의문이 듭니다.  제가 사용한 방법을 알려드리겠습니다. 

위 그림에서와 같이 다음 메인화면에서 다음 로고에 마우스를 가져간후 마우스 우클릭하면 이미지 주소 복사 라는 메뉴가 나옵니다 클릭하시면 이미지 주소가 복사되었습니다. 이 주소를 사용하시면 됩니다. 간혹 어떤사이트는 마우스 우클릭을 막아놓은 사이트도 있다는점 알아두시면 되겠습니다. 여기서 추가로 알아야 할것이 있습니다. 주소에는  절대주소와 상대주소가 있습니다. 

URL표기법은 2가지입니다.

→ 절대 주소
root 부터 시작하는 모든 주소
https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png
예제로 설명했던 다음로고의 주소는 모든경로가 표기된 절대주소입니다.

→ 상대 주소
현재 html 파일이 존재하는 경로를 기준으로 주소 기술
현재 html 파일이 있는 경로상에 "1.jpg" 라는 이미지가 있다면 이미지 주소는 "./1.jpg" 으로 표기합니다.
html 파일의 위치를 기준해서 표기하는 방식이 상대주소입니다.

그리고 또한가지 추가적으로 알아야 할것은 이미지 사이즈를 임의로 정할수도 있습니다. 이미지가 너무 커다면 사이즈를 지정해서 축소할수도 있습니다. 아래처럼 width 와 height 테그를 사용해서 사이즈를 지정하시면 됩니다. 

※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<img src="이미지주소" alt="대체텍스트" title="설명문구" width="300" height="300">

제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.