[HTML] HTML - 2

그림 (Image)

• 인라인 레벨
• 〈img〉,〈img/〉
• 주요 속성
  • alt : 이미지 대신 나타낼 텍스트 (이미지 로드 실패를 대비)
  • src : 이미지 경로
    • 절대 경로 : 사용이 불가
    • 상대 경로 : 사용이 가능
      • 상위폴더 : ..
      • 현재폴더 : .
    • 웹 경로 : 사용 가능
  • width : 이미지 너비 지정
  • height : 이미지 높이 지정
    • 주의. width와 height 중 하나만 지정할 것 (하나만 조정하면 전체 비율을 유지)
• 절대 경로

  <img alt = "사랑해" src = "C:\GDJ\images/like.png">

• 상대 경로
  C:/GDJ/webstudy/HTML/05_image.html
  C:
  ㄴGDJ : 상위 x 2 (../..)
  ㄴ webstudy : 상위 폴더
  ㄴ HTML : 현재 폴더

  <img alt = "사랑해" src = "../../images/like.png">

• 웹 경로

   <img alt = "오징어게임" src = "https://search.pstatic.net/common?type=o&size=174x242&quality=75&direct=true&src=https%3A%2F%2Fcsearch-phinf.pstatic.net%2F20211222_272%2F1640172866420MTXVN_PNG%2Fbda18900d5a1cf82b4a6167678c88958.png">     

링크만들기

• 인라인 레벨

• 〈a〉 〈/a〉

• 주요 속성

  • href : 링크 경로 작성
  • title : 풍선 도움말 (마우스를 대면 나타나는 메시지)
  • target : 어떤 창으로 이동할 것인가?
    • _self : 현재 창으로 이동 (디폴트)
    • _blank : 새 창으로 이동

• 비어있는 링크
  <a href="#">비어있는 링크 1</a>
<a href="javascript:void(0)">비어 있는 링크 2(완전 아무일도 없음)</a>

• 웹 링크
  <a href="htp:/www.google.com" target="_self">구글</a>
<a href="htp:/www.naver.com" target="_blank">네이버</a>

• 이미지 링크

  <a href="https://www.naver.com">
  	img src="../../images/naver.png" width="200px">
  </a>

• 파일 링크
  <a href="01_overview.html">오버뷰</a>

• 같은 문서 안에서 이동하기

  • id 속성 : HTML 구성요소를 식별하기 위한 속성, 중복이 없어야함

<p>
	<a href="#image">이미지</a>
    <a href="#content">내용</a>
    <a href="description">세부사항</a>
</p>
<p id="image">
	<img src="../../images/apple.jpg width="1000px">"
</p>
<p id="content">
	맛있는 사과가 한 개 1000원
</p>
<p id="description">
	원산지 :  청송 사과
    품종 : 부사
</p>

이미지 맵

• 이미지 일부에 링크를 생성

• 〈img〉 태그와 〈map〉태그를 사용

• 사용 방법

  <img scr = "이미지경로" usermap="#map이름">
  <map name = "map이름">
    	<area shape = "모양" href = "링크경로" coords = "좌표">
  </map>

  • shape 속성 : rect(사각형 링크), circle(원 링크)