인터넷을 통해서 링크나 페이지를 구성할 때 이미지를 많이 쓰는데요. 이에 html 이미지 넣기 방법을 통해 웹페이지에 사진을 표시하는 방법을 알아보겠습니다.

이미지 태그를 손쉽게 알아보는 방법을 게시판을 통해 알아보는 방법인데요. 게시판을 통해서 이미지 업로드를 하신 뒤에 해당 태그를 검색해 보시면 <img>라는 태그가 보이실 겁니다. 바로 이 태그가 이미지 태그입니다.

img 태그 사용법

<img src =”해당 경로” [부가기능]/>

바로 위의 태그가 기본적인 이미지 태그인데요. src를 통해 이미지 경로를 지정해 주게 되면 해당 경로의 사진을 가져와 보여주게 됩니다.

img 태그 부가 기능

width : 이미지의 가로 크기

height : 이미지의 세로 크기

alt : 부가적인 설명

align : 정렬 위치

사용 예제

위에 설명한 방법을 토대로 예제를 구성해 보도록 하겠습니다.

위의 사진은 c드라이브에 있는 사진으로 크기는 가로 300 세로 225 사이즈 인데요.

이를 html을 이용하여 이미지 넣기를 해보도록 하겠습니다.

예제 태그는 다음과 같습니다.

src에 경로를 지정주고 align, width, height, alt를 부가적으로 적어봤습니다.

메모장에 적힌 태그를 html 형태로 저장해 주시기 바랍니다.

위의 예제를 익스플로러를 통해서 실행해 본 모습인데요.

이미지 사이즈는 지정해 준대로 조정되었고 위치도 잘 맞게 조정되었습니다.

위치 같은 경우는 text-align과 float 기능이 조합된 것 같이 적용되었는데요.

middle, center, left 등의 사용으로 자신의 위치를 찾으시면 될 것 같습니다.

위와 같이 html 이미지 넣기 태그를 이용해서 자신이 원하는 사진을 넣을 수 있으니 참고 하시기 바랍니다.