이미지 태그

이미지를 삽입 할때는 img 태그를 시용합니다.

이미지 삽입

웹 문서에 이미지를 삽입할 때는 IMG 태그를 사용한다.

<img>태그 안에는 여러 가지 속성이 오게 되는데 src 속성은 이미지 파일의 위치를 알려주는 것이므로 반드시 필요한 속성이지만 그 외의 속성은 필요할 때만 넣으면 된다.

속성 설명
src 이미지의 경로를 나타낸다
   

width : 이미지의 폭을 나타낸다.

height : 이미지의 높이를 나타낸다.

alt : 이미지가 깨질 경우 대체 텍스트를 나타낸다.

title : 이미지 위로 마우스 커서를 가져가면 간단한 설명글을 나타낸다.

align: 이미지의 위치를 정렬한다.

* 수평정렬 : left, right
* 수직정렬 : top, middle, bottom

border : 이미지의 테두리를 나타낸다.

SRC 속성

SRC는 Source의 약자로 이미지의 생대경로와 절대경로로 나타낼 때 사용한다.

<img src="apple.jpg">

width와 height 속성

이미지의 폭(width)과 높이(height)를 조절하여 이미지 크기를 변경하는 속성이다.

이 속성을 사용하지 않으면 이미지의 원래 크기대로 표시되는데 웹 문서 안에서 다른 이미지나 텍스트의 크기를 고려해서 원래 이미지 크기를 늘리거나 줄일 수 있다.

이 속성으로 크기가 줄었다 하여 물리적인 크기까지 줄어든 것은 아니기 때문에 용량은 변화가 없다는 것을 명심한다.

html503_19

ALT 속성

  • ALT 속성은 Alternative 의 약자로 이미지를 대신해서 텍스트를 나타낸다.
  • 시각 장애인의 웹서핑 시 사용하는 리더(leader) 프로그램이 텍스트는 읽어주나, 이미지는 익을 수 없으므로 alt 태그 안의 설명을 읽어준다.
  • 일반인 웹 서피이시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을때 , x표 상자와 함께 이미지 설명을 보여준다. 이미지 경로가 제대로 입력되어 있는 상태에서는 alt 속성에 있는 애용이 보이지 않는다.

이미지 경로가 제대로 입력되어 있는 상태에서는 alt 속성에 있는 내용이 보이지 않는다.

이미지 경로를 입력하지 않아 alt 속성에 있는 내용의 택스크가 보인다.

html503_21

TITLE 속성

title 속성은 이미지 위에 마우스를 올려 놓았을 때 풍선 도움말 처럼 나타낸다.

  • 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title 속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제적을 볼 수 있다.

html503_22

이미지 뿐 아니라, a테그, a 태그, span 태그, td 태그 등 거의 대부분의 태그에 사용할 수 잇고, “클릭하면 다른 페이지로 이동합니다.” 등의 간단한 풍선 도움말 형식을 사용할 수 있다. 특히, 웹 표준에서는 a태그에 title 속성은 필수 항목이다.

링크 주소에 대한 설명을 넣어, 링크 주소에도 의미를 부여할 수 있다.

ALIGN 속성

이미지의 배치 방법은 align 속성을 사용해서 지정하는데 가로 배치 방법은 left와 right중에서 선택할 수 있고, 세로 배치 방법은 top, middle, bottom 중에서 선택할 수 있다.

특히 이미지 바로 옆에 텍스트가 오게 하려면 IMG 태그의 align 속성을 사용해서 이미지 위치를 정렬하면 된다.

html503_24

BORDER 속성

border 속성은 이미지 주위의 테두리선을 조절하는 것이다.

이 속성을 따로 설정하지 않거나 border=0 으로 지정하면 이미지 주변에 테두리 선이 나타나지 않는다.

이 속성을 통해 테두리선을 표시할 수도 있고 두께를 저절 수도 있고 두께를 조절할 수도 있으므로 간단한 액자 효과를 만들 수 있다.

