[HTML/CSS] 이미지와 하이퍼링크

<img> 태그

사용법

<img src="경로" [속성="값"]>

태그 속성

• src 속성 : 이미지 파일 경로
  • 웹 문서 파일의 위치를 기준으로 이미지 경로 지정
  • 웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용할 수 있다.
    
    
• alt 속성 : 이미지를 설명하는 대체 텍스트
  • 대체 텍스트를 화면 낭독기가 읽어 줌.
  • 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시
    
    
• width, height 속성 : 이미지 크기 조정하기
  • 이 속성을 사용하지 않으면 원래 이미지 크기대로 표시
  • 이 속성을 이용해 화면에 표시하는 이미지 크기 조정, but 이미지 파일의 용량은 그대로
    
    

설명글 붙이기

<figure> 태그 : 설명글을 붙일 대상 지정

<figure> 요소 </figure>

• 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용
• 설명 글을 표시할 때 <figure>로 먼저 묶어야 함

<figcaption> 태그 : 이미지를 설명하는 대체 텍스트

<figcaption> 설명 글 </figcaption>

• 대체 텍스트를 화면 낭독기가 읽어 줌.
• 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시

하이퍼링크

• 다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능
• 외부 사이트나 외부 페이지로도 연결.
• 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다

<a> 태그, href 속성

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로" </a>

반드시 href 속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다.

target 속성 - 새 탭에서 링크 열기

• 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때
• 현재 페이지는 그대로 유지하면서 새 창이나 새 탭에 표시

한 페이지 안에서 점프하기 - 앵커

• 앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만듦.
• <a> 태그의 href 속성을 사용해 링크함. 단, 앵커 이름 앞에 #을 붙여 앵커 표시.

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>

<area>태그, usemap 속성 - 이미지맵

이미지맵 : 한 이미지 상에 여러 다른 링크를 만드는 것

<map name="맵이름">
  <area>
  <area>
  ...
</map>

<img src="이미지파일" usemap="#맵이름">

<area> 태그의 속성들