html 이미지 넣기
▣ html 이미지 넣기
■ 이번 글에서는 html에서 이미지 넣기 방법에 대해서 알아보겠습니다. 가장 많이 이용하는 이미지로 GIF와 JPG를 들 수 있는데요. GIF파일은 움직이는 사진까지 만들 수 있기 때문에 더 많이 이용하실 거에요. 좀 더 세부적인 내용은 나중에 살펴보기로 하고 여기서는 html 이미지 삽입 태그와 이미지를 설정할 수 있는 몇 가지 명령어들을 이용해서 직접 이미지를 넣어보겠습니다.
먼저 이미지 태그의 형식은 다음과 같습니다.
<img src="파일경로" border = 테두리 두께 align=위치 width=너비 height=높이 hspace=왼쪽여백 vspace=위쪽여백 alt="설명">
■ 조금 복잡해 보이나요? 천천히 하나씩 입력해보도록 할게요. 여러분도 직접 해보시면 쉽게 이해가 되실 거에요. 먼저 테스트에 이용할 이미지를 하나 준비하겠습니다.
■ "test"라는 이름의 파일을 준비했구요. 바탕화면에 저장했습니다. 속성 창에서 경로를 복사해놓겠습니다.
이제이미지 태그의 형식을 참고 해서 메모장에 html 코드를 하나씩 입력해보겠습니다.
■ <img 태그>를 이용해서 그림의 경로를 입력해주고, "align" 명령어를 이용해서 문장의 위치를 지정해주었습니다.
여기서 [align] 명령어 몇 가지만 더 알아보고 넘어갈게요. 위 소스는 문장을 그림을 중심으로 문장의 위치를 잡아준 건데요. 문장을 기준으로 그림을 넣어줄 수도 있습니다. 일단 위에서 입력한 bottom, top, middle 은 그림을 중심으로 문장의 위치를 넣어주는 거구요.
[left, right, center] 등의 명령어는 문장을 중심으로 이미지의 위치를 정해주는 것입니다. 예를 들어 "align=left" 라고 입력하면 문장을 중심으로 왼쪽에 그림이 삽입되는 거에요.
다음은 'texttop' 은 그림을 가장 위에 있는 문장에 맞춰서 정렬하는 명령어 이고, 'absbottom'은 이미지의 하단에 맞춰 문장을 정렬시킵니다. 'absmiddle'는 이미지의 중간지점을 가운데 줄에 정렬하는 명령어이고, 'baseline'은 이미지의 하단을 현재 문장의 기준선에 맞춰 정렬하는 명령어입니다.
다 직접 입력해서 보여 드리면 좋은데..그렇게 하지 못한 점 죄송해요. 설명드리는 것보다 직접 해보시는 게 더 이해가 빠를 겁니다. align 다음에 각각의 명령어들을 넣어서 어떻게 실행이 되는지 살펴보세요. ^^
그림 위에서 입력한 내용을 브라우저에서 실행해보겠습니다.
■ 이렇게 이미지가 삽입되고...입력한 문장들이 align의 명령어에 따라서 각각의 위치를 확인할 수 있습니다. 다른 align명령어들도 꼭 직접 입력해보시고...어떻게 위치가 변하는지 알아두세요.^^
다음은 그림의 크기를 변경해보고, 테두리도 넣어보고 alt 명령어를 이용해서 마우스를 그림에 올리면 설명글이 나타나도록 해보겠습니다. 형식에서 보셨듯이 그림의 크기는 width와 height 명령어를 이용해서 조절해 줄 수 있구요. 테두리는 border 명령어를 이용하면 됩니다. 크기를 조절하는 수치는 그냥 숫자를 입력하면 픽셀의 크기로 지정되구요. "%"로 입력을 할 수도 있습니다. 예제를 보시죠.
■ 같은 그림에 왼쪽여백과 그림의 크기를 픽셀과 비율(%)로 설정 해봤구요. 그림에 테두리를 씌우고, 툴팁을 이용해서 설명글이 출력되도록 입력한 내용입니다. 브라우저에서 실행 해볼게요.
■ 메모장의 입력 내용과 브라우저의 출력 내용이 비교가 되시죠? 테두리 색이 검정색이라서 잘 안보일수도 있겠네요.ㅠ.ㅠ 눈으로만 보는것보다..직접 메모장에 입력해서 브라우저에서 실행해보시면 쉽게 이해가 될 거에요. ^^저도 책만 보면서 공부하는 것보단 이렇게 직접 해보면서 정리하니까 머리에 쏙쏙 들어오네요. ㅎ 여러분도 똑같이 해보셔요.
이렇게 해서 html에서 이미지 넣는 방법을 알아봤는데요. 좀 더 세부적인 내용은 앞으로 계속 가면서 정리하도록 할게요. 오늘은 <img> 태그를 이용해서 그림을 넣고, 간단한 태그들 몇 가지 살펴봤습니다. . 수고하셨습니다.^^