HTML 이미지 삽입

2017. 12. 18. 23:38

1. 먼저 폴더를 생성합니다. (폴더이름: 연습) 그리고 이미지 파일만 모아놓을 폴더를 하나더 만들어 줍니다,

2. 삽입하려는 이미지를 생성한 폴더 내에 새로운 이미지 폴더(폴더이름: img)에 저장합니다.

이때 이미지의 확장자를 확인해줍니다.

저는 JPG파일이네요

3. 이제 HTML소스 코드를 넣어 봅시다.

소스코드

<!doctype html>

<head>

</head>

<body>

</body>

</html>

4. 편집기를 이용해서 위의 코드를 입력하고 저장합니다.

저장할때는 확장자를 HTML로 해주세요

저는 편집기를 EditPlus/Notepadd++ 를 씁니다.

editplus는 시디키가 필요한 프로그램이며 노트패드++는 프리웨어입니다.

코드를 넣은 화면입니다. 아름답죠

들여쓰는 버릇은 중요하다고 합니다.

본인의 기호에 맞게 들여써봅시다.

저장된 폴더에 HTML파일을 눌러주면 띠용?

어...? 사진이 안나옵니다.

다시 위의 소스코드로 돌아가 뭘 잘못했는지 스캔해봅니다.

이미지 파일 명을 "siba_01"인데 "siba01"로 잘못입력했죠

거기다 html폴더내의 새로운 폴더를 만들어 이미지를 저장했기 때문에

이미지 파일 앞에 폴더명을 적어주어야 해요!

그럼 수정하고 ctrl+s누른 후 다시 HTML파일을 눌러봅시다.

수정된 소스코드

쫜!

이렇게 길고 험난했던 HTML 이미지 삽입을 해보았습니다.

옆집동생