HTML 이미지 삽입 및 스타일 지정 방법 | 웹 디자인 튜토리얼

소개

이 랩에서는 다양한 기술과 속성을 사용하여 HTML 에서 이미지를 효과적으로 삽입하고 스타일을 지정하는 방법을 배우게 됩니다. 이 랩은 소스와 대체 텍스트를 사용하여 기본 이미지를 추가하고, 고정된 이미지 치수를 설정하고, 이미지를 정렬하고, 유용한 툴팁을 만드는 것과 같은 필수 기술을 다룹니다. 단계별 지침을 따르면 웹 페이지 디자인을 향상시키고 사용자 경험을 개선하기 위해 이미지 요소를 조작하는 실질적인 경험을 얻을 수 있습니다.

실습을 통해 src, alt, width, height, title과 같은 다양한 HTML 속성을 탐색하여 이미지 표현 및 접근성을 제어할 수 있습니다. 이러한 기술은 시각적으로 매력적이고 반응성이 뛰어난 웹 페이지를 적절하게 통합되고 스타일이 지정된 이미지와 함께 만들려는 웹 개발자에게 필수적입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/para_br -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/layout -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/multimedia -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/img_maps -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/embed_media -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/inter_elems -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} html/custom_attr -.-> lab-452362{{"HTML 에서 이미지 삽입 및 스타일 지정"}} end

src 및 alt 속성을 사용하여 기본 이미지 추가

이 단계에서는 <img> 태그와 필수 속성을 사용하여 HTML 페이지에 기본 이미지를 추가하는 방법을 배우게 됩니다. 이미지는 웹 디자인의 중요한 부분으로, 웹 페이지를 시각적으로 더 매력적이고 유익하게 만드는 데 도움이 됩니다.

먼저, 작업할 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 images.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- We'll add our images here -->
  </body>
</html>

<img> 태그는 HTML 문서에 이미지를 포함하는 데 사용되는 자체 닫힘 태그입니다. 이 태그에는 두 가지 중요한 속성이 있습니다.

src (source): 이미지 파일의 경로를 지정합니다.
alt (alternative text): 이미지에 대한 텍스트 설명을 제공합니다.

HTML 파일에 이미지를 추가해 보겠습니다.

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

src 속성은 이미지 URL 을 가리키고, alt 속성은 다음과 같은 설명을 제공합니다.

이미지가 로드되지 않을 경우 표시됩니다.
시각 장애가 있는 사용자를 위해 화면 판독기가 이미지를 설명하는 데 도움이 됩니다.
검색 엔진에 컨텍스트를 제공하여 SEO 를 개선합니다.

파일을 저장하고 웹 브라우저에서 열어 이미지를 확인하십시오.

참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요.

width 및 height 를 사용하여 고정된 이미지 치수 설정

이 단계에서는 HTML 에서 width 및 height 속성을 사용하여 이미지 크기를 제어하는 방법을 배우게 됩니다. 이러한 속성을 사용하면 이미지의 정확한 치수를 지정할 수 있으며, 이는 페이지 레이아웃 및 로딩 성능을 향상시키는 데 도움이 될 수 있습니다.

이전 단계에서 생성한 images.html 파일을 엽니다. 기존 이미지를 수정하고 몇 가지 더 추가하여 다양한 크기 조정 기술을 시연해 보겠습니다.

HTML 은 이미지 치수를 설정하기 위한 두 가지 속성을 제공합니다.

width: 픽셀 단위로 이미지 너비를 설정합니다.
height: 픽셀 단위로 이미지 높이를 설정합니다.

이전 이미지를 업데이트하고 몇 가지 새로운 예제를 추가해 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- Original image with fixed dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- Another image with different dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- Image with only width specified -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

이미지 치수에 대한 주요 사항:

치수는 픽셀 단위로 지정됩니다.
너비, 높이 또는 둘 다 설정할 수 있습니다.
하나의 치수만 지정된 경우 이미지가 비례적으로 크기 조정됩니다.
치수를 설정하면 이미지가 로드될 때 페이지 레이아웃 이동을 방지하는 데 도움이 됩니다.

