CSS로 HTML에 생명 불어넣기, 그 시작점

Day 2. Getting Started with CSS

최근 웹 개발 강의를 진행하며 문득 깨달은 점이 있다. 많은 개발자들이 HTML을 배우고 나서 '무언가 부족하다'는 느낌을 받는다. 이는 웹사이트가 기능적으로는 작동하지만, 시각적으로는 매력이 떨어지기 때문이다. CSS의 첫 걸음을 떼는 과정에서 발견한 인사이트를 공유한다.

<h1 style="font-family: sans-serif; text-align: center; XXX: red">Hoon's challenge for Tuesday, May 6th</h1>
<p>Learn about the basics of web development - specifically dive into HTML & CSS.</p>

1. CSS는 속성과 값의 언어다.

CSS 코드는 본질적으로 font-family: sans-serif 형태의 속성-값 쌍으로 구성된다. 속성(property)은 무엇을 변경할지, 값(value)은 어떻게 변경할지를 지정한다. 프로그래밍을 처음 배울 때 변수와 값의 관계를 이해하는 것처럼, CSS도 이 기본 구조를 파악하는 것이 핵심이다.

2. 표준화된 어휘집이 있다는 것은 축복이다.

HTML 요소처럼 CSS 속성도 표준화되어 있다. MDN에서 제공하는 CSS 속성 목록은 처음에는 압도적으로 느껴질 수 있지만, 실제로는 몇 가지 핵심 속성만 자주 사용하게 된다. 이런 표준화 덕분에 우리는 모든 브라우저에서 일관된 스타일을 적용할 수 있다.

3. 세미콜론은 CSS의 마침표다.

여러 CSS 속성을 하나의 요소에 적용할 때 세미콜론(;)으로 구분한다. 이는 단순한 문법적 규칙을 넘어, CSS의 기본적인 '문장 구조'를 형성한다. font-family: sans-serif; text-align: center;와 같이 각 속성-값 쌍은 하나의 명령어이고, 세미콜론은 이 명령어들을 구분하는 역할을 한다.

4. 자동 완성은 학습 도구이기도 하다.

VS Code의 자동 완성 기능은 단순한 편의성을 넘어 훌륭한 학습 도구다. CSS 속성을 입력하기 시작하면 가능한 속성 목록이 표시되고, 값을 입력할 때도 적절한 옵션이 제안된다. 이 과정에서 자연스럽게 CSS의 어휘를 익히게 된다. 자동 완성 제안이 없다면, 그것은 잘못된 값을 입력하고 있다는 신호이기도 하다.

5. 직관적인 명명 규칙이 진입장벽을 낮춘다.

폰트를 바꾸고 싶다면 font-family, 텍스트 정렬은 text-align, 색상 변경은 color. CSS의 대부분 속성은 그 이름만으로 무엇을 하는지 명확히 알 수 있다. 이런 직관적인 명명 규칙 덕분에 초보자도 쉽게 CSS를 시작할 수 있다.

웹 개발의 여정에서 CSS는 단순한 꾸미기 도구가 아니라, 사용자 경험을 결정짓는 핵심 요소다. HTML이 건물의 구조라면, CSS는 그 건물의 색상, 조명, 배치를 결정한다. 처음에는 단순한 글꼴 변경이나 텍스트 중앙 정렬부터 시작하지만, 이 기본 원리를 이해하면 점차 복잡하고 아름다운 디자인을 구현할 수 있게 된다. 그리고 그 시작점이 바로 style 속성이다.