HTML 따라하기 5일 차 | 이미지 만들기

<img src="" alt="">

- 종료</img>가 없음

- src="./파일경로"를 사용하여 인터넷이나 자신의 컴퓨터에서 이미지를 불러옴

- alt="대체텍스트"를 사용하여 사진을 가져오지 못할 경우 alt안의 텍스트로 대체함

- 사용법 : <img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="구글기본이미지">

- 결과 :

구글기본이미지

절대 경로

- 웹 문서의 위치와 상관없는 고정된 주소

- 실행 파일의 위치와 상관 없이 절대 경로는 항상 같은 주소를 가르킴

- 내 컴퓨터에서의 사용법 : <img src="C:/Users/ITWILL/Desktop/HTML/img/map.jpg" alt="map">

- 인터넷에서의 사용법 : 맨위의 https://의 사용법과 동일

상대 경로

- 웹 문서의 위치에 따라 변동되는 주소

- 실행 파일의 위치가 달라지면 위치에 따라 경로가 바뀔 수 있어서 파일을 옮기면 바꿔줘야 함

- 점 하나의 ./는 현재폴더, 점 두개의 ../는 이전폴더를 나타냄

- 사용법 : <img src="../css/coffee2.jpg" alt="coffee2">

width & height

- 태그의 크기를 결정 시켜줌 (이미지가 너무 크다면 크기를 줄이자)

- 사용법 : <img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="구글기본이미지" width="100">

- 결과 :

구글기본이미지

예시 코드

<html>
 <head>HTML 따라하기 4일 차 | 테이블 만들기
  <title>html 5Day</title>
 </head>
 <body>
<hr>
<h1>web image</h1>
&lt;img src="이미지 경로" alt="이미지 대체텍스트"&gt;

<img src="" alt="">



<h2>경로</h2>
<ul>
 <li>절대 경로 - 항상 고정된 주소</li> 
 <li>상대 경로 - 웹문서의 위치에 따라 달라지는 주소<br>
   하위폴더는 폴더명/를, 상위폴더는 이동 횟수만큼 ../를 파일명 앞에 추가함.
 </li> 
</ul>

<h3>절대 경로로 이미지 넣기</h3>
<img src="https://www.w3schools.com/images/colorpicker2000.png" alt="colorpicker"> 

<img src="https://www.w3schools.com/images/w3lynx_200.png" alt="banner">

<img src="C:/Users/ITWILL/Desktop/HTML/img/map.jpg" alt="map">

<h3>상대 경로로 이미지 넣기</h3>
<p>하위폴더 img안에 있는 이미지 <br>
 <img src="img/woman.jpg" alt="woman"><br><br>
 
 하위폴더 img안에 png안에 있는 이미지 <br>
 <img src="img/png/monster.png" alt="monster">
 <img src="img/png/arrow-up.png" alt="arrow-up"><br><br>


 한단계 상위폴더의 하위폴더 css안에 있는 이미지 <br>
 <img src="../css/coffee2.jpg" alt="coffee2" width="600">
</p>
<img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="구글기본이미지" width="200" height="200">
<hr>
<h3>width/height 이미지의 가로/세로 크기 지정 속성 </h3>
<p> width="600" 지정 <br>
 <img src="../css/coffee2.jpg" alt="coffee2" width="600">
 <br><br>
  height="600" 지정 <br>
 <img src="../css/coffee2.jpg" alt="coffee2" height="600">
 <br><br>
 width="600" height="600" 지정 <br>
 <img src="../css/coffee2.jpg" alt="coffee2" width="600" height="600">
 <br>
 * 원본 크기 그대로 적용시에도 가로 세로 크기를 적으면 이미지가 빨리 뜸.
</p>

<h4>웹용 이미지 형식 대표 3가지 특징</h4>
 <ul>
  <li>*.gif - 최대 256가지의 색 표현 가능. 단순한 로고, 아이콘, 버튼 등에 적합.
     투명 배경 지원, 움짤 가능.  </li>
  <li>*.jpg - 트루색상 표현 가능. 실사 느낌의 사진 적합. </li>
  <li>*.png - 트루색상 표현 가능. 투명 배경 지원. </li>
 </ul>

<!--
 ★ 이미지 무료사이트 ★ 
 https://pixabay.com
 https://pexels.com 
-->

<h3>반응형웹에서의 이미지</h3>
  picture, source 태그로 상황에 맞는 이미지를 불러옴.

 <!-- https://www.w3schools.com/html/html_images_picture.asp -->

 
 </body>
</html>

예시 코드 | 결과

저작자표시 (새창열림)

'Web > HTML' 카테고리의 다른 글

HTML 따라하기 7일 차 \| iframe (0)	2022.05.20
HTML 따라하기 6일 차 \| 하이퍼 텍스트 링크 만들기 (0)	2022.05.20
HTML 따라하기 4일 차 \| 테이블 만들기 (0)	2022.05.19
HTML 따라하기 3일 차 \| 목록 만들기와 특수 문자 태그 (0)	2022.05.19
HTML 따라하기 2일 차 \| HTML주석과 글자를 변경하는 tag들 (0)	2022.05.19