HTML 이미지 태그 입니다
html에서 많이 사용되는 태그중 하나가 바로 이미지 태그<img> 입니다. 이 태그로 이미지를 보이게 하는데요 이번 내용은 html에 이미지 태그 속성과 폴더 설정 하는 방법에 대해 알려드리겠습니다.
이미지 태그 사용법 부터 알려드리겠습니다.
<img src="이미지 폴더 경로" width="넓이(생략시 이미지 원본 사이즈)" height="높이(생략시 이미지 원본 사이즈)" alt="이미지 대체 문자" border=0 />
이렇게 사용되는데요 먼저 이미지와 html 파일이 동이한 폴더에 있는 경우 입니다.
아래처럼 src에 이미지 파일명을 지정하면 됩니다.
참고로 이미지 태그에 <A> 태그를 거는 경우가 있는데 그럴경우 border=0 으로 해주셔야 테두리가 생기지 않습니다.
브라우저로 실행 한 결과 입니다.
웹에 있는 이미지를 사용할 경우 입니다.
src에 웹에 있는 경로를 넣어주시면 됩니다.
웹경로 보는법은 브라우저에서 이미지에 마우스 오른쪽 버튼 - 속성을 보시면 주소가 나옵니다.
태그사용법은 아래와 같이 src="웹경로" 해주시면 됩니다.
width, height , alt 까지 넣어봤습니다.
아래 네이버 이미지가 나오는것을 확인할 수 있습니다.
이젠 이미지가 다른 폴더에 있을 경우 인데요
폴더 지정은 절대 경로와 상대경로가 있습니다.
절대 경로는 iis에서 잡은 root (/) 를 기준으로 이미지 경로를 찾게 되는데요
예를들어 root 경로 아래 폴더와 이미지가 있을 경우
src="/img/naver.gif" 이렇게 됩니다. 소스가 어디에 있던 상관없습니다.
IIS에서 정의해주시지 않았으면 상대 경로로 사용하셔야 합니다.
그래서 디자이너 분들은 거의 상대경로를 사용합니다.
상대경로는 현재 소스를 기준으로 합니다.
하위 폴더에 naver 이미지가 있으니까
src="img/naver.gif"가 됩니다. 맨앞에 root를 의미하는 "/" 가 없네요
작성하는 방법은 아래와 같이 되겠네요
출력 결과 입니다.
이번엔 이미지가 소스보다 상위에 있을 경우 입니다.
절대경로는 root (/) 기준이라서 모두 동일합니다. ^^
상대 경로를 지정할 때는 ../ 을 사용하는데요
src="../naver.gif" 이렇게 하시면 됩니다.
태그 작성법 입니다.
이상으로 이미지 태그속과 사용법에 대해 알아보았습니다.
