이미지 및 링크 (<img>,<picture>,<a>)

 

 

1. 이미지 <img>
2. HTML5 이미지 태그 <picture>
3. 링크 태그 <a>

 

이미지

• <img>
  • src : 이미지 파일 경로 ( 상대 경로 / 절대 경로 )
  • alt : 이미지 파일을 불러 올 수 없을때, 나오는 문구 작성
  • width : 이미지 크기 지정 (가로)
  • height : 이미지 크기 지정 (세로)

 

HTML 5 전용 이미지

• <picture>
  • 여러 이미지들을 한번에 묶는 역할
  • <source> 태그를 이용하여, 이미지마다 크기를 지정할 수 있음
• <figcaption>
  • 이미지 다음줄로 자동 개행을 하여, 이미지의 설명 문단을 표현

 

링크

• <a>
  • a 태그를 이용하여 원하는 URL 로 맵핑 가능
  • 속성
    • _self : 현재 탭에서 해당 링크로 이동
    • _blank : 새로운 탭에서 해당 링크로 이동