CSS의 진화, 인라인 스타일에서 규칙 기반 스타일으로
Day 3. Using Global CSS Styles
웹 개발을 처음 배울 때는 간단한 솔루션부터 시작하지만, 곧 그 한계점에 부딪히게 된다. 최근 강의에서 CSS를 적용하는 더 효율적인 방법을 소개하며 발견한 인사이트를 공유한다.
<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>
<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>
1. 인라인 스타일은 기술 부채의 시작점이다.
인라인 스타일(style 속성)은 초기에는 편리하지만, 웹사이트가 성장하면서 심각한 문제가 된다. "수십, 수백 개의 문단을 가진 웹사이트를 만든다고 생각해보자. 모든 문단에 스타일을 복사-붙여넣기 한다면, 이는 매우 짜증나는 작업이 될 것이다." 이런 접근 방식은 단순한 불편함을 넘어, 유지보수가 불가능한 코드로 이어진다.
2. 스타일 변경은 필연적이다.
"만약 색상을 조금 다르게 바꾸고 싶다면?" 이 간단한 질문은 인라인 스타일의 가장 큰 약점을 드러낸다. 웹 디자인은 정적이지 않고 끊임없이 진화한다. 스타일 변경이 필요할 때마다 모든 요소를 개별적으로 수정해야 한다면, 그것은 현실적이지 않다.
태그는 보이지 않는 강력함이다.
3. <style> 태그는 보이지 않는 강력함이다.
지금까지 사용한 HTML 요소들(h1, p, a)은 모두 화면에 무언가를 표시했다. 그러나 style 요소는 다르다. "style 요소는 눈에 보이지 않는다. 화면에 아무것도 렌더링하거나 표시하지 않는다." 이 보이지 않는 요소가 웹 페이지의 전체 외관을 제어한다는 점이 흥미롭다.
4. CSS 규칙은 언어가 아닌 '선언'이다.
CSS 규칙의 구조(선택자 + 중괄호 + 속성-값 쌍)는 단순한 문법적 규칙이 아니라, 어떤 요소에 어떤 스타일을 적용할지 '선언'하는 방식이다. 예를 들어 "p { color: rgb(83, 75, 75); }"는 "모든 p 태그는 이 색상을 가져야 한다"고 선언하는 것이다.
5. 개발자 도구는 CSS 학습의 최고 교사다.
개발자 도구를 통해 스타일이 어디서 오는지 확인할 수 있다. "우리는 스타일이 이 규칙에서 오는 것을 확인할 수 있고, 심지어 이 규칙이 어디에 정의되어 있는지도 알려준다 - index.html 파일의 2번 라인에." 이런 투명성이 CSS 학습과 디버깅을 훨씬 수월하게 만든다.
CSS를 이해하는 과정은 단순히 문법을 배우는 것이 아니라, 웹 개발의 철학을 이해하는 것이다. HTML이 콘텐츠의 구조와 의미를 정의한다면, CSS는 그 시각적 표현을 담당한다. 두 언어를 분리함으로써 각각의 역할이 더 명확해지고, 코드는 더 읽기 쉽고 유지보수하기 쉬워진다. 이는 단순한 기술적 선택이 아니라, 더 나은 웹을 위한 철학적 접근법이다.
