HTML 강좌 5강 - HTML 태그 익히기#4

HTML 강좌 5강 - HTML 태그 익히기#4

지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자.

*이미지 태그

문서에 이미지를 삽입하는 태그이다.

사용방법은 다음과 같다.

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

그리고 이미지 태그의 속성을 이용하여 이미지의 크기를 변경할 수 있다.

<img src="이미지경로" width="넓이값" height="높이값">

예제를 위해 어떠한 이미지도 좋으니 HTML 문서와 같은 폴더에 임의로 이미지를 넣어보자.

이미지의 경로는 상대경로, 절대경로 두 가지 경로가 있다.

상대경로 : 웹문서의 위치기반

절대경로 : 웹디렉터리의 최상위 루트폴더 기반

현재는 서버기반 강좌가 아니기 때문에 상대경로만 간단히 설명하겠다.

예를들어 테스트 하고자 하는 웹문서가 E:\HTML 공부방\05\01.html 이라고 가정하자.

01.html 문서에 이미지를 넣고자 코딩을 할 경우 웹문서와 같은 경로인 E:\HTML 공부방\05\ 부터 시작하는 경로가 상대경로인 셈이다.

문서의위치 : E:\HTML 공부방\05\01.html

이미지의위치 : E:\HTML 공부방\05\test.jpg

문서에서 이미지 불러오기

<img src="test.jpg">

이미지와 문서가 같은 경로에 존재하기 때문에 특별한 폴더 경로를 지정할 필요가 없다.

이것이 상대경로이다.

예제를 통해 테스트를 해보자.

 

위와 같이 코딩을 하고 웹문서를 실행해 보자.

 

같은 폴더에 test.jpg 라는 이미지가 존재하면 웹문서에 이미지가 나오는걸 볼 수 있을 것이다.

 

만약 이미지가 보이지 않는다면 위와 같이 같은 폴더에 이미지를 넣었는지 확인해보자.

이번에는 이미지 태그의 속성을 사용하여 크기를 변경해 보자.

 

위와 같이 넓이값으로 300, 높이값으로 300 픽셀을 주었다.

그리고 나서 웹문서를 실행해 보면..

 

위와 같이 300픽셀 사이즈의 정사각형 모양으로 사진의 크기가 변경된 것을 볼 수 있을 것이다.

이미지 속성에는 border 속성도 있는데, border 속성은 이미지의 테두리 라인의 두께를 설정해 주는 속성이다.

보통 잘 사용하지 않지만, 이미지의 테두리가 보여 신경이 쓰일 경우는 border="0" 으로 속성값을 넣어주면 해결된다.

그리고 이미지와 텍스트가 같이 있는 경우, 이미지와 텍스트의 위치를 변경 할 수 있는 속성이 있다.

바로 align 속성인데, 사용법은 다음과 같다.

<img src="test.jpg" width="300" height="300" align="top">

<img src="test.jpg" width="300" height="300" align="middle">

<img src="test.jpg" width="300" height="300" align="bottom">

 

위와같이 P태그로 이미지와 텍스트를 감싸고, 이미지 태그에 각각의 속성값을 넣어준 후 실행을 해보자.

 

위와같이 텍스트의 위치가 상중하 세단계로 위치하는 것을 볼 수 있다.

이번엔 aligh 속성에 또 다른 속성값인 left, right 속성값을 테스트 해보자.

사용법은 다음과 같다.

<img src="test.jpg" width="300" height="300" align="left">

<img src="test.jpg" width="300" height="300" align="right">

 

위와같이 코딩을 하고 문서를 실행해 보자.

 

위와같이 텍스트와 이미지가 왼쪽, 오른쪽으로 정렬되는 것을 볼 수 있다.

예제 파일은 첨부파일에서 받을 수 있습니다 :)

05.zip