html 이미지 경로별 삽입방법 입니다
디자인을 처음 시작하거나 아님 프로그램을 배우기 위해 기본 html태그를 하시는 분이라면 HTML 이미지 태그를 많이 사용하는데요 사용하다 보면 본의 아니게 종종 잊어버리게 됩니다. 처음 접하시는 분이라면 이미지가 x 박스가 나오는 경우가 있지요 이미지 위치별로 경로 설정 방법을 알려드리겠습니다.
1. html 파일이 이미지와 동일한 폴더에 있는경우
먼저 html 에 이미지 삽입 방법입니다.
<img src="이미지 경로" /> 이것이 기본입니다.
html 파일과 이미지 파일이 같은 폴더에 있을 때는 이미지 파일명만 표기해주면 됩니다.
결과를 보면 아래와 같이 나옵니다.
가끔 <a href=""> 태그를 이용해서 이미지에 링크를 걸면 테두리가 생기는 경우가 있는데요 이럴 땐 border="0" 을 넣어주면 됩니다.
<img src="youtube.png" border="0" />
이미지 링크는 <a href="www.naver.com"> 여기에 위에 설명드린 이미지 태그 삽입 </a>
2. 인터넷 웹에 있는 이미지를 사용할 경우
이미지를 가지고 있지 않고 타 사이트나 웹에 있는 경우입니다.
이미지 삽입하려는 사이트를 이동해서 삽압하려는 이미지에 마우스 오른쪽 버튼을 클릭합니다.
속성에 주소가 나옵니다 이 주소를 복사해서 src="" 이곳에 넣으면 됩니다.
아래와 같이 삽입하시면 됩니다.
<img src="웹 이미지 주소" width="210" , height="78" alt="네이버 로고"/>
몇가지 추가되었죠?
이미지 사이즈가 원하는 사이즈가 아닐때 직접 사이즈를 지정해 줄 수 있는데요 바로 width 와 height 입니다.
너비와 높이값을 입력해주면 되는데요 단위는 픽셀 단위 입니다.
끝에 alt 는 이미지 지정된 경로에 없을 때 이미지대신 보여줄 글씨 입니다.
결과를 보시면 예상하신대로 나옵니다. 이미지 사이즈도 조절해보았습니다.
3. 이미지가 html 파일 하위 폴더에 있는 경우
이 구조가 때에 따라 웹사이트 많들 때 많이사용 합니다.
사용 방법은 폴더명 / 이미지파일명 으로 지정해주시면 됩니다.
4. 이미지가 상위 폴더에 있는 경우
상위 폴더에 이미지가 있을 때는 ../ 이 경로를 사용하는데요 ../ 이것은 상위 폴더를 뜻합니다.
만약 상위 상위 폴더에 이미지가 있을 경우 ../../ 이미지명 이렇게 사용하시면 됩니다.
사용방법은 src에 ../ 를 사용하시면 됩니다.
그래도 가장 많이 사용되는 형태가 폴더안에 html 파일이 있고 img 폴더안에 이미지파일이 있능 경우이지요
a/test.html , img/naver.gif
지금까지 소개드린것은 html 파일 기중으로 하는 상대경로 였구요 이럴 경우 절대 경로를 사용을 하는것이 간편합니다.
웹상의 root 폴더 기준으로 /img/naver.gif 로 사용하시면 됩니다
경우에 따라 상대경로와 절대경로를 적절하게 사용하세요 이상 html 이미지 삽입 방법을 알아보았습니다.
