HTML 기초, <img>태그속성 align, vspace, hspace, width, height (12번째)

<img> 태그의 속성알아보기 두번째 입니다. <img> 태그의 속성은 이번 포스팅에서 끝납니다~!

하이퍼링크, 프레임, 테이블 남았네요. 아자아자! ♬

HTML 기초, <img> 태그속성 align, vspace, hspace, width, height

◎ 이미지와 함께 있는 글자의 위치를 지정하는 align 속성

이미지 파일은 한글자처럼 취급됩니다. HTML 문서에서 이미지 다음에 글자를 기술하면 그림과 글씨가 나란히 출력되는

모습을 볼 수 있습니다. 출력되는 글자의 위치를 <img> 태그의 align 속성으로 조정할 수 있습니다.

수직 방향을 기준으로 지정하기 때문에 align의 속성값은 'top', 'middle', 'bottom' 중 하나를 기술합니다.

아무런 조건을 지정하지 않으면 bottom 속성값으로 나타납니다. 

속성	속성값	설명
align	top	이미지의 윗부분에 맞추어 글자를 출력
	middle	이미지의 가운데 부분에 맞추어 글자를 출력
	bottom	이미지의 아래 부분에 맞추어 글자를 출력

예문)

<img src="이미지 파일명" align="top / middle / bottom">

 

 

 

# align 속성은 이미지의 위치도 조정할 수 있습니다.

<img> 태그의 align 속성을 'left', 'right'로 지정하면 이미지가 웹 브라우저 화면의 왼쪽 혹은 오른쪽으로 정렬되서 출력됩니다.

예문)

<img src="이미지 파일명" align="left / right">

 

 

◎ 이미지 주변에 여백을 설정하는 vspace, hspace 속성

<img> 태그의 'vspace' 와 'hspace' 속성을 지정하면 이미지와 출력되는 글자 사이의 여백을 설정 할 수 있습니다.

이를 설정할 때 사용되는 단위는 픽셀 단위입니다.

hspace 속성을 이용해 여백을 줄 때 왼쪽, 오른쪽(양쪽) 모두에 공백을 주게됩 니다.

하지만 이미지 어느 한쪽에만 여백을 설정할 수는 없습니다.

속성	속성값	설명
vspace	'픽셀 수'	이미지의 상하에 지정한 픽셀 수만큼 여백을 준다.
hspace	'픽셀 수'	이미지의 좌우에 지정한 픽셀 수만큼 여백을 준다.

 

 

 

 

◎ 이미지 표시 크기 조절하는 width, height 속성

<img> 태그에 이미지 파일을 지정하면 원래의 크기대로 화면에 출력됩니다. 하지만 width, height 속성을 사용하면

이미지의 원래 크기를 원하는대로 축소 / 확대할 수 있습니다. 이미지 크기는 픽셀 수 / 화면 전체의 크기에 대한 비율(%)로 지정합니다. 이미지의 width 속성만 지정하면 너비는 지정된 크기만큼 조정되며, 높이의 경우 이미지의 원래 가로 / 세로 비율에

맞춰 자동으로 조정됩니다.

속성	속성값	설명
width	n / n%	이미지의 폭이 지정한 n 픽셀수로 출력되거나 n% 비율로 확대 혹은 축소된다.
height	n / n%	이미지의 좌우가 지정한 n 픽셀수로 출력되거나 n% 비율로 확대 혹은 축소된다.

 

 

 

 

 

▲△ width 만 적용한 경우입니다.

▼▽ width 와 height 를 동시에 적용한 경우예요~! 

 

 

 

<관련글>

[유용한정보/IT / PC] - HTML 기초, 태그와 src, alt, border 속성 (11번째)