온라인에서 HTML <img> 요소 만들기
HTML Image Code 생성기는 입력한 이미지 소스, 대체 텍스트 및 선택적 크기로 <img> 요소를 만듭니다. 미리 보기, HTML 출력 및 C# 출력이 함께 업데이트되므로 웹페이지나 .NET 프로젝트에 복사하기 전에 이미지 태그를 확인할 수 있습니다.
Image 생성기 옵션
대화형 생성기는 다음 컨트롤을 지원합니다.
- Source에는
src특성에 사용할 상대 경로나 이미지의 절대 URL을 입력합니다. - Alt Text에는 정보를 전달하는 이미지의 내용을 설명합니다. 장식용 이미지일 때만 비워 두세요.
- Width와 Height에는 CSS 픽셀 단위의 양의 정수를 선택적으로 입력합니다.
미리 보기와 두 코드 패널은 자동으로 업데이트됩니다. 크기를 비워 두면 해당 특성은 생략되고 브라우저가 이미지의 고유 크기를 사용합니다.
C#에서 HTML <img> 요소 만들기
위의 HTML Code 패널에는 설정한 <img> 마크업이 표시됩니다. 아래의 C# Code 패널은
Aspose.HTML for .NET
으로 동일한 요소를 만듭니다.
생성된 코드는 다음 순서로 동작합니다.
HTMLDocument를 만들고Document.CreateElement()로HTMLImageElement를 만듭니다.Src와Alt를 설정하고 크기가 입력된 경우Width와Height도 설정합니다.Node.AppendChild()로 이미지를 문서 본문에 추가합니다.HTMLDocument.Save()로 완성된 문서를image.html로 저장합니다.
먼저 이미지를 설정한 다음 업데이트된 C# 코드를 .NET 프로젝트에 복사하세요.
HTML Image Code 생성기 FAQ
1. 이미지의 alt 텍스트에는 무엇을 입력해야 하나요?
페이지의 맥락에서 이미지가 전달하는 내용이나 기능을 설명하세요. 순수한 장식용 이미지에는 빈 alt 값을 사용하여 보조 기술이 무시할 수 있게 하세요. 파일명만 쓰거나 의미를 더하지 않고 주변 텍스트를 반복하지 마세요.
2. 미리 보기에 이미지가 표시되지 않는 이유는 무엇인가요?
Source가 브라우저에서 요청할 수 있는 기존 이미지를 가리키는지 확인하세요. 상대 경로는 현재 페이지 URL을 기준으로 해석됩니다. 외부 서버가 요청을 차단하거나 인증을 요구하거나 핫링크를 허용하지 않을 수도 있습니다.
3. 이미지 너비와 높이를 모두 지정해야 하나요?
고유 크기를 모두 지정하면 브라우저가 이미지 로드 전에 공간을 확보하여 레이아웃 이동을 줄일 수 있습니다. 원본 이미지의 가로세로 비율을 유지하는 값을 사용하세요. 맞지 않는 값은 이미지를 왜곡할 수 있습니다.
4. 전체 URL 대신 상대 이미지 경로를 사용할 수 있나요?
가능합니다. 상대 src는 HTML 문서 URL을 기준으로 해석되므로 페이지가 게시될 위치에서 유효한 경로를 사용하세요. 이미지가 다른 위치에 호스팅되면 절대 HTTP 또는 HTTPS URL을 사용하세요.
5. 생성된 이미지를 기존 HTML 문서에 추가할 수 있나요?
가능합니다. new HTMLDocument("input.html")로 기존 파일을 열고 예제처럼 이미지를 만들어 설정한 뒤 필요한 요소에 추가하고 수정된 문서를 새 파일로 저장하세요.
Aspose.HTML for .NET 설치
.NET CLI를 사용하여 NuGet에서 Aspose.HTML for .NET 을 설치합니다.
dotnet add package Aspose.HTML
NuGet 패키지 관리자 UI를 사용하거나 패키지 관리자 콘솔에서 Install-Package Aspose.HTML을 실행할 수도 있습니다. 설정 방법은
설치 가이드
를 참조하세요. 평가 제한 없이 API를 테스트하려면
임시 라이선스
를 요청할 수 있습니다.
관련 HTML 생성기
전용 생성기로 다른 HTML 구조와 요소를 만들 수 있습니다.