민둥 개발자의 계발 블로그

HTML#5 이미지 태그 정답 공개! 본문

Study/HTML

HTML#5 이미지 태그 정답 공개!

민둥산의 민둥이 2022. 4. 18. 21:32

 사실 이번 문제는 정답이랄게 딱히 없습니다 하하. 이미지가 잘 나오거나 대체 텍스트가 잘나오면 성공하신 거에요!

만약 나오지 않는다면 경로 설정을 잘못하셨거나 오타가 난 겁니다. 우선 저는 이런 식으로 썼고 여러분들 코드는 다를 수 있다는 점!

 

<html>
 <head>
  <title>web image</title>
 </head>

 <body>
  <hr>
  <h1> web image </h1>
  &lt;img src="이미지 경로" alt="이미지 대체텍스트 "&gt;
  <h2>경로</h2>
  <ul>
   <li>절대경로 - 항상 고정된 주소</li>
   <li>상대경로 - 웹문서의 위치에 따라 달라지는 주소</li>
  </ul>

<h3>절대 경로로 이미지 넣기</h3>
  <img src="https://www.w3schools.com/images/colorpicker2000.png" alt="이미지가 없습니다">
  <img src="https://www.w3schools.com/images/w3lynx_200.png" alt="">
 
<h3>상대 경로로 이미지 넣기</h3>
  <img src="img/abend.jpg" alt="이미지를 불러 
올 수 있습니다.">
<p>
  <img src="img/png/monster.png" alt="monster 입니다^^">
  <img src="img/man.jpg" alt=" 이미지입니다">
  <img src="img/woman.jpg" alt="이미지를 불러올 수 없습니다." width="500">
  <img src="img/png/arrow-up.png" alt="적당한 글짜">
  <img src="../mqcap.jpg" alt="asd" width="400">
  <img src="../css/coffee2.jpg" alt="" width="600">
  <img src="../css/coffee2.jpg" alt="" height="600" width="600">
  <br>*원본 크기 그대로 적용시에도 가로 세로 크기를 적으면 이미지가 빨리 뜸.
</p>

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

★이미지 무료사이트<br>
 https://pixabay.com <br>
 https: //pexels.com<br>
 https://morguefile.com<br>
<h3>반응형 웹에서의 이미지</h3>
 picture, source 태그로 상황에 맞는 이미지를 불러옴.
  <img src="img/gif/face.gif" alt="face 입니다">
 </body>
</html>
반응형
저작자표시 (새창열림)

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

HTML 연습! HTML 로그인 페이지 만들기!  (4) 2022.04.24
HTML 연습! 클론 코딩으로 지뢰찾기 화면 UI 만들기  (4) 2022.04.21
HTML #5 이미지 태그!  (0) 2022.04.18
HTML 테이블 추가 문제 정답 공개!  (0) 2022.04.18
HTML#4 정답 공개 및 추가 문제!  (0) 2022.04.18
'Study/HTML' Related Articles more
Comments