본문 바로가기

HTML

이미지 경로

♡뱅크스토리 입니다.♡

 

HTML문서에 이미지를 삽입하는 방법 알아보겠습니다.
HTML문서에 그림을 넣기 위해서는 <img>태그를 사용합니다.

 

<img src="이미지 경로">

<img>

그림 파일을 삽입하기 위한 태그의 가장 기본적인 속성은 이미지 경로를 지정하는 src 속성입니다.

 

<src="이미지 파일 이름">

삽입될 이미지 파일을 지정함. 만일 이미지 파일과 HTML 파일이 같은 폴더내에 있다면 그냥 이미지 파일명만 입력해 주면 됩니다.

<alt="이미지내용 설명">
이미지를 지원하지 않는 브라우저 사용자들이나 텍스트 위주로 보는 사용자(이미지를 화면에 표시하지 않고 사용)들을 위하여 이미지에 대한 간단한 설명을 붙여줍니다. 

 

<align="left", "right">
align 속성값은 이미지와 텍스트의 자연스러운 배치를 위해서 많이 사용합니다.

left는 이미지를 왼쪽으로 정렬하면서 텍스트를 이미지의 오른쪽에 정렬시킵니다.
right는 이미지를 오른쪽에 정렬하면서 텍스트를 이미지의 왼쪽에 정렬시킵니다.

 

<align="top", "middle", "bottom">
텍스트의 위치를 이미지의 세로 방향에서 위쪽, 가운데, 아래쪽으로 정렬시킵니다.

 

<border="두께 숫자">
이미지 경계선의 두께를 설정합니다. 숫자가 커질수록 두꺼워집니다. 픽셀 단위로 입력합니다.

 

<height="높이 숫자", width="너비 숫자">
height는 이미지의 높이를 지정하는 것이고 width는 이미지의 너비를 지정하는 것으로 픽셀 단위나 % 단위로 입력할 수 있습니다. 이 속성을 지정하지 않아도 이미지를 표시하는데는 지장이 없으나 작은 이미지를 크게 나타내거나 큰 이미지를 작게 나타낼 수 있습니다. 그렇다고 원본 이미지의 크기를 조정하는 것은 아닙니다.

 

<hspace="좌우여백 숫자">
픽셀 단위로 입력하며 이미지 좌우로 여백을 설정합니다.

 

<vspace="상하여백 숫자">
픽셀 단위로 입력하며 이미지 상하로 여백을 설정합니다.

 

배경색과 배경 이미지 넣기
홈페이지의 배경에 색이나 이미지를 넣을 때는 태그의 속성을 이용합니다. 배경색을 지정하는 속성은 bgcolor이고, 배경 이미지를 넣는 속성은 background를 이용합니다.
배경색과 배경 이미지를 함께 지정했다면 배경색으로 먼저 배경이 채워지고 그 위에 이미지가 나타납니다. 그리고 색과 이미지를 선택할 때 본문 내용의 글자가 잘 보이는 것으로 설정하고, 또한 너무 큰 이미지를 넣어 본문의 내용에 영향을 주지 않도록 해야 합니다.

 

 

<html>
<head>
<title>배경색 넣기</title>
</head>
<body bgcolor="light cyan" text="gold">
<center>
<h1> 메가뱅크</h1>
</center>
</body>
</html>

 

<html>
<head>
<title>배경이미지 변경하기</title>
</head>

<body background="img/a129.png">
<center>
<h1> 메가뱅크</h1>
</center>
</body>
</html>

 

이미지 넣기(<IMG>)
배경 이미지를 제외한 모든 이미지를 삽입하거나 관리할 때는 Image의 약어로 <IMG> 태그를 사용합니다. HTML문서에서 가장 많이 쓰이는 이미지 파일은 GIF와 JPG입니다.
이 파일들은 브라우저에서 바로 인식할 수 있는 파일입니다. 그림 파일 형식에는 BMP, EPS, PCX, TIF, XBM, PNG, WMF 등 많이 있지만 인터넷에서는 전송 속도를 고려한 그림 파일을 사용해야 합니다. 따라서 적은 용량으로도 고품질의 이미지를 표현할 수 있는 GIF나 JPG, PNG등을 사용하여 HTML문서를 작성하는 것입니다.

 

<html>
<head>
<title>이미지 삽입하기</title>
</head>
<body>
<center>
<h1> 메가뱅크</h1>
</center>
<img src="http://mega-bank.co.kr/common/img/bn/main_bigbn03.png">
</body>
</html>

 

 

절대 경로와 상대 경로

이미지를 삽입하거나 다른 HTML 문서 등을 불러올 때 그 위치를 지정하는 방법에는 절대 경로와
상대 경로가 있습니다. 절대 경로는 불러올 파일이 있는 URL을 모두 지정하는 것으로 해당 파일이
들어 있는 URL까지 입력하기 때문에 절대 경로를 사용한다면 여러 가지 불편한 점이 많습니다.
즉 절대 경로를 지정하는 방법은 예를 들어 http://www.mega-bank.co.kr/img에 이미지.gif라는
파일이 있다고 가정하고 이미지를 삽입하려면 <img src="http://www.mega-bank.co.kr/img에 이미지.gif">라고 입력하면 됩니다. 반대로 상대 경로는 같은 계정 내의 HTML 문서에 포함될 파일의 위치를 해당 파일이 있는 폴더가 아닌 최상위 폴더를 기준으로 경로명을 지정합니다.
예를 들어 sample.html문서에서 하위 폴더인 img라는 폴더에 있는 이미지.gif라는 파일을 삽입하려면
<img src="img/이미지.gif">라고 입력합니다.

 

 

 

♡뱅크스토리 입니다.♡

 

 

010-7249-0202

'HTML' 카테고리의 다른 글

이미지(img)종류  (0) 2014.06.12
테이블 기본 구조  (0) 2014.06.09
HTML 요소(Element)  (0) 2014.06.05
글자 관련 태그  (0) 2014.06.04
HTML 기본  (0) 2014.05.27