HTML언어 쉽게 따라하기 - 이미지 넣는 태그

HTML언어 쉽게 따라하기 - 이미지를 넣는 태그

오늘은 이미지를 넣는 방법에 대해 알아보겠다. 웹 브라우저 문서에 이미지를 넣게 되면 자신의 홈페이지에 좀 더 화려한 효과를 줄 수 있다. 단순히 텍스트만 들어간 홈페이지 보다는 이미지를 추가해서 만든 보기 좋은 홈페이지가 좋을 것이다. 그럼 이미지를 넣기 위해선 어떤 태그가 들어가는지 보겠다.

HTML 이미지 태그

이미지를 연결하는 태그는 <img> 태그 이다.

이미지를 html 문서에 연결하기 위해서는 다음과 같은 형식으로 사용된다.

위의 이미지를 html 문서에 삽입하는 방법을 보고 너무 복잡하다고 생각하는 경우가 많다. 그러나 하나하나 살펴보면 그리 어려운 내용은 없다. 단지 이미지를 연결하고, 정렬하고, 크기를 지정하고, 테두리를 지정하고, 마지막으로 이미지에 대한 툴팁을 나타내는 정도이다. 이중에서 사용자가 사용하고 싶지 않은 속성은 생략해도 된다.

만일 단순히 이미지만 넣고자 한다면, <img src="이미지 파일 url"> 만 넣으면 되는 것이다.

src 속성은 이미지를 문서에 삽입하기 위해서 사용되며 이미지의 위치를 지정해야 한다. 이때 이미지를 연결하기 위해서는 이미지가 이미 웹상에 올려져 있어야 한다. 보통 ftp를 통해 자신만의 웹상 저장공간에 파일들을 올려놓고 그 주소를 이미지 파일 url에 입력하면 된다. 자신만의 웹저장공간이 없는 경우 걱정할 필요는 없다. 우리는 티스토리를 하고 있으니 티스토리에 올리면 된다.

그럼 티스토리에 이미지 파일을 올려보자.

티스토리 관리자 페이지로 가면 블로그관리홈> 꾸미기> HTML/CSS편집 으로 들어간다.

우측 상단의 파일업로드를 클릭한다.

우측 하단의 +추가 버튼을 클릭하여 올리고자 하는 이미지를 클릭하여 업로드 한다.

그러면 올라간 파일이 보일 것이다. 그 파일위에 커서를 놓고 마우스 우측 버튼을 누르면 창이 나오는데 링크주소 복사를 클릭한다. 그러면 주소가 복사된다.

이제 주소를 복사했으면 메모장을 열어 복사한것을 붙여 넣는다. 그러면 아래와 같은 주소가 나올것이다.

이제 다른 메모장을 열고 이미지를 넣어보도록 하자.

이미 배운것 처럼 HTML 기본 구조는 다음과 같다. 이미지 태그는 <body>와 </body> 사이에 넣어주면 된다.

<html>

<head>

</head>

<body>

</body>

</html>

이미지 파일 url 부분에 아까 복사해 놓은 이미지 주소를 넣으면 된다. 다 됐으면 저장을 한다. 전에 배운것 처럼 메모장을 저장할때 제목.html 이렇게 저장을 해야 웹페이지로 저장이 된다. 그럼 저장된 파일을 클릭하여 창을 띄워 보자. 그럼 아래 처럼 잘 나온것을 알 수 있다.