본문 바로가기
배워보자!!/html-css

[html/css] <img> 이미지 삽입 및 속성에 대해 알아보자!

by norinda 2015. 3. 4.
728x90

코드를 수정후 적용하기를 눌러 확인가능합니다.


웹문서에 <img> 태그를 사용해 이미지를 삽입 및 속성에 대해 알아보겠습니다.

기본적으로 이미지를 삽일할때는 이와 같이 쓰입니다.

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

간단하죠?ㅎㅎ

이미지 파일인 jpg , gif 는 웹 브라우저에서 바로 인식가능한 파일입니다.

태그대로 이미지를 추가했는데 이미지가 제대로 나오지 않는다면 이미지 경로를 한번 더 재확인 해보시는 것이 좋습니다.

<img>태그에 사용되는 속성에 대해 알아보겠습니다.

*alt

웹 페이지에 이미지를 삽입했을 경우 이미지에 마우스를 가져갔을때 설명글이 뜨게 해주는 속성입니다.

<img src="이미지경로" alt="이미지에 대한 설명글"/>


*border

<img>태그에서 border속성은 이미지의 테두리에 선을 지정해 줄 수 있는 속성입니다.

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


*width / height

<img>태그에 이미지지의 크기를 수정할 수 있는 속성입니다.

width는 가로 height는 세로 길이를 수정할 수 있습니다.

<img src="이미지경로" width="100" height="100"/>


반응형

댓글