본문 바로가기

강의실/HTML

그림지정

그림 크기 지정
 
 
 
보통은 그림의 크기를 지정하지 않으면 브라우저는 그림의 크기를 계산하여 그림을 정확하게 보여준다. 하지만 그림의 크기를 강제로 지정하면 브라우저는 그림의 원래크기를 무시하고 지정한 크기(높이와 넓이)로 그림을 화면에 뿌린다.

이런 성질을 이용해서 몇가지 팁도 있는데 여기서는 그림을 강제적으로 지정하는 방법만 알아보도록 한다.

그림의 크기 지정하기
예제 설명
<IMG SRC="그림지정" WIDTH="넓이" HEIGHT="높이"> 보다 빨리 로딩되고 있다는 느낌을 주기 위해 <IMG>태그안에 이미지의 넓이와 높이(픽셀단위) 속성을 포함시킨다.

이것은 이미지가 놓일 자리를 규정하고 이미지가 완전히 로딩되어 표현되기 전에 텍스트페이지가 보이게 하여 준다. 텍스트가 먼저 나타나면 페이지가 더 빨리 로딩되었다는 느낌을 갖게 한다.

이미지의 크기를 재조정하려면 그래픽 프로그램으로 가져가서 크기를 재조정한 후 다시 저장해서 사용해야 한다. 하지만 HTML3.0문서에서는 이러한 그래픽 이미지들의 크기까지 조정할 수 있도록 배려하고 있다.

이미지 크기를 재조정하려면 WIDTH와 HEIGHT를 적절히 조절하면 되는데 먼저 이미지의 기본 크기가 얼마인지를 알아내야 한다. 이미지의 크기를 쉽게 알아낼수 있는 방법은 포토샵과 같은 그래픽 편집 프로그램을 활용하는 것이다.포토샵을 사용하여 이미지를 열면 하단에 이미지에 대한 정보가 나온다.
   

'강의실 > HTML' 카테고리의 다른 글

배경 음악 삽입  (0) 2007.07.17
그림에 링크 걸기  (0) 2007.07.17
그림과 글자 정렬  (0) 2007.07.17
그림삽입  (0) 2007.07.17
공백넣기  (0) 2007.07.17