[HTML] 이미지와 하이퍼링크 태그

배윤석·2022년 5월 24일
TILhtml
0

HTML

목록 보기
6/6
post-thumbnail

🥊 환경 정보

  • HTML ver : HTML5

🥊<body> 태그

<body> 태그의 안에 들어갈 내용들은 실제 브라우저에 표시될 내용이다.

내용을 표현하는 여러 태그가 있는데, 이번에는 이미지와 하이퍼링크 관련 태그들을 알아보자.

🥊 이미지

💧 웹 문서와 이미지

웹 페이지에서 사용하는 이미지 파일은 두 가지 속성을 가진다.

  1. 파일 크기가 크지 않아야 한다.
  2. 화질은 좋게 유지해야 한다.

해당 내용을 포함하는 파일 형식은 그렇게 많지 않다.

💧 GIF

  • GIF : Graphic Interchange Form
  1. 표시 가능한 색상 수는 최대 256 가지.
  2. 다른 이미지 파일 형식에 비해 파일 크기가 작다.
  3. 주 사용처 : 아이콘, 불릿과 같은 작은 이미지.
  4. 투명한 배경이나 움직이는 이미지를 만들 수 있다.

💧 JPG / JPEG

  • JPG : Joint Photographic Group
  • JPEG : Joint Photographic Experts Group
  1. 사진을 위해 개발된 형식.
  2. GIF 대비 다양한 색상 및 명암을 표현 가능.
  3. 다른 이름으로 저장을 반복 시 화질 저하 가능성 있음.

💧 PNG

  • PNG : Portable Network Graphics
  1. 네트워크용으로 개발된 이미지 파일 형식.
  2. GIF 와 JPG의 장점을 합쳤다고 보면 된다.
  3. 투명 배경 사용 가능
  4. 다양한 색상을 표현 가능
  5. 최근에 가장 많이 사용하는 이미지 파일 형식이다.

💧 <img> 태그

HTML 문서에 이미지를 삽입할 때 사용한다.

<!-- 기본형 -->
<img src="경로" >

💧 <img> 태그의 속성

  • src : 이미지 파일 경로 지정(필수 사용)
  • alt : 이미지를 설명하는 대체 텍스트 입력시 사용
    → 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시
  • width : 이미지의 넓이 변경
  • height : 이미지의 높이 변경
  • figure : 설명글을 붙일 대상 지정
  • figcaption : 해당 태그 안에 설명글 작성

🥊 SVG 이미지

💧 SVG 파일 형식

  • SVG : Scalable Vector Graphics
  • 이미지를 확대하거나 축소해도 이미지의 테두리가 깨끗한 상태로 유지되는 벡터 이미지
  • logo 혹은 icon에서 많이 사용된다.
  • <image> 태그를 사용해 파일 형태로 삽입할 수 있다.
<!-- 기본형 -->
<img src="이미지_경로.svg" >

🥊 링크

💧 하이퍼링크

  • 다른 문서, 혹은 다른 페이지로 바로 연결해 주는 기능
  • 외부 사이트 or 외부 페이지로도 연결이 가능하다.

💧 <a> 태그

HTML 문서에 링크를 삽입할 때 사용한다.
닫는 태그와 함께 사용한다.

<!-- 기본형 -->
<a href="링크 주소">텍스트</a>

텍스트

💧 <a> 태그의 속성

  • href : 링크한 문서 or 웹 사이트의 주소를 입력
  • target : 링크된 내용이 표시될 위치를 지정
    → 현재 창 or 새 창
  • download : 링크한 내용을 다운로드
  • rel : 현재 문서와 링크한 문서의 관계를 설명
  • hreflang : 링크 문서의 언어 지정
  • type : 링크한 문서의 파일 유형을 설명

💧 target 속성값

  • _blank : 링크 내용이 새 창 or 새 탭에서 열린다.
  • _self : 링크가 있는 화면에서 열린다.
  • _parent : 프레임에 사용 시, 링크 내용을 부모 프레임에 표시한다.
  • _top : 프레임에 사용 시, 프레임을 벗어나 링크 내용을 전체 화면에 표시한다.

💧 앵커

HTML 문서 한 페이지 안에서만 이동하는 것

  • 이동하고 싶은 위치마다 텍스트를 만드는 태그 내부에 id 속성을 이용해 앵커를 만든다.
  • <a> 태그의 href 속성을 사용해 링크한다.
  • 단 href 속성 사용 시, 앵커의 이름 앞에 #을 붙여 앵커라고 인식시킨다.
<p id="anker">앵커를 사용하고자 하는 텍스트</p>
<a href="#anker" >하이퍼링크</a>

앵커를 사용하고자 하는 텍스트

하이퍼링크

💧 <area> 태그

  • 한 이미지 상에 여러 다른 링크를 만들 수 있다.
    → (예를 들어, 일정 범위는 naver로, 일정 범위는 daum으로 링크를 걸 수 있다.)
  • <map> 태그 내부에 사용한다.
    → 이미지는 usemap 속성으로 area 태그를 사용한다.
<img src="./img.png" usemap="#areaTag">

<map name="areaTag">
  <area shape="rect" coords="10, 10, 300, 200" href="주소1" target="_blank">
  <area shape="rect" coords="200, 10, 300, 200" href="주소2" target="_blank">
</map>

💧 <area> 태그의 속성

  • alt : 대체 텍스트 지정
  • coords : 링크를 사용할 영역 좌표 지정
  • download : 링크 클릭 시, 링크 문서 다운로드
  • href : 링크 문서의 주소
  • media : 링크 문서를 어떤 미디어에 최적화시킬지 지정
  • rel : 현재 문서와 링크 문서 사이의 관계를 지정
  • shape : 링크로 사용할 영역의 형태를 지정
  • target : 링크를 표시할 대상을 지정
  • type : 링크 문서의 미디어 유형을 지정

🥊 썸네일

제작자 : wonkooklee

profile
배윤석
차근차근 한 걸음씩 걸어나가는 개발자 꿈나무.
이전 포스트

[HTML] TABLE를 만드는 태그

0개의 댓글