웹 브라우저의 예시 출력은 서로 다른 크기의 세 개의 이미지를 표시합니다.

사용 중단된 align 속성을 사용하여 이미지 정렬

이 단계에서는 HTML 에서 이미지를 배치하기 위한 사용 중단된 align 속성에 대해 배우게 됩니다. 최신 웹 디자인에서는 레이아웃에 CSS 를 사용하지만, 이 역사적인 이미지 정렬 방법을 이해하는 것이 중요합니다.

이전 단계에서 images.html 파일을 열고 다양한 이미지 정렬을 시연하도록 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- Left-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      This text will flow around the left-aligned image.
    </p>

    <p>
      <!-- Right-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      This text will flow around the right-aligned image.
    </p>

    <p>
      <!-- Center-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      This text is aligned with the middle of the image.
    </p>
  </body>
</html>

align 속성은 세 가지 주요 값을 지원합니다.

left: 이미지를 왼쪽에 정렬하고 텍스트가 주위를 흐르도록 합니다.
right: 이미지를 오른쪽에 정렬하고 텍스트가 주위를 흐르도록 합니다.
middle: 이미지를 텍스트 기준선과 수직으로 정렬합니다.

중요 사항:

align 속성은 HTML5 에서 사용 중단되었습니다.
최신 웹 디자인에서는 레이아웃에 CSS float 또는 flexbox 를 사용합니다.
이 속성은 역사적 이해를 위해 유지됩니다.

예시 출력은 단락 내에서 다르게 배치된 이미지를 보여줍니다.

참고: Labby 대화 상자가 오른쪽 정렬된 이미지를 가릴 수 있습니다.

title 속성을 사용하여 툴팁 정보 추가

이 단계에서는 title 속성을 사용하여 이미지에 툴팁 정보를 추가하는 방법을 배우게 됩니다. 툴팁은 사용자가 요소 위에 마우스를 올릴 때 추가적인 컨텍스트 또는 설명을 제공합니다.

이전 단계에서 images.html 파일을 열고 툴팁 사용법을 시연하도록 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- Image with a simple tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- Image with a more descriptive tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- Multiple images with different tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

title 속성에 대한 주요 사항:

이미지 위에 마우스를 올릴 때 추가 정보를 제공합니다.
이미지, 텍스트 및 대부분의 HTML 요소에서 작동합니다.
컨텍스트를 제공하여 사용자 경험을 향상시키는 데 도움이 됩니다.
마우스가 요소 위에 있을 때 작은 팝업으로 표시됩니다.

웹 브라우저에서 이러한 이미지 위에 마우스를 올리면 툴팁 텍스트가 나타나는 것을 볼 수 있습니다.

요약

이 랩에서는 참가자들이 이미지 임베딩 및 스타일링을 위한 주요 기술을 숙달하여 HTML 에서 이미지를 효과적으로 사용하는 방법을 배웠습니다. 이 랩에서는 적절한 이미지 표시 및 접근성을 보장하는 src 및 alt와 같은 중요한 속성을 사용하여 <img> 태그를 통해 이미지를 추가하는 것과 같은 필수 기술을 다루었습니다. 학습자들은 width 및 height 속성을 통해 이미지 치수를 제어하는 방법을 탐구하고, 이러한 설정이 페이지 레이아웃 및 성능에 미치는 영향을 이해했습니다.

실습을 통해 학생들은 고정된 이미지 크기 설정, title 속성을 사용하여 툴팁 정보 추가, 다양한 이미지 정렬 전략 실험을 포함한 다양한 이미지 조작 기술을 익혔습니다. HTML 이미지 요소를 직접 사용해 보면서 참가자들은 시각적으로 매력적이고 반응형 웹 페이지 디자인을 만드는 데 귀중한 통찰력을 얻었습니다.