[HTML] HTML 이미지, 링크 표현

HTML에서 그림과 링크 표현

1. img 태그 관련 속성 활용
2. a 태그를 다양한 유형의 콘텐츠에 활용

1. 이미지 삽입

img 태그는 웹 문서에 이미지를 삽입하고 시작태그만 사용한다.
<img>는 인라인 요소로 줄바꿈을 위해서는 <br>을 사용한다.

• src="이미지파일경로" : 문서에 표시할 이미지 파일 경로 지정
  1. html문서와 동일 폴더에 있는 경우 : "파일명.확장자명"
  2. 절대경로의 경우 : "절대경로\파일명.확장자명"
  3. 상대경로의 경우 : "현재 작업 위치 기준 상대경로\파일명.확장자명"

  GIF	JPG	PNG
  Graphics Interchange Format 256개 색상 지원 투명배경 처리 지원 용량이 작음 애니메이션 지원 로고나 클립 아트 형태의 이미지에 적합	Joint Photographic coding Experts Groups 트루컬러 지원 압축률이 좋아 용량이 작음 사진과 같은 이미지에 적합	Portable Network Graphics 트루컬러 지원 투명배경 처리 지원 웹 전용 이미지 파일 : JPEG보다 훨씬 빠르게 화면상에 표시 애니메이션 지원 클립 아트 같은 적은 색상을 가진 이미지에 적합

• width="숫자", height="숫자" : 이미지의 폭과 높이 지정(픽셀, %)
  1. % 단위를 사용하면 화면 크기 대비 상대적인 비율로 크기를 설정
  2. width나 height 중 하나의 크기만 지정시 나머지는 원본 크기에 비례해서 자동으로 설정
• alt="내용" : 이미지가 안나올 때 대체 될 텍스트 지정
  1. 마우스를 사진 위에 올려놓아도 볼 수 있음
  2. 대체 텍스트를 여러 줄 작성하고 싶으면 특수문자 &#13;을 사용
• usemap="#이름" : 클라이언트 측의 이미지맵을 지정

2. 하이퍼링크 삽입

하이퍼링크는 클릭을 통해 다른 곳으로 이동 할 수 있다.
<a> 태그('anchor')로 HTML문서에 하이퍼링크를 삽입 할 수 있다.
형식 : <a href="이동할 위치"> 추가 정보(텍스트/이미지) </a>

• href="URL" : 이동하고자 하는 경로나 주소를 지정
  1. hyper reference
  2. 텍스트나 이미지에 마우스를 올리면 커서의 모양이 손모양으로 바뀐다.
  3. 방문하지 않은 링크는 밑줄 친 파란색
  4. 방문한 링크는 밑줄 친 보라색
  5. 활성화 된 링크는 밑줄 친 빨간색

  a 태그 사용	결과
  <a href="http://www.naver.com">네이버<a>	네이버
  <a href="http://www.naver.com" title="네이버">네이버<img src="그림경로"><a>	네이버
  <a href="사진파일명.jpg">클릭시 원본 크기<img src="사진파일명.jpg" width="50"><a>	클릭시 원본 크기

• target="창의 이름" : 링크 클릭시 내용이 표시 될 창을 지정

  target 속성값	설명	결과
  _blank	새창으로 열기	네이버
  _self	현재창에서 열기	네이버
  _top	모든 프레임 사라지고 하나의 화면에서 열기
  _parent	부모 프레임에서 열기
  프레임명	표시할 프레임의 이름을 직접 지정

• download : 링크 클릭시 다운로드하여 저장 된다.
  1. 속성값 생략시 원본 파일명으로 저장
  2. 다릉 이름으로 파일 저장하고 싶으면 속성값으로 지정
  3. 압축 파일이나 실행 파일의 경우 download 속성 없이도 파일 다운
  4. 사용 결과 : 클릭시 펭귄 다운
• id : 특정 위치로 이동
  • 한 페이지의 내용이 길경우 id속성을 사용해 특정 위치로 이동 시킨다.
  • <a href="페이지경로#이동 할 특정 id명">내용</a>이미지 삽입으로 이동
  • <a href="#top">맨위로</a>맨 위로 이동
• 다양한 링크 설정
  1. 이메일 링크 : <a href="mailto:에메일주소">텍스트/이미지</a>
  2. 자바스크립트 링크 : <a href="javasxript:자바스크립트코드">텍스트/이미지</a>
  3. 다양한 파일(동영상, 음악, 압축 등) 링크 :<a href="파일명.확장자명">텍스트/이미지</a>