소개
우리는 애완동물 애호가들을 위한 따뜻한 온라인 공간을 만들기 위한 여정을 시작합니다. 우리의 시나리오인 "Pet Paradise"는 애완동물 주인들을 활기차고 유익한 웹사이트를 통해 연결하는 것을 꿈꾸는 캐릭터, 혁신가 Alex 를 특징으로 합니다. Alex 의 목표는 애완동물 서비스를 소개하고, 이야기를 공유하며, 커뮤니티를 구축하는 것입니다. 이 시나리오는 학생들을 Alex 의 비전을 디지털 현실로 전환하는 과정을 안내하며 참여를 유도하도록 설계되었습니다.
간단한 프로젝트를 통해 HTML 의 기본 사항을 다루는 것으로 시작하여, 간단한 웹페이지를 만드는 과정을 안내하는 3 개의 랩을 강조할 것입니다.
이 Lab 에서는 "Pet's House"의 헤더 섹션과 홈 페이지 레이아웃을 만들 것입니다. 이 섹션은 강력한 첫인상을 남기는 데 매우 중요합니다. 헤더에는 탐색 메뉴가 포함되며, 홈 레이아웃은 방문자에게 웹사이트를 소개합니다.
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) 를 추가하여 콘텐츠를 논리적으로 구성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header></header>
<!--Main Content-->
<main></main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
<!---->는 코드에 주석이나 설명을 추가하는 데 사용되는 HTML 의 주석입니다. 코드의 기능에 영향을 미치지 않으며 브라우저에서 무시됩니다.<header>HTML 요소는 일반적으로 소개 또는 탐색 보조 도구 그룹인 소개 콘텐츠를 나타냅니다.<main>HTML 요소는 문서의<body>에서 지배적인 콘텐츠를 나타냅니다. 메인 콘텐츠 영역은 문서의 중심 주제 또는 애플리케이션의 중심 기능과 직접적으로 관련되거나 확장되는 콘텐츠로 구성됩니다.<footer>HTML 요소는 가장 가까운 조상 섹션 콘텐츠 또는 섹션 루트 요소에 대한 푸터를 나타냅니다. 푸터는 일반적으로 섹션 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함합니다.
헤더 섹션
홈 섹션은 다음 구성 요소를 포함해야 합니다.
다음으로 로고 이미지와 탐색 메뉴를 포함하는 헤더 섹션의 레이아웃을 구현해야 합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Display</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Main Content-->
<main></main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
<div>및<nav>태그를 사용하여 로고와 탐색 메뉴를 두 영역으로 나눕니다.<img>HTML 요소는 문서에 이미지를 삽입합니다.<img>태그의src속성은 이미지 경로를 지정하는 데 사용됩니다.<img>태그의alt속성은 이미지를 설명하는 데 사용되며, 페이지에 이미지가 제대로 표시되지 않을 경우 alt 의 내용이 표시됩니다.- 태그의
class는 전역 속성이며, 등호 뒤의 내용은 요소에 부여된 이름과 동일하며, CSS 에서 특정 요소를 식별하고 지정된 요소의 스타일을 설정하는 데 사용됩니다. <ul>HTML 요소는 항목의 순서가 없는 목록을 나타내며, 일반적으로 글머리 기호 목록으로 렌더링됩니다.<li>HTML 요소는 목록의 항목을 나타냅니다.<a>HTML 요소는 하이퍼링크를 정의하여 서로 다른 페이지 간의 링크를 생성하는 데 사용됩니다.
참고: HTML 은 웹 페이지에 콘텐츠를 배치하는 데 사용되는 반면, CSS 는 시각적으로 매력적인 레이아웃을 만드는 데 필수적입니다. 이 실험에서는 HTML 콘텐츠 학습에 중점을 둡니다. 더 나은 페이지 디자인을 위해 완전한
style.css파일도 제공하고 있습니다.
홈 섹션 레이아웃
다음으로 제목, 텍스트 및 이미지의 세 부분으로 구성된 홈의 레이아웃을 완성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Display</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Main Content-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Welcome</h1>
<p>~ This website offers personalised services for pets. ~</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
<section>HTML 요소는 문서의 일반적인 독립형 섹션을 나타냅니다.<h1>HTML 요소는<section>요소의 콘텐츠에 대한 제목을 나타냅니다.<p>HTML 요소는 단락을 나타냅니다.
요약
이 랩에서는 "Pet's House"를 위한 환영하고 탐색 가능한 인터페이스를 만드는 데 중점을 두고 헤더 및 홈 페이지 레이아웃을 구조화하고 스타일을 지정하는 방법을 배웠습니다. 이 랩은 첫인상의 중요성을 강조하고 사용자 친화적인 웹사이트의 기반을 마련했습니다.
