html 이미지 태그 사용하는 방법

개발툴|2018. 12. 18. 06:00

html 언어는 홈페이지를 만들 때 사용을 하는 언어입니다. 전 세계적으로 프론트엔드 개발을 할 때에 유용한 언어이기도 합니다. css, javascript도 사용을 한다면 좋은 실력을 갖출 수 있기도 합니다. html 이미지 태그 사용하는 방법에 대해 알아보도록 해요.



html 이미지 태그 사용하는 방법


html 이미지 태그 사용하는 방법


사이트나 홈페이지에 보여지는 이미지들은 이미지 태그를 사용을 하여 사진을 뛰우기도 합니다. 사진을 뛰우는 방법은 간단합니다. 웹서버가 있다면 웹서버에 사진을 업로드를 한 다음에 해당 사진의 주소가 필요합니다. apmsetup을 이용을 한다면 실행 중이어야 확인을 할 수 있습니다.




이미지 태그를 사용을 할려면 이미지가 필요합니다. 인터넷 포털사이트에 pixabay로 검색을 합니다. 웹사이트에 놀라운 무료 이미지 홈페이지에 접속을 합니다.



놀라운 무료 이미지 홈페이지에 원하는 이미지를 선택을 합니다.



해당 이미지를 무료 다운로드를 클릭합니다.



이미지 사이즈를 선택을 하여 다운로드를 클릭을 합니다.



다운로드에 등록된 사용자로써, 보안문자가 당신에게 표시되지 않습니다에 로봇이 아닙니다에 체크를 한 후에 다운로드를 클릭을 합니다. 해당 이미지가 다운로드가 됩니다.



다운로드 폴더에 다운로드 된 이미지를 볼 수 있습니다. 해당 이미지를 복사를 합니다.



apmsetup이 설치된 폴더 안에 htdocs 폴더에 붙여넣기를 합니다.



시작 - 보조프로그램 - 메모장을 엽니다.



메모장에 이미지 태그를 <img src="light-bulb-3535435_1920.jpg">를 입력을 합니다. 해당 다운로드 받은 이미지 이름 및 확장자를 입력을 합니다.



메모장에 상단메뉴에 파일 - 저장을 클릭을 하여 htdocs에 index.html로 저장을 합니다.



구글 크롬으로 localhost로 접속을 합니다. 다운로드 받은 이미지가 보이는 것을 확인을 할 수 있습니다.

댓글()