본문

내 사이트에 사진을!, IMG 태그 - HTML 강좌



HTML 에 대해 정말 바닥부터 시원하게 설명을 듣고 싶으시다구요? http://donghoon.me/23 를 확인해 보세요!


이번 시간에는 HTML 에서 <IMG> 태그의 역할에 대해 알아보도록 하겠습니다.


<IMG> 태그


사이트에 글만 넣으면 상당히 지겨울 수도 있죠, 그래서 사이트에 이미지도 넣을 수 있습니다. 아래와 같은 이미지는 <IMG> 태그에 의해 보이게 되는데요. 사실 제 블로그의 게시글 맨 위에 항상 있는 이미지도 <IMG> 태그에 의해 유지된답니다.


그러면 본격적으로 <IMG> 태그를 사용하는 방법에 대해 알아보도록 하겠습니다.


이번 태그는 조금 복잡하게 느껴지실 수도 있습니다. src 라는 옵션이 사용 되었는데요, src 는 이미지가 어디에 있는지 경로를 지정해주는 것인데요. 만약 하나의 폴더 안에 html 파일과 이미지가 같이 있다면 이미지 파일명을 그대로 적으면 되겠지만, 그렇게 되면 이미지가 많아졌을 때 불편하기 때문에 우리는 폴더를 사용하죠. A 폴더 안에 html 파일과 B 라는 폴더가 있고, 그 B 폴더 안에 이미지가 있다면 ./폴더 이름/이미지 이름이 됩니다. 한번 아래의 예제를 통해 알아보시죠. ▼


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <img src="사진.jpg" />
            <!-- 사진이 html 파일과 같은 경로에 있다면 위와 같이 입력합니다. -->
            
            <img src="./폴더/사진.jpg" />
            <!-- 사진이 html 파일과 같이 있는 '폴더' 라는 폴더 안에 있다면 위와 같이 입력합니다. -->
    </body>
</html>
cs


여기서 잠깐! <IMG> 태그를 </IMG> 로 끝나게 해서 태그의 시작과 끝을 나눈 다음 그 사이에 글을 넣어 <IMG>안녕하세요!</IMG> 와 같이 입력하셔도 안녕하세요! 는 이미지 안에 나타나지 않으니 주의하세요!


공유

댓글 0