데두리선의 색상은 검은색이며 HTML로는 데두리선 색상을 조절할 수 없다.

이미지 테두리선 색상이나 스타일 등을 조절하려면 스타일시트를 이용해야 한다.

아래 예제에서 보는 것처럼 <IMG> 태그 안에 sytle="border-style:스타일;border-color:색상;border-width:굵기"같은 형식을 추가하면 된다.

테두리선과 관련된 속성과 속성값은 다음과 같다.

border-style

  • dashed(대시)
  • dotted(점선)
  • double(이중선)
  • solid(실선)
  • inset(움푹 들어가 보이게)
  • outset(볼록 솟아나 보이게)

border-width

  • thin(얇게)
  • medium(중간)
  • thick(굵게)
  • 숫자(픽셀값)

border-color

색상이름 또는 색상값으로 지정함

html503_27

FIGURE 태그

figure 태그는 이미지, 그래프, 사진, 예제코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로 관계를 명확히 구조화 시킨다.

반다시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지 등에 넣어도 크게 상관 없는 내용을 지정할 수 있다.

html503_28

FIGCAPTION 태그

figcaption 태그는 익스플로어9, 파일어폭스, 오페라, 크롬 및 사파리 에서 지원된다.

익스플로러8 이전 버전에서는 figcaption 태그를 지원하지 않는다.

html503_29

대체이미지 삽입 사이트 / palcehold.it

웹 문서를 만들때 이미지를 사용하고 싶은데 당장에 필요한 이미지가 없다면 좋은 방법이 있다.

아래의 사이트는 이러한 경우에 원하는 크기의 이미지를 제공해 주는 사이트이다.

html503_30

html503_31

배경 이미지 삽입 / 문서 전체에 배경 이미지 삽입

배경 이미지를 삽입하기 위해서는 body 태그에서 스카일의 background-image 속성을 사용한다.

html503_32

전체 배경이지지 적용

배경 이미지로 사용할 수 있는 파일은 일반 이미지와 마찬가지로 GIF나 JPG, PNG 인데, 웹 문서 크기보다 작은 이미지를 사용할 경우 웹 문서에 가득 차게 가로와 세로로 반복해서 표시된다.

예를 들어, 다음과 같은 작은 이미지를 배경 이미지로 사용할 경우 웹문서 전체에 나타난다.

html503_33

가로 또는 세로 반복

