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 를 동시에 적용한 경우예요~!
