지금까지 배운 HTML과 CSS의 핵심

Day 3. First Summary

웹 개발 강의를 진행하다 보면, 가장 처음 접하는 개념들이 오히려 가장 중요한 기반이 된다는 것을 깨닫게 된다. 지금까지 배운 내용을 정리하며 발견한 인사이트를 공유한다.

1. HTML 요소는 '의미의 상자'다.

HTML 요소는 단순한 코드 조각이 아니라, 콘텐츠에 의미를 부여하는 상자다. "h1 요소는 메인 제목을, p 요소는 일반 텍스트 문단을, a 요소는 링크를 만든다." 각 요소는 여는 태그와 닫는 태그 사이에 내용을 담아, 브라우저에게 "이것은 제목이야", "이것은 문단이야"라고 알려준다. 이 간단한 구조가 웹의 모든 콘텐츠를 담아내는 기본 단위가 된다.

2. HTML 속성은 요소의 '확장 기능'이다.

"링크 요소는 HTML 속성이 필요한 좋은 예다." a 태그만으로는 링크의 목적지를 알 수 없기 때문에, href 속성이 필요하다. 속성은 요소의 기본 기능을 넘어서는 추가 정보를 제공한다. "속성명=값" 형태로 사용되며, 값은 항상 따옴표로 감싸야 한다. 마치 스마트폰의 앱이 설정을 통해 기능을 확장하는 것처럼, HTML 요소도 속성을 통해 확장된다.

3. 글로벌 CSS는 '중앙 관리 시스템'이다.

"글로벌 CSS의 장점은 HTML 코드와 CSS 코드를 명확히 분리하여 코드 작업을 더 쉽게 만든다는 것이다." 인라인 스타일이 각 요소에 개별적으로 스타일을 적용한다면, 글로벌 CSS는 중앙에서 여러 요소를 한 번에 관리할 수 있다. 이는 단순한 편의성을 넘어, 코드의 유지보수성과 확장성에 직결된다.

4. HTML 문서 구조는 '도서관의 분류 시스템'과 같다.

웹페이지가 복잡해질수록 메타데이터와 실제 콘텐츠를 분리하는 것이 중요하다. "보이는 콘텐츠는 body 태그 사이에, 스타일링이나 브라우저 탭에 표시되는 제목과 같은 메타데이터는 head 태그 사이에 위치해야 한다." 이 구조는 도서관에서 책의 내용(body)과 목록 정보(head)를 분리하는 것과 유사하다.

5. 요소의 중첩은 HTML의 '슈퍼파워'다.

"HTML 요소를 서로 중첩하는 것은 완전히 정상적이고 일반적인 일이다. 이는 HTML의 주요 강점이자 중요한 특징이다." 중첩을 통해 복잡한 콘텐츠 구조를 표현할 수 있다. 예를 들어, 문단 안에 링크를, head 안에 style을, body 안에 여러 요소를 배치할 수 있다. 이는 레고 블록처럼 작은 부품들을 조합해 복잡한 구조를 만드는 것과 같다.

웹 개발의 여정은 이제 막 시작됐다. 지금까지 배운 기본 개념들은 앞으로 만들게 될 복잡한 웹사이트의 기반이 될 것이다. 이런 기초를 확실히 이해하는 것이 중요한 이유는, 화려한 기능 뒤에 있는 웹의 근본 원리가 결국 이 단순한 구조에서 출발하기 때문이다.