[HTML 기본 개념] HTML 문법-이미지/이미지 경로/이미지 정렬

1.1  이미지

-<img> 태그를 사용

-이미지 파일과 HTML 파일이 같은 폴더 내에 있다면 그냥 이미지 파일명만 입력해 주면 된다.

-이미지에 링크를 거는 경우 링크가 걸린 이미지라는 것을 표시해주기 위해서 기본적으로 이미지의 경계선이 1픽셀로 표시된다. 따라서 경계선을 없애려면 border 속성을 0으로 지정해 준다.

.

<img src="이미지가 위치하는 URL" alt="대체텍스트" width="폭" height="높이" longdesc="링크" />

l  src : 이미지가 위치하는 URL을 기술.

l  alt : alternative의 약자로 한국어로는 대체 텍스트라고 부른다. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다.

l  width, height : 이미지의 크기

l  longdesc : 이미지와 관련된 링크

 

2.3.1 이미지 경로

1. 절대경로

-이미지의 절대적인 경로로 지정하는 방식

-보통 자신의 컴퓨터에서 HTML 문서를 만들고 이를 FTP를 통해서 웹 서버에 일괄적으로 올린다. 이런 경우 절대경로로 이미지를 삽입했다면 모두 고쳐줘야 하는 불편이 있기 때문에 일반적으로 절대경로보다는 상대경로를 이용해서 이미지를 삽입하는 것을 권장함.

Ex) <a href=http://minkyung.blog.me/>    <img src=http://minkyung.blog.me/image/img.jpg />

 

2. 상대경로

-HTML 문서를 기준으로 경로를 인식하는 방법

-이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져보고 경로를 지정해줘야 한다.

Ex) <a href=”/index.html”></a>    <img src=”../img/img.jpg” />

 

2.3.2 이미지 정렬

<img>태그에 align 속성을 사용하면 이미지와 텍스트의 배치를 바꿀 수 있습니다.

<p><img src="totoro_200_150.jpg" align="top">텍스트 입력1</p> <p><img src="totoro_200_150.jpg" align="middle">텍스트 입력2</p> <p><img src="totoro_200_150.jpg" align="bottom">텍스트 입력3</p>