img tag

• 이미지 삽입 태그
• 사용법
  

1

<img src="이미지주소" alt="src오류시 나오는 내용">

▶ src

• 넷상의 이미지 주소를 가져올 때

1
2

<!-- 이미지주소 변경되면 에러! -->
<img src="https://images.pexels.com/photos/2449543/pexels-photo-2449543.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"> 

• 결과

• 
  Aaron Burden 님의 사진, 출처: Pexels

• 컴퓨터에 저장되어 있는 이미지를 가져올 때

1
2

<!-- 경로 설정 주의! -->
<img src="../../../assets/imgs/html_01_00.jpg">

• 결과
  • 
    Bekir Donmez 님의 사진, 출처: Pexels

    ▶ alt(이미지 오류)

• 1	<img src="" alt="이미지 없다">

샘플 이미지 사용하기

• https://via.placeholder.com
• 주로 임시로 이미지의 크기, 위치 등을 설정할 때 사용

사용방법

• 1 2	<img src="https://via.placeholder.com/200" alt="200x200"> <!-- 200 x 200 샘플 이미지 생성 -->

• 결과 :
  

가로 세로 다른 크기 설정

• 1	<img src="https://via.placeholder.com/200x300" alt="200x300">

  • 가로x세로
• 결과 :
  

확장자 지정(png, jpg, jpeg, gif)

• 1 2 3 4 5 6

  <!-- jpg --> <img src="https://via.placeholder.com/200x300.jpg"> <!-- png --> <img src="https://via.placeholder.com/200x300.png"> <!-- gif --> <img src="https://via.placeholder.com/200x300.gif">

• 결과 :
  

  이미지 내부 텍스트 입력

• 1	<img src="https://via.placeholder.com/200?text=this+is+test">

• 띄어쓰기 부호 : +
  • hello,+world >> hello, world
• 결과 :
  

이미지 색상, 글자 색상 지정

• 1	<img src="https://via.placeholder.com/200/000000/ffffff?text=img+color,+txt+color">

  • placeholder주소/이미지크기/이미지색상/폰트색상?텍스트
  • 색상 : hex color code 사용
• 결과 :