우리는 애완동물 애호가들을 위한 따뜻한 온라인 공간을 만들기 위한 여정을 시작합니다. 우리의 시나리오인 "Pet Paradise"는 애완동물 주인들을 활기차고 유익한 웹사이트를 통해 연결하는 것을 꿈꾸는 캐릭터, 혁신가 Alex 를 특징으로 합니다. Alex 의 목표는 애완동물 서비스를 소개하고, 이야기를 공유하며, 커뮤니티를 구축하는 것입니다. 이 시나리오는 학생들을 Alex 의 비전을 디지털 현실로 전환하는 과정을 안내하며 참여를 유도하도록 설계되었습니다.
간단한 프로젝트를 통해 HTML 의 기본 사항을 다루는 것으로 시작하여, 간단한 웹페이지를 만드는 과정을 안내하는 3 개의 랩을 강조할 것입니다.
이 Lab 에서는 "Pet's House"의 헤더 섹션과 홈 페이지 레이아웃을 만들 것입니다. 이 섹션은 강력한 첫인상을 남기는 데 매우 중요합니다. 헤더에는 탐색 메뉴가 포함되며, 홈 레이아웃은 방문자에게 웹사이트를 소개합니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 중급 레벨의 실험이며 완료율은 66%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
HTML 문서 구조
사용자가 인터넷을 통해 웹을 탐색할 때, 텍스트, 링크, 차트, 이미지 등 다양한 형태의 콘텐츠를 접하게 됩니다.
브라우저가 이 페이지 콘텐츠를 어떻게 표시하는지 궁금했던 적이 있습니까? 아래 그림과 같이 F12를 눌러 페이지의 소스 코드를 볼 수 있습니다.
위 그림에서 모든 문자 콘텐츠가 꺾쇠 괄호 <와 > 안에 묶여 있는 것을 볼 수 있습니다. 이러한 콘텐츠를 **태그 (tags)**라고 하며, <>는 여는 태그를, </>는 닫는 태그를 나타냅니다.
HTML 은 태그로 표현되는 요소 (elements) 로 구성된 언어입니다.
HTML (HyperText Markup Language) 은 웹 페이지와 그 콘텐츠의 구조를 만드는 데 사용되는 코드입니다.
하이퍼 (Hyper): "하이퍼"는 "선형 (Linear)"과 대조됩니다. 이전 컴퓨터 프로그램은 대부분 선형적이었으며, 위에서 아래로 순서대로 실행해야 했습니다. 그러나 HTML 로 생성된 웹 페이지는 하이퍼링크를 통해 한 페이지에서 다른 페이지로 탐색할 수 있습니다.
텍스트 (Text): C, C++, Java 와 같은 컴파일된 프로그래밍 언어와 달리 HTML 은 텍스트 기반 스크립팅 언어입니다. 소스 코드는 컴파일 없이 브라우저에서 직접 해석되고 실행됩니다.
마크업 (Markup): HTML 의 기본 원리는 웹 페이지 콘텐츠가 브라우저에서 어떻게 표시되어야 하는지를 설명하기 위해 마크업 (쌍으로 된 꺾쇠 괄호로 구성된 태그) 을 사용하는 것입니다.
언어 (Language): HTML 은 언어이지만, 컴파일되는 대신 해석됩니다. 모든 마크업 태그는 브라우저에 의해 최종 표시 결과로 변환됩니다.
이 단계에서는 웹 페이지의 기본 구조를 설정하는 것으로 시작합니다. touch ~/project/index.html 명령을 사용하여 /home/labex/project 디렉토리에 index.html이라는 새 HTML 파일을 만듭니다. 선호하는 텍스트 편집기로 이 파일을 열고 기본 HTML 문서 구조를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!-- We'll add content here in the next steps -->
</body>
</html>
<!DOCTYPE html> 선언은 브라우저에 어떤 유형의 문서를 예상하는지 알려줍니다.
<html lang="en"> 요소는 HTML 문서의 루트 요소입니다.
<head> 요소에는 제목 및 문자 집합과 같은 메타데이터 (문서에 대한 데이터) 가 포함되어 있습니다.
<title> 요소는 웹 페이지의 제목을 지정합니다.
<meta charset="UTF-8"> 요소는 웹 페이지의 문자 인코딩을 지정합니다.
<body> 요소에는 웹 페이지의 보이는 콘텐츠가 포함되어 있습니다.
Environment 의 오른쪽 하단 모서리에 있는 Go Live를 클릭하여 포트 8080 을 열고, Environment 의 왼쪽 상단 모서리에 있는 Web 8080을 클릭하여 페이지 결과를 확인합니다.
참고: 현재 페이지는 body 가 비어 있기 때문에 아무런 효과가 없습니다. 더 많은 태그를 배우면 페이지의 효과를 볼 수 있습니다.
웹 페이지 레이아웃은 일반적으로 여러 주요 부분으로 구성되며, 각 부분은 사용자 인터페이스가 깔끔하고 기능적으로 유지되도록 뚜렷한 목적을 수행합니다.
헤더 (Header): 웹 페이지의 상단 영역으로, 사이트 로고, 탐색 메뉴, 로그인/등록 링크 등을 포함하는 경우가 많습니다. 헤더는 사용자가 가장 먼저 인지하는 부분 중 하나이므로 일반적으로 눈에 띄게 디자인되어 쉽게 탐색할 수 있도록 합니다.
탐색 바 (Navigation Bar): 탐색 바는 헤더의 일부일 수도 있지만, 일부 디자인에서는 페이지 상단, 측면 또는 하단에 위치한 별도의 섹션일 수도 있습니다. 탐색 바는 웹사이트 내의 내부 링크에 빠르게 접근할 수 있도록 하여 사용자가 관심 있는 콘텐츠를 쉽게 찾을 수 있도록 돕습니다.
메인 콘텐츠 (Main Content): 웹 페이지의 핵심 부분으로, 사용자가 보려고 페이지를 방문한 주요 정보 또는 콘텐츠를 포함합니다. 메인 콘텐츠는 웹사이트의 목적과 레이아웃에 따라 기사, 블로그 게시물, 제품 표시 등 여러 섹션으로 더 나눌 수 있습니다.
사이드바 (Sidebar): 사이드바는 일반적으로 메인 콘텐츠 옆 (왼쪽 또는 오른쪽) 에 위치하며 관련 링크, 광고, 검색 상자, 소셜 미디어 링크 등과 같은 추가 정보 또는 기능을 제공합니다.
푸터 (Footer): 웹 페이지 하단에 위치하며, 일반적으로 저작권 정보, 연락처, 사이트 맵 링크, 개인 정보 보호 정책, 소셜 미디어 아이콘 등을 포함합니다. 푸터는 사용자가 하단으로 스크롤할 때 마지막으로 보이는 부분으로, 기본 사이트 정보와 추가 탐색 옵션을 제공합니다.
시맨틱 요소 (header, main, footer) 를 추가하여 콘텐츠를 논리적으로 구성합니다.
<img> 태그의 alt 속성은 이미지를 설명하는 데 사용되며, 페이지에 이미지가 제대로 표시되지 않을 경우 alt 의 내용이 표시됩니다.
태그의 class는 전역 속성이며, 등호 뒤의 내용은 요소에 부여된 이름과 동일하며, CSS 에서 특정 요소를 식별하고 지정된 요소의 스타일을 설정하는 데 사용됩니다.
<ul> HTML 요소는 항목의 순서가 없는 목록을 나타내며, 일반적으로 글머리 기호 목록으로 렌더링됩니다.
<li> HTML 요소는 목록의 항목을 나타냅니다.
<a> HTML 요소는 하이퍼링크를 정의하여 서로 다른 페이지 간의 링크를 생성하는 데 사용됩니다.
참고: HTML 은 웹 페이지에 콘텐츠를 배치하는 데 사용되는 반면, CSS 는 시각적으로 매력적인 레이아웃을 만드는 데 필수적입니다. 이 실험에서는 HTML 콘텐츠 학습에 중점을 둡니다. 더 나은 페이지 디자인을 위해 완전한 style.css 파일도 제공하고 있습니다.
