Javascript img src 가져오기 - javascript img src gajyeoogi

html img태그의 src속성 이미지 경로 가져오기에 대한 많은 고민이 있습니다.

다음은 img 태그의 src 속성의 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다.

<img>

img 태그는 src와 alt 두 가지 필수 속성이 있습니다.

그중 src속성에 경로를 지정하여 이미지를 가져올 때

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

위와 같이 html 코드를 작성 합니다. img 태그는 종료태그가 없기 때문에

<img src="" alt="" ></img>이 아닌 <img src="" alt="" />

태그 안에서 마지막 종료 >에 ./로 닫아 줍니다.

그럼 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다.

절대경로

파일의 탐색을 위한 접근 경로를 파일 시스템의 루트로부터 시작해 명시해 주는 것을 절대 경로라고 합니다.

인터넷 파일(서버호스트에 업로드된 이미지)의 경우 파일 경로를 전체 url을 사용하여 지정해 줍니다.

예)

http://www.나의도메인.com/images/ 도메인을 넣는 경우는 나의 파일이 저장한 이미지 호스트와 Html 작업을 하는 호스트 서버가 다를 경우에 사용됩니다.

/images/MyImg.jpg의 경우는 동일한 호스트 안에 이미지 파일과 html문서가 존재할 때 사용됩니다.
"/"은 서버의 루트 폴더로부터 경로 시작을 의미합니다.

<img src="http://www.나의도메인.com/images/MyImg.jpg" alt="이미지" />

<img src="/images/MyImg.jpg" alt="이미지" />

상대경로

html 문서의 현재 위치부터 시작하여 파일로 이동하는 경로입니다.

예)

./ 작성하는 경우와 작성하지 않는 경우 모두 현재 폴더를 의미합니다.

html 문서의 현재 위치에서 ../은 한 단계 위의 폴더로 이동을 의미합니다.
만약 두 단계 위로 폴더를 이동할 경우 ../../ 두 번 반복 사용하면 됩니다.

<img src="MyImg.jpg" alt="이미지" />

<img src="images/MyImg.jpg" alt="이미지" />

<img src="../MyImg.jpg" alt="이미지" />

<img src="../images/MyImg.jpg" alt="이미지" />

이제 원하는 위치의 파일을 불러오기 위해 웹사이트 또는 로컬의 현재 문서 위치와 이미지 파일의 위치를 파악한 후

절대 경로를 사용할지 또는 상대 경로를 사용하지 결정한 후 위의 예를 참고하여 사용하시면 됩니다.

W3C(웹표준)안에 모범사례를 보면 가능한 경우 상대 파일 경로를 사용하는 것이 가장 좋습니다.
상대 파일 경로를 사용하면 웹 페이지가 현재 기본 URL에 바인딩되지 않기 때문에 향후 도메인을 변경 또는 웹 호스트를 이동할 경우에도 작동을 합니다.

위 권고안의 내용을 간단히 설명하면 "http://www.마이도메인.com/images/MyImg.jpg" 라는 경로를 사용할 경우 도메인을 변경했을 때 html문서의 이미지 파일 경로를 찾지 못하는 현상이 생기기 때문입니다.

하지만 "/images/MyIMg.jpg"로 루트 폴더로부터 시작되는 절대 경로를 사용하면 해결되므로 반드시 상대 경로만을 사용하실 필요는 없습니다.

관련된 글 링크

• HTML 기초 tag 많이 사용되는 태그 정리
• HTML이란 무엇인가요?

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다.

‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다.

[네이버 지식백과]

HTML <img> 태그는 이미지를 웹 페이지에 포함시키는 데 사용

<img> 태그는 참조된 이미지에 대한 유지 공간을 만듭니다.

<img> 태그는 닫는 태그가 없다. 즉 </img>가 필요 없다

<img> 태그의 필수 속성

(1) src-이미지 경로를 지정합니다

(2) alt-이미지의 대체 텍스트를 지정합니다

<img src="사진 다운/wall7.png"></a>

https://www.w3schools.com/캡처

[html]_img 태그로 이미지 넣기

[상대 경로]

img 태그로 이미지 넣기- [상대 경로]

상대 경로는 파일을 불러올 웹문서, html의 위치에 따라서 경로가 달라진다. <br>

하위 폴더로 들어갈 때는 해당 '폴더명/파일명' <br>

상위 폴더로 올라갈 때는 해당 '../파일명’

예를 들어

- 하위 폴더 안의 이미지

<img src="../img/jpg/img_chania.jpg">

<img src="../img/gif/colorpicker.gif">

<img src="../img/banner.png">

※ 하위 폴더에 이미지가 있는 경우 src 속성 에폴 더 이름을 포함시켜야 함

- 상위 폴더 안의 이미지

<img src="../../daum.png">

[html]_img 태그로 이미지 넣기

[절대 경로]

웹문서, html의 위치와 상관없이 경로가 동일하다.

[html] _이미지(image): alt 속성

alt 속성으로 이미지 설명문 지정하기 (음성낭독 기용, 이미지 표현 불가 시)

-alt 속성 값은 이미지를 설명해야 한다.

<img src="사진 다운\dog4.jpg" alt="나 귀엽지~">

※ 만약 브라우저가 이미지를 찾을 수 없으면 alt 속성 값이 표시됩니다.

https://www.w3schools.com/캡처

[html] _이미지(image)

width/height속성으로 이미지 크기 지정하기

※ 원본 크기와 동일해도 사이즈 값이 있으면 이미지가 좀 더 빨리 뜸.

원본 크기와 동일 | width="500" height="333"

<img src="사진 다운\wall10.jpg" alt="집" width="500" height="333">

가로 크기 변경 | width="300"

<img src="사진 다운\wall10.jpg" alt="집" width="300">

세로 크기 변경 | height="100"

<img src="사진 다운\wall10.jpg" alt="집" height="100">

HTML_ img 이미지 태그:애니메이션 GIF

HTML은 img 이미지 태그에는 애니메이션 GIF 사용 가능

https://www.w3schools.com/캡처

HTML_ img 이미지 태그: 이미지 링크

이미지를 링크로 사용하려면 <a href>

<img> 태그 </a> 형식을 써야 한다

https://www.w3schools.com/캡처

HTML_ img 이미지 태그: 이미지 플로팅

CSS float 속성을 사용해

이미지를 텍스트의 오른쪽 또는 왼쪽으로 배치시킬 수 있음

https://www.w3schools.com/캡처

ㅣ읽느라 수고 많으셨어요~ㅣ

부족한 글을 읽어주셔서 감사드립니다

아직 부족한 게 많으니

틀린 곳이 있다면

조언의 말씀 꼭 부탁드립니다!!!!