1. 먼저 폴더를 생성합니다. (폴더이름: 연습) 그리고 이미지 파일만 모아놓을 폴더를 하나더 만들어 줍니다,
2. 삽입하려는 이미지를 생성한 폴더 내에 새로운 이미지 폴더(폴더이름: img)에 저장합니다.
이때 이미지의 확장자를 확인해줍니다.
저는 JPG파일이네요
3. 이제 HTML소스 코드를 넣어 봅시다.
소스코드
<!doctype html>
<html lang="ko"> <head> <meta charset="utf-8"> <title>연습</title> </head> <body> <img src="siba01.jpg" width="150" height=""150"> <p>첫번째 이미지 출력</p> </body> </html>
|
4. 편집기를 이용해서 위의 코드를 입력하고 저장합니다.
저장할때는 확장자를 HTML로 해주세요
저는 편집기를 EditPlus/Notepadd++ 를 씁니다.
editplus는 시디키가 필요한 프로그램이며 노트패드++는 프리웨어입니다.
코드를 넣은 화면입니다. 아름답죠
들여쓰는 버릇은 중요하다고 합니다.
본인의 기호에 맞게 들여써봅시다.
저장된 폴더에 HTML파일을 눌러주면 띠용?
어...? 사진이 안나옵니다.
다시 위의 소스코드로 돌아가 뭘 잘못했는지 스캔해봅니다.
이미지 파일 명을 "siba_01"인데 "siba01"로 잘못입력했죠
거기다 html폴더내의 새로운 폴더를 만들어 이미지를 저장했기 때문에
이미지 파일 앞에 폴더명을 적어주어야 해요!
그럼 수정하고 ctrl+s누른 후 다시 HTML파일을 눌러봅시다.
수정된 소스코드
쫜!
이렇게 길고 험난했던 HTML 이미지 삽입을 해보았습니다.
'HTML' 카테고리의 다른 글
Echart resize (0) | 2024.06.06 |
---|---|
table colgroup 사용방법 (0) | 2018.10.14 |
javascript 페이지 이동 (0) | 2018.10.05 |
HTML 색상표현 (0) | 2017.12.19 |
HTML이란? (0) | 2017.12.18 |