먼저 서버에 이미지 폴더를 img라고 만들고 적당한 이미지를 폴더 안에 저장시킨다.
이미지를 서버에 저장한 모습
아래와 같이 타이핑 한후 img.html이란 이름으로 서버에 저장시킨다.
img는 이미지를 사용하겠다는 태그의 시작이며 src에는 이미지의 경로를 적어준다. width는 이미지의 폭, height는 이미지의 높이를 나타낸다. 보통 원본 이미지의 크기를 적거나, 사용하지 않지만, 필요할 경우 수동으로 이미지 크기를 조정할 수 있다. %를 붙여 이미지의 크기를 상대적으로 조정할 수도 있다. 만약 100%로 지정한다면 웹 브라우저를 크게 하거나 작게 하여도 항상 꽉 찬 이미지로 보여진다. 그렇지만 %를 사용하여 상대크기로 표현하면 이미지가 아래처럼 깨져 보이므로 주의하도록 한다.
보통 웹브라우저에서는 이미지를 표시할때 테두리가 보여지지 않지만, 이미지에 링크를 거는 경우 테두리 선이 나타나게 된다. 항상 테두리를 나타내려면 border에 원하는 굵기를 적어주면 된다. border값은 커질수록 테두리의 굵기가 굵어진다.
텍스트를 이미지의 상단, 중간, 아랫부분에 위치 시킬수있다. align에 top, middle, bottom을 사용하면 된다.
텍스트의 오른쪽이나 왼쪽에 이미지를 보이게 하려면 align에 left, right를 사용할 수 있다.
이번 시간에 알아본 이미지 정렬은 웹브라우저를 기준으로 한 것이고, 앞으로 배울 테이블 안에서 이미지 정렬을 하는 경우에는 테이블을 기준으로 정렬이 된다.
다음 시간에는 동영상, 플래시 파일 삽입하기에 대해 알아보겠다.
|
홈 > 게시판 > 자유게시판
이전글 : 
다음글 : 
