HTML 이미지 삽입: 웹페이지에 생동감을 더하는 방법

HTML 이미지 삽입: 웹페이지에 생동감을 더하는 방법

 

목차

1. HTML 이미지 삽입의 기본
   • 태그 소개
   • src 속성: 이미지 파일 경로 지정
   • alt 속성: 이미지 설명 추가
2. 이미지 크기 조절하기
   • width와 height 속성 활용
   • CSS를 이용한 크기 조절
3. 이미지 서식 지정하기
   • 이미지 정렬
   • 이미지 테두리 설정
   • 이미지 간격 조절
4. 이미지 링크 만들기
   • 태그와 함께 사용하기
5. 반응형 이미지 만들기
   • srcset 속성 활용
   • picture 요소 활용

본문

1. HTML 이미지 삽입의 기본

웹페이지에 이미지를 삽입하는 가장 기본적인 방법은 <img> 태그를 사용하는 것입니다. <img> 태그는 혼자서 완결되는 요소(void element)로, 닫는 태그가 필요하지 않습니다.

<img src="이미지 파일 경로" alt="이미지 설명">

• src 속성: 이미지 파일이 저장된 경로를 지정합니다.
• alt 속성: 이미지를 설명하는 텍스트를 입력합니다. 이 텍스트는 이미지가 로딩되지 않거나 시각 장애인을 위한 화면 낭독 프로그램이 이미지를 읽을 때 표시됩니다.

2. 이미지 크기 조절하기

<img> 태그의 width와 height 속성을 사용하여 이미지의 너비와 높이를 직접 지정할 수 있습니다.

<img src="image.jpg" alt="샘플 이미지" width="200" height="150">

CSS를 사용하여 이미지의 크기를 조절할 수도 있습니다.

img {
  width: 100%; /* 부모 요소의 너비에 맞춰 자동 조절 */
  height: auto; /* 비율 유지 */
}

3. 이미지 서식 지정하기

CSS를 활용하여 이미지의 정렬, 테두리, 간격 등을 설정할 수 있습니다.

img {
  display: block; /* 이미지를 블록 요소로 설정 */
  margin: 20px auto; /* 위아래 여백 20px, 가운데 정렬 */
  border: 2px solid #ccc; /* 회색 테두리 */
}

4. 이미지 링크 만들기

<a> 태그 안에 <img> 태그를 넣어 이미지를 클릭하면 특정 페이지로 이동하도록 설정할 수 있습니다.

<a href="https://example.com">
  <img src="image.jpg" alt="링크 이미지">
</a>

5. 반응형 이미지 만들기

다양한 화면 크기에 맞춰 이미지를 최적화하려면 srcset 속성이나 picture 요소를 사용합니다.

• srcset 속성: 이미지 파일을 여러 크기로 준비하여, 브라우저가 화면 크기에 맞는 이미지를 자동으로 선택하도록 합니다.

<img src="image.jpg" alt="반응형 이미지"
     srcset="image-small.jpg 320w, image-medium.jpg 640w, image.jpg 1024w">

• picture 요소: 다양한 미디어 쿼리를 사용하여 이미지를 선택적으로 로드합니다.

<picture>
  <source media="(min-width: 768px)" srcset="image-large.jpg">
  <source media="(min-width: 480px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="반응형 이미지">
</picture>

이 외에도 이미지 효과, 필터 등 다양한 기능을 CSS를 활용하여 구현할 수 있습니다.

HTML 이미지 삽입은 웹페이지를 더욱 풍부하게 만들어주는 필수적인 기술입니다. 위에서 설명한 내용을 바탕으로 다양한 웹페이지를 제작해 보세요.