티스토리 뷰
목차
일명 '어트리뷰트'태그 태그에 덧붙여지는 정보로 브라우저에게 이미지를 어떻게 보여줄지를 알려준다.
ex) ① <img src="image.jpg">, ② <img src="www.ABC.com/asdf.jpg">
이미지파일 이름을 직접 써주거나 인터넷상에 위치해있는 이미지의 주소를 위의 예시처럼 써준다.
1번의 img src="image.jpg 는 같은 서버안에 존재하는 그림파일을 지정할때 파일이름만 써주면 되고
2번은 멀리 다른 곳에 존재하는 독립된 서버안에 asdf.jpg라는 그림파일을 연결해서 보고자 할때 사용하는
형식이다.
비유해서 표현하자면 같은 주머니안에 구슬이 두개 있다고 할때 하나는 '나'이고 하나는 다른하나의 구슬이라면 이럴때는 위경우처럼 그 구슬의 이름만 써주는 것이고 내가 들어가 있는 주머니가 아닌 다른 독립된 주머니안에 있는 다른 구슬을 보고자 할때는 구체적인 그 주머니의 주소를 위의 경우처럼 자세히 써주어야 하는 것과 같다.
완성된 html문서파일을 브라우저에서 출력했을때 이미지파일은 자연스럽게 거기에 포함되어 나타난다. 학습 효과를 위해 아래 이미지 주소파일을 올린다. 아래 주소를 클릭하면 그림파일이 출력된다. .
이 이미지 링크 파일 뒤에 추가적으로 height, width 너비와 높이를 추가로 지정해 주면 크기가 다른 이미지가 출력되는 것을 볼 수 있다. 누르면 100의 크기를 가진 그림파일이 작게 나타난다.
<img src="https://tistory1.daumcdn.net/tistory/6904847/skin/images/th.png" height=100 width=100>
(바로 위의 주소 형식은 html 문서상에서 코딩으로 입력되는 형식이고 주소창에 이대로 입력하면 작동하지 않는다
바로 아래와 같은 형식으로 주소창에 입력해야 작동하게 된다. 실제로 해보시라.
https://tistory1.daumcdn.net/tistory/6904846/skin/images/th.png