이미지는 웹 페이지의 모양을 개선하고 고객 상호 작용을 증가시키기 때문에 웹 페이지에서 매우 중요한 부분입니다. 여러 웹 사이트의 USP는 웹 페이지에서 서로 다른 이미지를 구성하고 풍미를 추가하는 방법입니다. 이것에 이미지 기사, 다음 순서로 HTML을 사용하여 웹 페이지에 이미지를 삽입하는 방법을 이해합니다.
HTML에 이미지를 추가하는 방법
웹 페이지에 이미지를 포함하려면 HTML이 제공합니다. 꼬리표. 기억해야 할 또 다른 중요한 점은
닫는 태그가 없습니다. scr 속성은 이미지의 경로를 지정하는 데 사용되며 시스템 / 서버의 URL 또는 이미지 경로 일 수 있습니다. 먼저 HTML을 사용하여 웹 페이지에 이미지를 삽입하는 기본 구문부터 시작하겠습니다.
통사론
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>샘플 코드
웹 페이지에 이미지를 포함하는 HTML 이미지
다른 태그와 마찬가지로 다양한 속성이 꼬리표. 각각을 하나씩 살펴보고 필요와 사용 방법을 이해합시다.
HTML 이미지 태그
- alt 속성
alt 속성은 이미지의 대체 텍스트입니다. alt 속성이 도입 된 이유는 어떤 이유로 이미지를로드 할 수없는 경우 이미지에 대한 아이디어를 제공하는 대체 텍스트가 나타나야하기 때문입니다. 이미지가로드되지 않는 이유는 인터넷 연결이 느리거나 제공된 소스에 이미지가 존재하지 않기 때문일 수 있습니다.
이미지가 HTML 파일이있는 동일한 폴더에있는 경우 파일 이름을 직접 지정할 수 있습니다. 그렇지 않으면 이미지 파일의 절대 경로를 제공해야합니다.
alt 속성의 값은 이미지를 설명해야합니다.
예
웹 페이지에 이미지를 포함하는 HTML 이미지
r 프로그래밍 언어를 사용하는 회사
- 이미지의 너비와 높이
Style 속성은 이미지의 높이와 너비를 설정하는 데 사용됩니다. 스타일 속성에서 CSS 스타일을 지정합니다.
웹 페이지에 이미지를 포함하는 HTML 이미지
HTML을 사용하여 웹 페이지에 이미지를 삽입 할 때 중요한 몇 가지 사항은 다음과 같습니다.
- 너비 및 높이 속성은 픽셀 단위로 정의됩니다.
- 이미지의 너비와 높이를 백분율로 정의 할 수도 있습니다. 전체 웹 페이지에 따른 비율을 고려합니다.
- 그중 하나만 지정하면 그에 따라 다른 것도 조정됩니다.
- URL을 사용하여 이미지 삽입
HTML은 또한 URL을 지정하기 만하면 다른 서버에서 이미지를 선택할 수있는 유연성을 제공합니다. 별도의 서버를 사용하여 이미지를 호스팅 한 다음 URL을 사용하여 해당 이미지를 포함 할 수 있습니다.
웹 페이지에 이미지를 포함하는 HTML 이미지
- 링크로 이미지
사용자가 이미지를 클릭하여 새 웹 페이지로 이동할 수있는 링크로 이미지를 사용할 수도 있습니다. 이렇게하려면 하루 꼬리표.
웹 페이지에 이미지를 포함하는 HTML 이미지
- 이미지 플로팅
CSS float 속성을 사용하여 이미지 정렬을 조정할 수도 있습니다. 모든 CSS 속성은 스타일 속성에 지정되어야합니다.
자바는 메소드에서 탈출
HTML 이미지
- 이미지 맵
이것은 HTML에서 제공하는 중요한 기능 중 하나입니다. 태그는 이미지 맵을 정의하는 데 도움이됩니다. 이미지 맵이 무엇인지 궁금 할 것입니다. 이미지 맵은 클릭 가능한 영역이있는 이미지입니다.
HTML 이미지
- 배경 이미지
웹 페이지에 배경 이미지를 추가 할 수도 있습니다. CSS 속성, 즉 스타일 태그의 background-image를 사용하여 HTML 요소에 추가하기 만하면됩니다.
HTML 이미지배경 이미지
BODY 요소
이것으로 우리는이 HTML 이미지 블로그의 끝입니다.이제 위의 스 니펫을 실행 한 후 HTML에 이미지를 삽입하는 방법을 이해했을 것입니다. 이 블로그가 유익하고 가치가 있기를 바랍니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 'HTML 이미지'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.