HTML에 그림을 추가하는 방법

요즘은 인터넷의 발달로 웹디자인이 중요한 기술이 되었습니다. 웹 디자인에서 그림은 매우 중요한 요소인 경우가 많습니다. 따라서 HTML에 이미지를 추가하는 방법은 모든 웹 디자이너가 마스터해야 하는 기본 지식입니다. 이 기사에서는 HTML의 기본 이미지 태그, 이미지 속성 및 일반적인 이미지 형식을 소개하고 이미지를 최적화하고 인용하는 방법을 소개합니다.

1. 기본 이미지 태그 및 속성

HTML에서는 <img src="/static/imghwm/default1.png" data-src="图片的url" class="lazy" alt="HTML에 그림을 추가하는 방법" > 태그를 통해 이미지를 삽입할 수 있습니다. 다음은 <img src="/static/imghwm/default1.png" data-src="图片的url" class="lazy" alt="HTML에 그림을 추가하는 방법" > 태그의 가장 기본적인 구문입니다.

<img  src="/static/imghwm/default1.png" data-src="图片的url" class="lazy" alt="HTML에 그림을 추가하는 방법" >

그 중 src 속성은 필수이며, 이미지 파일의 URL, 즉 서버에 있는 이미지의 주소를 지정합니다. alt 속성은 선택사항이며 이미지를 로드할 수 없을 때 표시되는 대체 텍스트를 정의합니다. 예:

<img  src="/static/imghwm/default1.png" data-src="https://example.com/image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

이미지 파일이 HTML 파일과 동일한 디렉토리에 있는 경우 상대 URL을 사용할 수 있습니다:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

상대 경로를 사용하여 이미지가 있는 하위 디렉토리를 지정할 수도 있습니다:

<img  src="/static/imghwm/default1.png" data-src="images/image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

src 및 alt 속성 외에도 일반적으로 사용되는 속성은 다음과 같이 이미지의 모양과 동작을 제어하는 ​​데 사용할 수 있습니다.

• width 및 height 속성: 이미지의 너비와 높이를 각각 지정하고 단위는 픽셀(px) 또는 백분율(%)일 수 있습니다.
• border 속성: 이미지의 테두리 너비를 지정합니다. 단위는 픽셀(px)일 수 있습니다.
• align 속성: 이미지의 가로 정렬을 지정합니다. 값은 왼쪽, 오른쪽 또는 가운데일 수 있습니다.
• title 속성: 사용자가 이미지 위로 마우스를 가져갈 때 표시되는 프롬프트 텍스트를 지정합니다.

예를 들어 다음 코드는 그림을 중앙에 배치하고 너비, 높이 및 테두리를 동시에 지정할 수 있습니다.

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

2. 일반적인 그림 형식

웹 디자인에는 일반적으로 사용되는 세 가지 그림 형식이 있습니다: JPEG, PNG와 GIF.

JPEG(JPG라고도 함)는 사진 및 기타 실제 이미지를 저장하는 데 일반적으로 사용되는 손실 압축 형식입니다. JPEG의 압축 품질은 압축 비율을 조정하여 제어할 수 있습니다. 압축 비율이 높을수록 이미지 품질은 떨어지고 파일 크기는 작아집니다.

PNG(Portable Network Graphics)는 투명도와 더 높은 색상 심도를 표시할 수 있는 무손실 압축 형식으로, 픽셀 수준의 그래픽과 아이콘을 저장하는 데 적합합니다. PNG는 일반적으로 JPEG보다 파일 크기가 크지만 품질은 더 좋습니다.

GIF(Graphics Interchange Format)는 애니메이션과 투명도를 지원하는 비트맵 기반 그래픽 형식으로, 여러 장의 사진을 하나의 파일로 압축할 수 있습니다. GIF는 일반적으로 이모티콘, 작은 애니메이션과 같은 작은 동적 사진을 저장하는 데 사용됩니다.

이미지 형식을 선택할 때는 이미지의 유형과 목적에 따라 사용할 형식을 결정해야 합니다. 예를 들어, 사진의 색상 그라데이션과 풍부한 세부 정보를 저장해야 할 경우 JPEG 형식을 사용할 수 있고, 투명도와 더 높은 품질을 저장해야 할 경우 PNG 형식을 사용할 수 있습니다.

3. 이미지 최적화 및 인용

웹 디자인에서는 이미지 최적화 및 인용도 매우 중요합니다. 이미지를 최적화하면 파일 크기가 줄어들고 페이지 로드 속도가 빨라질 수 있습니다. 다음은 몇 가지 일반적인 최적화 방법입니다.

• 이미지 압축: 이미지 품질에 영향을 주지 않고 파일 크기를 줄입니다.
• 이미지 자르기: 이미지에서 필요한 부분만 유지하고 파일 크기를 줄입니다.
• 캐시 이미지: 동일한 이미지를 반복적으로 다운로드하지 않으려면 브라우저 캐시를 사용하세요.
• CSS 스프라이트 사용: 여러 개의 작은 이미지를 하나의 큰 이미지로 병합하고, CSS의 배경 위치 지정을 사용하여 필요한 부분을 표시하고, HTTP 요청 수를 줄입니다.

이미지 인용 시 다음 사항에 주의해야 합니다.

• 이미지 파일 경로가 정확해야 합니다. 경로가 잘못되면 이미지를 로드할 수 없습니다.
• 사진은 웹페이지의 주제와 일치해야 합니다. 부적절한 사진은 웹페이지를 어수선하게 만들 수 있습니다.
• 이미지 크기를 너무 늘리지 마세요. 이미지가 너무 크면 페이지 로딩 시간이 늘어납니다.

이미지를 참조하는 방법에는 여러 가지가 있습니다. 예를 들어 상대 URL과 절대 URL을 사용하거나 기본 태그를 사용하여 기본 URL을 지정할 수 있습니다. 다음은 몇 가지 샘플 코드입니다.

상대 URL 사용:

<img  src="/static/imghwm/default1.png" data-src="../images/image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

절대 URL 사용:

<img  src="/static/imghwm/default1.png" data-src="https://example.com/image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

기본 태그 사용:

  


  <img  src="/static/imghwm/default1.png" data-src="images/image.jpg" class="lazy" alt="HTML에 그림을 추가하는 방법" >

요약

웹 디자인에서 그림은 매우 중요한 요소입니다. 이미지를 올바르게 참조하고 최적화하려면 HTML의 기본 이미지 태그와 속성을 이해하고 올바른 이미지 형식과 최적화 방법을 선택해야 합니다. 이 지식을 숙지해야만 아름답고 효율적인 웹 페이지를 디자인할 수 있습니다.

위 내용은 HTML에 그림을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!