[코딩 14] HTML 이미지 태그 img

 

[코딩 14] HTML 이미지 태그 img

 

 

경로 설정 이미지

 

이미지 태그를 사용하기 위해서 위와 같이 경로 설정이 필요하다. 

 

 

[코딩 3]에서 포스팅했던 배경이미지의 경로 설정과 동일한 방법이다. 

 

 

폴더명은 임의로 정했다. 

 

 

coding 폴더 > 이미지태그.html

coding 폴더 > images 폴더 > heart.jpg

 

 

html 편집기 작성 이미지

 

이미지 태그

<img src="상대경로/이미지명.확장자" alt=" 대체 텍스트" />

 

 

img 태그에 src 속성과 alt 속성을 필수로 적어줘야 한다. 

 

 

img 태그는 닫히는 태그가 없다 </img>

위 이미지를 보면 img 태그 맨 마지막 부분에 한칸 띄고 /를 넣어줬다. 

 

 

편집기에 입력을 하다보면 내용이 길어지기 때문에 헷갈릴 때가 있다. 

 

 

그래서 닫히는 태그가 없는 태그는 마지막에 한칸 띄고 /를 넣어서 임의로 구분해준 것이다. 

<br /> 이런식으로. (예시)

 

 

않적어줘도 되는데 적어주는 습관을 들이면 코딩 시 꽤 유용하다. 

 

 

결과 이미지

 

웹페이지 결과 화면이다. 

 

 

추가 속성으로는 

<img src="상대경로/이미지.확장자 alt="대체 텍스트" align="left 또는 right" />

 

 

align 속성은 이미지를 왼쪽 또는 오른쪽으로 정렬시켜준다. 

 

 

그리고 img 태그 안에 widht="너비" height="높이" 속성을 사용해서 

이미지의 너비와 높이를 조절할 수 있다. 

 

 

align 속성이나 width, height 속성은  알아만 두고

img 안에 src 속성과 alt 속성은 필수로 넣어준다는 건 잊지 말자.

 

 

img 태그는 많이 사용하는 태그이므로, 꼭 기억해 두자.