5. 이미지 요소 및 속성

<img src="URL" alt="설명" width="pixel or %" height="pixel or %" align="위치" border="pixel" />

이미지를 불러온다는 의미는 페이지 내에 사용 될 이미지를 불러들여 배치(삽입)하는 것을 말합니다. 로컬컴퓨터에 미리 준비한 이미지의 경로나 웹상에 있는 경로를 사용하여 지정하여 부릅니다.

닫힘 태그는 사용하지 않으며, 'src(source)'는 웹페이지에 표시할 이미지 파일의 URL을 지정하는 필수 속성입니다.

src=“URL or URI"

source의 의미로 삽입될 이미지의 경로를 말합니다.

align="left/right/center"

브라우저에 이미지의 위치를 표현합니다. W3C 비권장 태그속성입니다.

이미지를 기준으로 텍스트 정렬하기 align="top/middle/bottom/baseline"

이미지 태그의 기본적인 속성은 이미지와 텍스트를 한 줄(행)에 같이 배치해서 표현합니다. 이 경우 이미지의 맨 밑으로 텍스트가 배치되는데, 이런 이미지에 대한 텍스트의 정렬 표시 방법을 지정합니다.

+ top

같은 줄에 존재하는 가장 높은 텍스트나 이미지의 상단에 나머지 이미지의 상단을 맞춥니다.

+ middle

같은 줄에 존재하는 가장 높은 텍스트나 기준선에 나머지 이미지의 중앙을 맞춥니다.

+ bottom

같은 줄에 존재하는 가장 높이가 낮은 텍스트나 기준선에 나머지 이미지들을 맞춥니다.

+ baseline

'bottom' 과 흡사하지만 행의 아래를 기준을 정렬합니다.

이미지 주위로 텍스트 배치하기 align="left/right"

잡지나 신문처럼 이미지 주위를 감싸듯이 텍스를 배치하는 이미지 속성입니다.

alt="로고 이미지"

alternate Text 라는 뜻으로 마우스를 그림 위에 올려놓았을 때 나오는 짧은 설명글입니다. 검색엔진에서 검색 Robot이 웹상의 문서를 검색할 때 이 text들에 대한 정보를 가져갑니다.

표준에서는 필수속성이므로 반드시 작성 하며, 만약 그림 파일의 링크가 깨져서 그림이 안 보일 때는 이 설명글이 대신 나옵니다.

테두리표현 border="pixel"

그림의 테두리 두께를 표현해주는 속성으로 값은 pixel 로 표현됩니다. W3C비권장 태그속성입니다.

너비와 높이 width/height="pixel or %"

이미지 파일의 속성을 사용하지 않으면 원본크기로 삽입되어 집니다.

이미지 주변에 여백 설정 hspace/vspace

삽입된 이미지로 부터 텍스트 사이의 여백을 지정할 수 있습니다.

'hspace'는 'horizontal space'의 의미로 가로방향의 좌·우 여백을 지정하고, 'vspace'는 'vertical space'의 의미로 세로방향의 상·하 여백을 지정합니다. W3C비권장 태그속성입니다.

<< 1 2 3 4 5 6 7 >>