소개
이 랩에서는 단계별 과정을 통해 이미지와 함께 첫 번째 HTML 웹 페이지를 만드는 방법을 배우게 됩니다. 이 랩은 구조화된 프로젝트 디렉토리 설정, 이미지 리소스 다운로드, 기본 HTML 문서 생성, 그리고 웹 페이지에 이미지 삽입하는 과정을 안내합니다. 웹 개발 파일을 구성하고, HTML 이미지 태그를 사용하며, 웹 페이지에서 이미지가 어떻게 표시되는지 이해하는 실질적인 경험을 얻게 될 것입니다.
이 랩을 마치면 프로젝트 구조 관리, 이미지 처리, 기본 HTML 문서 생성 등 기본적인 웹 개발 기술을 보여주는 간단하지만 기능적인 HTML 페이지를 만들게 됩니다. 이러한 실습 중심의 접근 방식은 웹 개발 여정을 시작하려는 초보자에게 탄탄한 기반을 제공합니다.
프로젝트 구조 설정
이 단계에서는 이미지와 함께 첫 번째 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 페이지에 대한 이미지 자산을 처리하는 데 필요한 기본적인 지식을 얻었습니다.
