이미지 삽입

1.1 <img> 요소

HTML에서 멀티미디어는 웹 페이지의 시각적 인식을 향상시키는 데 중요한 역할을 해. 이미지를 삽입하는 것은 HTML 멀티미디어에서 중요한 부분 중 하나야. 대부분의 경우 <img> 요소가 사용돼. 이걸 좀 더 자세히 살펴보자:

<img> 요소는 웹 페이지에 이미지를 삽입하기 위해 사용돼. 이 요소는 빈 요소로, 닫는 태그가 없고 단지 속성만 포함해.

문법

    <img src="이미지_URL" alt="설명" width="너비" height="높이">
  

    
      <img src="images/photo.jpg" alt="이미지 설명" width="500" height="300">
    
  

<img> 요소의 속성을 좀 더 자세히 살펴보자

1.2 src 속성

src 속성의 전체 이름은 source (소스)야.

src 속성은 페이지에 표시할 이미지 파일의 경로를 지정해. 이 경로는 절대 경로나 상대 경로일 수 있어.

예시:

절대 URL:

    
      <img src="https://example.com/images/photo.jpg">
    
  

상대 경로:

    
      <img src="images/photo.jpg">
    
  

절대 URL은 프로토콜(http나 https), 도메인, 경로를 포함한 이미지의 전체 주소를 포함해. 상대 경로는 현재 문서에 상대적인 파일 위치를 나타내, 로컬 파일 작업에 편리해.

1.3 alt 속성

전체 이름: alternative text (대체 텍스트)

alt 속성은 이미지에 대한 텍스트 설명을 제공해. 이 텍스트는 이미지가 로드되지 않을 경우 표시되고, 접근성을 향상시키기 위해 사용돼, 화면 판독 소프트웨어가 시각 장애가 있는 사용자에게 이미지를 설명할 때 사용되지.

예시:

    
      <img src="images/sunset.jpg" alt="아름다운 노을 사진">
    
  

잘 작성된 대체 텍스트는 사용자가 이미지를 사용할 수 없을 때 이미지의 내용을 이해하는 데 도움이 되고, 페이지의 SEO(검색 엔진 최적화)를 향상시키는 데 기여해.

1.4. width 속성

width 속성은 이미지의 너비를 픽셀 단위로 설정해. height 속성이 지정되지 않은 경우, 이미지의 너비를 변경할 때 이미지의 비율이 유지돼.

예시:

    
      <img src="images/photo.jpg" width="500">
    
  

고정된 너비를 사용하는 것이 이미지 크기를 제어하는 데 유용할 수 있지만, 디자인의 적응성을 고려하는 것이 중요해.

1.5 height 속성

height 속성은 이미지의 높이를 픽셀 단위로 설정해. width 속성이 지정되지 않은 경우, 이미지의 높이를 변경할 때 이미지의 비율이 유지돼.

예시:

    
      <img src="images/photo.jpg" height="300">
    
  

width 속성과 마찬가지로, 고정된 높이를 사용하는 것이 유용할 수 있지만, 적응성을 고려해야 돼.

속성을 함께 사용하는 예

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="아름다운 노을 사진" width="500" height="300">
    
  

이 예시에서는 images/sunset.jpg 파일에서 이미지를 로드하고, 너비 500 픽셀과 높이 300 픽셀로 표시될 거야. 이미지가 로드되지 않을 경우 "아름다운 노을 사진"이라는 텍스트가 표시될 거야.