[프론트엔드 입문] 3-2 HTML 태그 image, link

1. HTML image

[1] 일반적으로 사용하는 그림 화일 포맷

1) 종류

• .gif (Graphic Interchange Format)
• .jpg (Joint Photgraphic Experts Group)
• .png (Portable Network Graphics)
  • GIF를 대체하기 위해 등장
• .bmp

[2] GIF

1) 특징

• 인터넷에서 그래픽을 압축하여 빠르게 전송하려는 목적으로 개발
• 최대 256가지 색을 표현 가능
• 비손실 압축
• JPG에 비해 압축률은 떨어진다.
• 애니메이션 제작 가능

[3] JPG

1) 특징

• 정지 화상을 위한 손실 압축 방법
• Full color와 gray scale의 압축을 위해 고안
• 사진이나 예술 분야의 작업에서 장점을 가짐

[4] PNG

1) 특징

• 특허 문제가 있는 GIF 포맷의 문제를 해결하고 개선하기 위해 개발
• 네트워크 상에서 빠른 전송
• GIF의 단점인 256색 지원을 보완하여 Truecolor를 지원
• 비손실 압축

[5] BMP

1) 특징

• 무 압축으로 이미지 확장자 중에서 화질이 제일 선명
• 압축이 되지 않아서 용량을 많이 차지

[6] Image format의 비교

[7] 절대 경로 & 상대 경로

1) URL의 구성

: 프로토콜 + 웹사이트 이름 + 서버에서 resouce의 경로

(1) 예시

(2) 절대 경로 : root 폴더에서 특정 파일이나 페이지까지의 이동 경로

(3) 상대 경로 : 현재 자신의 위치에서부터 특정 파일이나 페이지까지의 이동 경로

(4) 문제 예시

(1) Q. Sub.html의 절대 경로는?

: /public_html/files/sub.html

(2) Files라는 폴더에서 bullet.gif까지의 상대 경로는?

: ../images/icon/bullet.gif

[8] HTML Images

: 그림이나 사진을 화면에 나타낸다.

1) Attributes

• alt : 그림이 제대로 뜨지 않을 때 나타나는 텍스트
• align : 위치 조정 (bottom, middle, top, left, right)
• width : 그림의 넓이 지정
• height : 그림의 높이 지정
• hspace : 가로 여백 지정
• vspace : 세로 여백 지정
• usemap : 이미지 내부 영역을 나누어 링크 연결
• border : 테두리 (숫자로 표시)

2) 포맷

: <img src = "url">

3) 예시

4) usemap 예시

2. HTML link

[1] HTML Link 연결 방식 (링크를 사용하는 경우)

1) 외부 hyper link

<a href = "URL">link text</a>

2) 내부의 서로 다른 문서를 연결

<a href = "html_images.html">HTML Images</a>

3) 동일한 문서에서 위치 이동

<h2 id = "C4">Chapter 4</h2>

<a href = "#C4">Jump to Chapter 4</a>

4) 예시

[2] The target Attribute

1) Target에 지정 가능한 값

• _blank : 새로운 창이나 탭에 열린다.
• _self : 현재 창에서 열린다.
• _parent : 현재 문서를 부른 부모 창이나 프레임에 열린다.
• _top : 현재 문서의 처음 창에 열린다.
• framename : 지정한 프레임 이름을 가진 프레임에 열린다.
• 임의의 값 : 새로운 탭에서 열린다.

2) 예시

[3] Images

: image 태그를 a 태그 안에 넣고 사용할 수 있다.

3) 예시

[4] Create a Bookmark

1) 방식

1. 태그 id를 사용하여 북마크를 표현한다.

<h2 id = "C4">Chapter 4</h2>

2. 링크 태크를 사용하여 해당 북카트로 이동한다.

<a href = "#C4">Jump to Chapter 4</a>

[5] HTMl Link Colors

1) 링크를 표현하는 색상

• 파란색 : 방문하지 않은 링크
• 보라색 : 방문한 링크
• 빨간색 : 액티브 링크

2) 링크를 style을 사용하여 변경 가능

[6] HTML Body tag 속성

1) Attributes

• bgcolor = color
• text = color
• link = color
• alink = color
• vlink = color
• Background = filename

2) 예시

3) file로 배경화면 적용 예시