`<body>’ 태그 안에서 background-repeat;repeat-x 부분이 배경 이미지를 가로로 반복하도록 만들어 준다.

만일 background-repeat:repeat-y로 바꾸면 배경 이미지를 세로로만 반복하게 만든다.

배경 이미지의 반복을 원하지 않는다면 background-repeat:no-repeat 로 수정한다.

html503_34

배경 이미지 위치 설정

배경이미지를 반복하지 않으면서 화면 중앙에 표시하고 싶다면 background-repeat:no-repreat 속성과 backkgound-position:center 속성을 추가하면 된다.

여기에서 앞의 center는 세로 정렬을 지정하는 것이다.

center는 값 대신 사용할 수 있는 값은 left, right 그리고 정환한 픽셀값이다.

예를 들어, background-position:100px 이라고 한다면 배경이미지를 왼쪽에서 100px그리고 위에서 100px 떨어진 곳에 배치하게 된다.

html503_35

배경 이미지 고정

지금까지 배운 방법으로 배경 이미지를 삽입하면 브라우저 화면을 스크롤 했을때 배경이미지도 함께 스크롤된다.

즉, 배경 이미지를 화면 중앙에 배치했다 하더라도 스크롤 막대를 아래로 이동하면 배경 이미지가 위로 올라가 버리게 된다.

하지만, 스타일 시트를 사용하면 배경 이미지는 움직이지 않고 그 위의 글자나 다른 요소들만 운직이게 할 수 있다. 이 대 사용하는 속성은 bakcground-attachment인데 이 속성값을 fixed로 하면 배경이미지가 고정된다.

아래 로소에서는 배경 이미지의 위치를 background-position:left bottom으로 했기 때문에 배경이미지는 항상 화면 왼쪽 아래에 표시되고

background-attatchment:fixed 로 설정했으므로 화면을 스크롤 하더라도 배경 이미지는 스크롤 되지 않는다.

html503_37

이미지 버튼

타입이 image로 선택할 경우에는 이미지 경로를 같이 지정해 주어야 합니다.

<input type="image" src="이미지경로" alt="대체 텍스트">

html503_04

html503_05

html503_06

학습목표

  • 문서에 이미지 삽입에 대해 살펴볼 수 있다.
  • 이미지 파일 포맷에 대해 이해할 수 있다.
  • 대체 이미지 사용방법에 대해 배울 수 있다.
  • 이미지 경로 설정 방법을 배울 수 있다.

학습안내


팁: placehold.it

placehold.it는 원하는 크기의 아미지를 제공해주는 샤0|트입니다.

http//placehold.it/너비x높이 형식을 사용하면 손쉽게 원하는 크가의 이미지를 얻을 수 있습니다.

학습정리

이번 시간에는 다음과 같은 내용을 학습하였습니다.

  • 웹 문서와 이미지
  • 이미지 삽입
  • 상대경로와 절대 경로

웹 문서와 이미지

웹 이미지의 특징

화질보다는 전송 속도가 중요

웹사이트의 수많은 이미지들은 네트워크를 통해 전송되기 때문에 뛰어난 화질 보다는 빠른 전송을 위주로 제작하게 된다.

어느 정도의 선명도를 유지하면서 파일 용량은 작게 만들어 브라우저 화면에 바로 보이도록 해야 한다.

사용 가능한 파일 형식

웹사이트에서 사용 가능한 파일 형식은 GIF와 JPG, PNG로 파일 형식이 제한되어 있다.

이 파일 형식들은 용량이 작으면서도 상대적으로 화질이 우수하다.

html503_11

GIF(Graphic interchange format)

다른 이미지 파일 형식과 비교하여 상대적으로 크기가 작다.

또한, GIF는 배경이 투명한 이미지나 애니메이션(Animated GIF) 같은 효과를 나타낼 수 있는 장점이 있다.

단점으로는 최대 256색만을 표현할 수 있기 때문에 색감이 약하다.

html503_12

JPG/JPEG (Joint Photographic Experts Group)

사진 이미지를 나타내는데 유용한 파일 형식으로 섬세한 색상과 명암의 변화를 표현하기에 적합한 형식이다.

html503_13

PNG(Portable Network Graphics)

압축할 때 이미지의 모든 정보를 버리지 않고 유지하기 때문에 원본과 거의 비슷하게 저장된다.

html503_14

상대 경로와 절대 경로

웹 문서에 이미지를 삽입할 때는 직접적으로 삽입이 불가능 하고 간접적으로 이미지의 위치

즉, 경로를 적어주어 웹 문서에서 이미자가 나타나게 만든다.

여기서 경로를 제대로 이해하고 표현하지 못한다면 자신이 만든 웹 문서에 이미지는 보이지 않게 된다.

경로란 현재 html 문서에 이미지 파일의 위치를 명확하게 적어주는 것으로 두가지 표현 방법이 있다.

하나는 상대경로이고 다른 하느는 절대 경로이다.

상대 경로란 현재 html문서를 기준으로 이미지가 어디에 있는지 위치를 알려주는 것이고, 절대경로란 이미자가 저장된 위치를 http://부터 시작하는 전체 주소를 적어주는 것이다.

html503_39

홈페이지를 만들때는 주로 상대 경로를 많이 사용하고,

계시판등에서 이미지를 사용할때는 절대 경로를 사용한다.

홈페이지를 만들면서 사용하는 이미지들은 별도로 폴더를 만들어 저장하는 것이 좋다.

이렇게 이미지 파일들과 html 파일들을 분리해 놓으면 나중에 파일 관리가 쉬워진다.

상대경로

윈도우의 탐색기를 보면 알 수 있듯이 컴퓨터에 파일을 저장할 때 계층적인 구조를 지닌다.

aaa.html 웹 문서 파일을 기준으로 이미지 파일의 위치를 보면 sample폴더 안에 웹 문서와 이미지들이 위치해 있는 것을 볼 수 있다.

즉, 웹문서와 이미지가 같은 폴더에 있는 경우이다.

html503_41

상대경로 표기 원칙

상대경로의 표기 원칙 세 가지를 살펴본다.

  • 웹 문서와 이미지가 같은 폴더에 있는 경우
  • 이미지가 웹 문서의 바로 하위 폴더에 있는 경우
  • 이미지가 웹문서의 바로 상위폴더에 있는 경우

html503_42

웹 문서와 이미자가 같은 폴더에 있는 경우의 화면과 이미지의 경로의 표기이다.

html503_43

상대경로 표기

웹 문서와 이미지가 같은 폴더에 있는 경우의 화면과 이미지의 경로의 표기이다.

html503_44

이미지가 웹 문서의 바로 하위 폴더에 잇는 경우의 화면과 이미지의 경로의 표기이다.

html503_45

이미지가 웹 문서의 바로 하위 폴더에 있는 경우의 화면과 이미지의 경로 표기이다.

html503_46

html503_47

html503_48

절대경로

절대 경로는 자신의 컴퓨터가 아닌 인터넷에 있는 이미지를 다운받지 않고 연결만 하여 사용하고자 할때 이용하는 방법이다.

이 경우 문제점으로는 해당 사이트에서 이미지가 삭제될 경우 절대경로로 보이던 이미지는 깨져 보이게 된다.

인터넷에 있는 이미지의 절대 경로는 쉽게 앟 수 있다.

  • 먼저 아래의 구글 이미지 사이트를 접속한다.

  • 검색어에서 “풍경사진”이라고 입력한 후 원하는 이미지를 선택한다. 이미지의 절대 경로를 할고자 원한다면 이미지를 마우스 오른쪽 버튼으로 클릭한 후 속성을 클릭한다.
  • 이미지 속성 대화상자에서 주소(url) 항목 바로 오른쪽에 표시된 것이 바로 현재 이미지의 절대 경로이다. 이주로를 드래그 하여 선택한 후 마우스 오른쪽 버튼으로 복사한다.

html503_51

html503_52

html503_53

html503_54

이미지 삽입하기

이미지를 삽입하기 위해서는 <img> 테그를 사용합니다.

이미지 위치

속성값으로 이미지의 위치를 지정해 주어야 합니다.

<img src="logo.jpg">

이미지 파일명과 확장자를 같이 지정해 주어야 합니다.

이미지의 종류

  • jpg
  • png
  • gif

이미지 경로위치

이미지를 지정할 때는 경로명도 정확히 지정을 해주어야 합니다.

  • 현재위치
  • 상대경로
  • 절대경로

대체 텍스트

alt 속성을 부여하여 시각장애인이 인식할 수 있도록 대체 텍스트를 입력합니다.

만일 alt 값이 없어도 생략하지 말고 빈 내용으로도 넣어 주어야 합니다.

<img src="logo.jpg" alt="">

대체 텍스트 설명 내용이 많을 경우 longdesc 속성을 이용합니다.

<img src="logo.jpg" alt="간단한 설명" longdesc="descript.html">

파이어폭스, 마우스 오른쪽키 메뉴 -> 설명보기

<img src="logo.jpg" alt="간단한 설명" >
<div style="position:absolute; left:-200%">
상세정보
</div>

하단에 대체 택스트 설명을 배치합니다. 일반인들은 보이지 않도록 position을 변경하여 안보이게 합니다. 하지만, 시각장애인들을 이를 읽을 수 있습니다.

주의 display:none 속성으로 하게 되면 인식이 되지 않아 대체 택스트를 읽을 수 없습니다.

이미지의 사이즈 지정