HTML의 숨겨진 해부학, 보이는 것과 보이지 않는 것
Day 3. The HTML Document Skeleton & Meta
웹 개발을 배우다 보면 흥미로운 패러다임 전환 순간이 있다. 바로 HTML이 단순한 '표시 언어'가 아니라는 것을 깨닫는 순간이다. 최근 강의에서 HTML 문서의 올바른 구조에 대해 발견한 인사이트를 공유한다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
</style>
<title>My Daily Challenge</title>
</head>
<body>
<h1>Hoon's challenge for Tuesday, May 6th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>
</body>
</html>
1. HTML 요소에는 두 가지 세계가 있다.
모든 HTML 요소가 화면에 보이는 것은 아니다. "대다수의 요소는 텍스트처럼 보이는 콘텐츠를 출력하지만, style과 같은 요소는 시각적 영향은 주지만 요소 자체는 보이지 않는다." 이 구분을 이해하는 것은 웹 개발의 철학을 이해하는 첫걸음이다.
2. 메타데이터는 보이지 않는 가치다.
메타데이터는 사용자에게 직접 보이지 않지만, 브라우저에게는 중요한 정보다. 이는 웹사이트의 '보이지 않는 가치'를 형성한다. 이런 메타정보와 실제 콘텐츠 사이의 구분이 HTML 문서 구조의 핵심이다.
3. HTML 문서는 'head'와 'body'로 구성된 하나의 유기체다.
"메타데이터는 head 섹션에, 시각적 콘텐츠는 body 섹션에." 이 구조는 단순한 관례가 아닌, 웹의 기본 구조이자 HTML의 '해부학'이다. 이 구조를 따르는 것은 다른 개발자들과의 소통을 원활하게 하고, 몇 개월 후 자신의 코드를 다시 볼 때도 빠르게 이해할 수 있게 해준다.
4. '<!DOCTYPE html>'은 시대적 맥락을 담고 있다.
이 이상해 보이는 선언은 단순한 의식이 아니라, 웹의 역사를 담고 있다. "HTML은 어제 발명된 언어가 아니라 1993년부터 존재해 온 역사적 언어다." 이 선언을 통해 우리는 브라우저에게 HTML5를 사용한다고 알려주며, 이는 웹의 과거와 현재를 연결하는 다리 역할을 한다.
5. 타이틀은 보이지 않는 첫인상이다.
<title> 요소는 페이지 내에서는 보이지 않지만, 브라우저 탭과 검색 엔진 결과에서 나타난다. "현재는 파일 이름만 반복해서 보여주지만, 여러 탭이 열려 있을 때 웹사이트를 명확히 식별할 수 있는 제목이 필요하다." 이는 사용자 경험과 SEO 모두에 중요한 영향을 미친다.
웹 개발의 진정한 전문성은 단순히 화면에 보이는 요소를 다루는 것을 넘어, 보이지 않는 구조와 메타데이터의 중요성을 이해하는 데서 시작된다. HTML의 올바른 구조를 따르는 것은 단순한 형식적 요구사항이 아니라, 웹의 본질적인 작동 방식을 존중하는 일이다.
