6. HTML - 이미지 넣기

[이미지 태그의 속성]

속성	설명	비고
<img>	이미지 태그 img[] + Tab 가능	이미지 url + 아래 속성 입력 가능
src	이미지 원본파일 경로	절대 경로 또는 상대 경로
src 절대 경로	src="이미지 url 입력"
src 상대 경로	src="./ 해당 폴더에 있는 이미지 파일 선택"
alt	대체 텍스트, src 이미지 설명 이미지 파일 손상시 이를 설명하는 텍스트	원본파일 손상시 이를 설명하는 텍스트
title	툴팁 마우스로 이미지에 가져다 댔을 때 설명	alt를 넣지않거나, alt 내용과 중복은 안됨
width	너비	픽셀 단위의 정수
height	높이	픽셀 단위의 정수

#1. img[] + Tab : 자동 생성됨

  <img src="" alt="">

#2. src 절대 경로 src="이미지 url" 

  <img 
  src="https://showcases.yalco.kr/html-css/01-05/coding.png" 
  alt="코딩중인 노트북"
  title="프로그래밍"
  >

#3. src 상대 경로 src="이미지_파일명"

A. 이미지 파일을 index.html 파일과 같은 경로에 위치시킨다.

B. src=""부분에 ./이미지 파일명 을 입력한다

  <img src="" alt="">
  <img 
  src="./coding.png"
  alt="코딩중인 노트북"
  title="프로그래밍"
  >

./coding.png : 현재 디렉토리에서 coding.png를 찾아라

 

위와 같은 디렉토리 경로일 경우,

  <img src="" alt="">
  <img 
  src="../images/coding.png"
  alt="코딩중인 노트북"
  title="프로그래밍"
  >

../ : 현재 디렉토리에서 나간다.

images/coding.png : images라는 디렉토리에서 coding.png라는 파일을 찾아라

 

#4. width, height : 가로 세로 넓이

width or height 중 하나만 사용하여 입력하면,
현재 사진의 비율을 유지한채로 입력된 픽셀 크기로 변경