Day 5. Adding a Second HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="daily-challenge.css" rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
<body>
<img src="challenges-trophy.jpg" alt="A trophy" />
<h1>Hoon' Challenge for Tuesday, May 20th</h1>
<p id="todays-challenge">
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p>Explore the <a href="full-week.html">full week</a>.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Upcoming Challenges</title>
</head>
<body>
</body>
</html>
body {
text-align: center;
background-color: rgb(233, 215, 207);
margin: 50px;
}
img {
width: 200px;
height: 200px;
border-radius: 100px;
}
h1 {
font-family: 'Oswald', sans-serif;
color: rgb(83, 75, 75);
}
p {
font-family: 'Fira Sans', sans-serif;
color: rgb(83, 75, 75);
}
a {
color: rgb(167, 1, 78);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#todays-challenge {
color: rgb(170, 96, 83);
font-weight: bold;
font-size: 52px;
}
웹 개발을 하다 보면 단일 페이지로는 담아내기 어려운 콘텐츠를 마주하게 된다. 하나의 HTML 파일로 시작했지만, 사용자에게 더 풍부한 경험을 제공하기 위해서는 여러 페이지로 확장하는 것이 필요하다. 멀티 페이지 웹사이트를 구축하면서 배운 몇 가지 인사이트를 공유하고 싶다.
1. 웹사이트는 한 장의 캔버스에 국한되지 않는다 모든 웹사이트가 단일 HTML 문서로만 구성될 필요는 없다. 사실 대부분의 전문적인 웹사이트는 여러 페이지로 구성되어 있다. 메인 페이지에서는 오늘의 내용을, 다른 페이지에서는 앞으로의 계획을 보여주는 방식으로 콘텐츠를 구조화할 수 있다. 이처럼 목적에 맞게 페이지를 분리하면 사용자 경험이 한층 풍부해진다.
2. 새 HTML 파일 생성의 간단한 규칙 두 번째 HTML 파일을 생성할 때는 한 가지 규칙만 지키면 된다: 'index.html'이라는 이름은 피해야 한다. 이미 메인 페이지가 이 이름을 사용하고 있기 때문이다. 'full-week.html'과 같이 내용을 설명하는 이름을 사용하면 나중에 코드를 관리할 때도 훨씬 편리하다.
3. 반복 작업을 줄이는 개발 도구의 활용 모든 HTML 문서는 기본 구조(스켈레톤)가 필요하다. 그러나 이를 매번 수동으로 입력하는 것은 비효율적이다. Visual Studio Code에서는 단순히 느낌표(!)를 입력하고 Enter를 누르면 기본 구조가 자동으로 생성된다. 이런 작은 자동화 기능이 개발 속도를 크게 향상시킨다.
4. 사소해 보이는 속성의 숨겨진 중요성 HTML 문서의 lang 속성은 선택사항이지만, 그 중요성은 간과할 수 없다. 이 속성은 검색 엔진이 콘텐츠의 언어를 정확히 인식하도록 돕고, 스크린 리더 사용자에게 더 나은 경험을 제공한다. 마찬가지로 meta charset="UTF-8"도 브라우저가 문자를 올바르게 표시하는 데 중요한 역할을 한다. 사소해 보이는 이런 요소들이 실제로는 웹사이트의 접근성과 호환성을 크게 향상시킨다.
5. 페이지 간 연결의 예술 다른 HTML 파일로 링크를 걸 때는 복잡한 URL 전체를 사용할 필요가 없다. 같은 폴더 내에 있는 파일이라면 단순히 파일명만으로 링크를 생성할 수 있다. 예를 들어 href="full-week.html"만으로 충분하다. 이러한 상대 경로 방식은 코드를 더 간결하게 만들고, 나중에 웹사이트 구조를 변경할 때도 유연성을 제공한다.
6. 반응형 디자인은 단계적으로 접근하라 초보 개발자들이 흔히 저지르는 실수 중 하나는 처음부터 모든 것을 완벽하게 만들려는 시도다. 예를 들어, 반응형 웹 디자인은 중요하지만, 기본 구조를 먼저 잡은 후에 접근하는 것이 효율적이다. 데스크톱 버전이 완성된 후에 모바일 대응을 고민하는 순차적 접근이 혼란을 줄여준다.
웹사이트를 여러 페이지로 확장하는 과정은 단순한 기술적 작업 이상의 의미가 있다. 이는 사용자에게 더 풍부한 정보와 경험을 제공하기 위한 전략적 결정이다. 좋은 웹사이트는 단순히 기능하는 것을 넘어, 사용자의 여정을 고려하여 자연스러운 흐름을 만들어낸다.
이렇게 페이지를 확장해 나가는 과정에서 우리는 웹의 본질적인 특성, 즉 '연결성'을 직접 경험하게 된다. 하이퍼링크를 통한 페이지 간 연결은 웹이 탄생한 근본 이유이기도 하다. 이 기본에 충실할 때, 우리는 더 효과적이고 직관적인 웹사이트를 만들 수 있다.