웹 개발, 디테일에 담긴 의미의 세계

Day 3. Adding a Link

웹사이트를 개발하다 보면 작은 요소들이 큰 차이를 만든다. 최근 강의에서 문단과 링크 작업을 하며 발견한 인사이트를 공유한다.

<h1 style="font-family: sans-serif; text-align: center; color: rgb(83, 75, 75)">
Hoon's challenge for Tuesday, May 6th
</h1>
<p style="font-family: sans-serif; text-align: center; color: rgb(83, 75, 75)">
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p style="font-family: sans-serif; text-align: center; color: rgb(83, 75, 75)">
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>

1. 줄바꿈의 허상을 이해하라.

HTML에서 가장 많은 초보자들이 혼란스러워하는 부분이 바로 줄바꿈이다. 코드에서 엔터를 쳐도 브라우저는 이를 무시한다. "코드에서 줄바꿈을 추가해도, 페이지에는 나타나지 않는다." 이는 HTML의 기본 동작 방식으로, 의미 있는 줄바꿈을 원한다면 새로운 문단 요소(<p>)를 사용해야 한다.

2. 문단은 단순한 시각적 요소가 아닌 의미적 단위다.

새 문단을 만들 때 단순히 시각적 구분을 위해서가 아니라, 의미적으로 올바른 구조를 위해 새 <p> 태그를 사용해야 한다. "HTML 요소가 '문단' 요소라 불리는 이유가 있다. 각 텍스트 문단은 고유한 문단 요소로 감싸져야 한다." 이는 검색 엔진과 접근성 기술에도 중요한 영향을 미친다.

3. 링크는 웹의 본질이다.

"기본적으로 모든 웹사이트는 링크가 필요하다." 링크야말로 웹을 '웹'으로 만드는 핵심 요소다. 링크를 만들기 위한 a(anchor) 태그는 단순한 HTML 요소가 아니라, 인터넷의 연결성을 구현하는 핵심 메커니즘이다.

4. 속성은 요소에 '목적'을 부여한다.

a 태그만으로는 링크를 만들 수 없다. 어디로 연결되는지 알려주는 href 속성이 필수적이다. "우리는 어떤 텍스트가 링크가 되어야 하는지 브라우저에 알려주지만, 그 링크의 목적지가 어디인지는 알려주지 않았다." 이 통찰은 HTML 속성의 본질적 역할을 보여준다. ('href'=hypertext reference)

5. 브라우저의 기본 스타일은 사용자 편의를 위한 것이다.

링크가 파란색에 밑줄이 그어진 이유는 무엇일까? 개발자 도구를 통해 살펴보면 브라우저의 기본 스타일(User Agent Stylesheet)이 적용된 것을 확인할 수 있다. 이는 사용자가 링크를 쉽게 식별할 수 있도록 하는 웹의 기본 관행이다.

웹 개발의 진정한 묘미는 이런 작은 요소들이 모여 의미 있는 전체를 구성하는 방식을 이해하는 데 있다. 코드를 작성하는 것은 쉽지만, 왜 그렇게 작성해야 하는지 이해하는 것이 중요하다. 각 HTML 요소와 속성이 가진 의미를 이해할 때, 우리는 단순한 웹페이지가 아닌 효과적인 커뮤니케이션 도구를 만들어낼 수 있다.