HTML - 이미지(img) 태그 와 src, width, height, alt 속성 - 텍스트 표시 (6)

HTML - 이미지(img) 태그 와 src, width, height, alt 속성 

텍스트 표시 (6)

 오늘은 HTML - img 태그 와 src, width, height, alt 속성에

 대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 이미지(img) 태그란?

웹 페이지에 이미지를 넣을 수 있게 하는 태그로서 

말 그대로 이미지(img)태그로 정의 됩니다.

<img 태그 기본 사용법>

1. img 태그는 다시 말하지만 이미지를 웹페이지에 삽입할때 사용됩니다. ^^

2. src 속성은 이미지 파일 이름을 지정하는것 예를 들면 이미지 파일이 상대경로있거나

절대경로로 있을 떄 그 경로를 입력 하는 것 입니다.

(추가로 본 이미지 파일은 프로필 이미지 yg.jpg를 

html 문서와 같은 위치에서 가져온 절대경로)

절대경로의 자세한 내용은 아래 링크

압타나 스튜디오 3 (Aptana Studio 3)

HTML 문서 편집 및 상대경로 절대경로  #4

에서 확인 하시기 바랍니다. ^^

추가로 웹에서 사용하는 이미지의 종류는 여러가지가 있는데

jpeg, jpg, png, gif 들중 jpg로 사용을 하겠습니다.

(지정하는 방법은 뒤에 이미지 종류에 따라 확장자만 바꿔주면 되니 꼭 기억!)

이 다음 width 가로 , height 세로 속성에 대하여

알아 보도록 하겠습니다.

<img태그에 width 가로 , height 세로 속성 사용법>

위 보시는 것과 같이 width 가로 , height 세로 300px값을 

src 절대경로 뒤에 지정했다.

기본 적으로  width 가로 , height 세로를 지정하지 않았을때는

이미지 원본의 크기로 지정이 되며 위  width 가로 , height 세로 속성을 임의로 지정했을때는

그 사이즈로 웹 브라우저에 출력이 된다.

 기본적으로  width 가로 , height 세로 속성에 적용하는 사이즈의 단위는 픽셀이지만

경우 때라 % 단위를 이용해서 브라우저의 크기에 비례하여 상대적으로

이미지 크기를 지정할 수 있다.

(이건 한번 해보시길 바랍니다. ^^)

이 다음 이미지 태그의 마자막 속성 alt 입니다.

alt 속성은 브라우저에 예상치 못한 이유로 이미지가 화면에 표시 되지 못했을 경우

표시되는 대체 텍스트를 입력하는 부분 입니다.

<alt 속성 사용법>

현재 위 이미지에서는 src 속성에 절대경로를 지웠기 때문에 

웹 브라우저 상에서 이미지가 표시가 되지 않습니다.

이때 위 처럼 img 태그 제일 끝 alt 속성에 

"긴냥아이콘" 이라는 택스트를 기입 하면 웹 브라우저 상에서

이미지가 나오지 않을 경우 해당 이미지가 어떠한 이미지인지 확인이 가능합니다. ^^

여기까지  HTML - 이미지(img) 태그 와 src, width, height, alt 속성 사용법에 관련되어 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보는게 더 이해하기 쉽습니다.

이상  HTML - 이미지(img) 태그 와 src, width, height, alt 속성   텍스트 표시 (6)에 

관련된 포스팅을 마치도록 하겠습니다.