HTML 이미지 삽입: 초보자를 위한 웹 페이지 제작 가이드

소개

이 랩에서는 단계별 과정을 통해 이미지와 함께 첫 번째 HTML 웹 페이지를 만드는 방법을 배우게 됩니다. 이 랩은 구조화된 프로젝트 디렉토리 설정, 이미지 리소스 다운로드, 기본 HTML 문서 생성, 그리고 웹 페이지에 이미지 삽입하는 과정을 안내합니다. 웹 개발 파일을 구성하고, HTML 이미지 태그를 사용하며, 웹 페이지에서 이미지가 어떻게 표시되는지 이해하는 실질적인 경험을 얻게 될 것입니다.

이 랩을 마치면 프로젝트 구조 관리, 이미지 처리, 기본 HTML 문서 생성 등 기본적인 웹 개발 기술을 보여주는 간단하지만 기능적인 HTML 페이지를 만들게 됩니다. 이러한 실습 중심의 접근 방식은 웹 개발 여정을 시작하려는 초보자에게 탄탄한 기반을 제공합니다.

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

프로젝트 구조 설정

이 단계에서는 이미지와 함께 첫 번째 HTML 페이지를 만들기 위한 프로젝트 구조를 설정합니다. 잘 정리된 프로젝트 구조는 웹 개발 파일을 깔끔하고 관리하기 쉽게 유지하는 데 필수적입니다.

VM 설정에 의해 프로젝트 구조가 이미 설정되어 있습니다. my-first-webpage 디렉토리를 확인하십시오:

ls my-first-webpage

이 구조는 다양한 유형의 파일을 분리하는 데 도움이 됩니다:

images/는 이미지 리소스를 저장합니다.
css/는 스타일 파일에 사용할 수 있습니다 (하지만 이 랩에서는 사용하지 않습니다).

디렉토리 구조를 확인해 보겠습니다:

tree

예시 출력:

.
├── css
└── images

훌륭합니다! 이제 웹 개발 파일을 쉽게 관리할 수 있도록 깔끔하고 정리된 프로젝트 구조를 설정했습니다.

이미지 리소스 다운로드 및 정리

이 단계에서는 첫 번째 HTML 웹 페이지에서 사용할 이미지를 다운로드합니다. 인터넷에서 무료로 사용할 수 있는 간단한 이미지를 사용하고, 앞서 생성한 images 디렉토리에 저장합니다.

먼저, 프로젝트 디렉토리로 이동합니다:

cd ~/project/my-first-webpage

이미지가 올바르게 다운로드되었는지 확인해 보겠습니다:

ls images

예시 출력:

landscape.jpg

이미지 파일이 보이지 않으면 아래 명령을 사용하여 다운로드해야 할 수 있습니다. images 디렉토리에 이미지 파일이 보이면 이 단계를 건너뛰십시오.

wget -O images/landscape.jpg "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"

이미지 파일 세부 정보를 확인합니다:

file images/landscape.jpg

예시 출력:

images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3

이제 이미지를 HTML 페이지에서 사용할 준비가 되었습니다. HTML 에서 이미지 삽입을 시연하는 데 적합한 풍경 이미지를 다운로드했습니다.

기본 HTML 문서 생성

이 단계에서는 첫 번째 웹 페이지의 기반이 될 기본 HTML 문서를 생성합니다. HTML (HyperText Markup Language) 은 웹 페이지를 만들기 위한 표준 마크업 언어입니다.

프로젝트 디렉토리로 이동합니다:

cd ~/project/my-first-webpage

WebIDE 를 열고 index.html이라는 새 파일을 만듭니다:

touch index.html

이제 기본 HTML 구조를 추가해 보겠습니다. WebIDE 에서 index.html 파일을 열고 다음 코드를 입력합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>
  </body>
</html>

이 HTML 문서의 주요 구성 요소를 살펴보겠습니다:

<!DOCTYPE html>은 이 문서가 HTML5 문서임을 선언합니다.
<html>은 HTML 페이지의 루트 요소입니다.
<head>는 문서에 대한 메타 정보를 포함합니다.
<body>는 보이는 페이지 내용을 포함합니다.
<h1>은 주요 제목입니다.
<p>는 단락입니다.

HTML 페이지에 이미지 삽입

이 단계에서는 다운로드한 풍경 이미지를 HTML 페이지에 삽입하는 방법을 배웁니다. <img> 태그는 HTML 에 이미지를 포함하는 데 사용됩니다.

WebIDE 에서 index.html 파일을 열고 이미지를 포함하도록 내용을 수정합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>

    <h2>Beautiful Landscape</h2>
    <img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
  </body>
</html>

이미지 태그 속성을 살펴보겠습니다:

src: 이미지 파일의 경로를 지정합니다.
alt: 접근성을 위해 대체 텍스트를 제공합니다.
width: 이미지의 표시 너비를 설정합니다 (픽셀 단위).

이미지 표시 미리보기 및 이해

이 단계에서는 HTML 페이지를 미리 보고 웹 브라우저에서 이미지가 어떻게 표시되는지 이해하는 방법을 배웁니다. LabEx 환경은 내장된 미리 보기 기능이 있는 WebIDE 를 제공하므로 웹 페이지를 즉시 확인할 수 있습니다.

웹 페이지를 미리 보려면 WebIDE 에서 "Go Live" 버튼을 찾으십시오.

페이지에서 my-first-webpage 폴더를 클릭하면 index.html 파일이 미리 보기 모드로 자동으로 열립니다.

이렇게 하면 추가한 풍경 이미지를 보여주는 index.html 파일의 라이브 보기가 시작됩니다.

HTML 에서 이미지 표시와 관련된 몇 가지 주요 개념을 살펴보겠습니다:

이미지 경로

src 속성은 이미지에 대한 상대 경로를 지정합니다:

<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />

상대 경로는 HTML 파일의 위치를 기준으로 합니다.
웹 파일 경로에서는 항상 슬래시 (/) 를 사용합니다.

이미지 속성

width: 이미지 표시 크기를 제어합니다 (픽셀 단위).
alt: 접근성을 위해 텍스트 설명을 제공합니다.
height를 사용하여 이미지 치수를 설정할 수도 있습니다.

반응형 이미지

이미지를 반응형으로 만들려면 CSS 를 사용하거나 HTML 속성을 조정할 수 있습니다:

<img
  src="images/landscape.jpg"
  alt="Scenic Landscape"
  style="max-width: 100%; height: auto;"
/>

style 속성은 이미지의 표시 크기를 설정하는 데 사용됩니다. 이는 이미지의 너비와 높이를 제어할 수 있는 CSS 속성입니다.

max-width: 100%;는 이미지가 컨테이너 너비를 초과하지 않도록 합니다.
height: auto;는 이미지의 종횡비를 유지합니다.

지금은 CSS 에 대해 걱정하지 마세요. 나중에 랩에서 다룰 것입니다.

WebIDE 미리 보기에서 이미지가 올바르게 표시되는지 확인합니다. 다음을 확인해야 합니다:

풍경 이미지
너비 500 픽셀
명확하고 읽기 쉬운 대체 텍스트

요약

이 랩에서는 참가자들이 구조화된 프로젝트 환경을 설정하고 이미지를 사용하여 첫 번째 HTML 웹 페이지를 만드는 방법을 배웠습니다. 이 과정은 터미널 명령을 사용하여 깔끔한 디렉토리 구조를 설정하는 것으로 시작되었으며, 이미지 및 CSS 전용 폴더를 생성하여 웹 개발 파일을 체계적으로 유지하는 데 도움이 됩니다.

이 랩은 학습자가 wget 을 사용하여 Unsplash 에서 샘플 풍경 이미지를 다운로드하도록 안내하여 파일 관리 및 리소스 획득에 대한 실용적인 기술을 보여주었습니다. 프로젝트 파일을 체계적으로 구성하고 이미지 리소스를 검색함으로써 참가자들은 웹 개발 프로젝트를 준비하고 HTML 페이지에 대한 이미지 자산을 처리하는 데 필요한 기본적인 지식을 얻었습니다.

이미지를 사용하여 첫 HTML 페이지 만들기

소개

프로젝트 구조 설정

이미지 리소스 다운로드 및 정리

기본 HTML 문서 생성

HTML 페이지에 이미지 삽입

이미지 표시 미리보기 및 이해

요약