쉬운 설명
HTML로만 만든 웹 페이지는 검은 글자에 파란 링크가 있는 90년대 스타일 문서처럼 보입니다. CSS는 그 위에 색·글꼴·여백·줄 간격·그림자·동작을 입혀서 우리가 아는 현대적인 웹사이트로 만들어 줍니다. 한 줄로 말하면 '브라우저에게 어떻게 보이게 할지'를 알려 주는 언어입니다.
동작 방식은 단순합니다. '어떤 요소(선택자)에 어떤 모양(속성)을 적용하라'는 규칙을 적으면 됩니다. 예: 'h1 태그는 글자 크기 36px, 색은 검정', '.button 클래스는 둥근 모서리에 파란 배경'. 같은 요소에 여러 규칙이 적용되면 우선순위와 작성 순서에 따라 결정됩니다. 이 '겹쳐 쓰여 내려간다'는 발상이 이름의 'Cascading'입니다.
초보자가 자주 막히는 부분은 두 가지입니다. 첫째, 어떤 요소가 왜 이 자리에 있는가(레이아웃). 둘째, 화면을 좁히면 왜 요소가 줄을 바꾸는가(반응형). 둘 다 CSS의 작은 규칙들이 만들어 내는 결과입니다. 다행히 최근에는 Flexbox와 Grid라는 강력한 레이아웃 도구가 표준이라 이전보다 훨씬 다루기 쉬워졌습니다. 'display: flex' 한 줄로 가운데 정렬과 균등 분할을 해결할 수 있게 됐습니다.
현대 CSS는 단순한 스타일링을 넘어 디자인 시스템의 기반이 됩니다. CSS 변수(custom properties)로 색·간격에 이름을 붙여 토큰처럼 관리하고, 미디어 쿼리로 데스크톱·모바일 화면을 한 코드에서 대응합니다. 다크 모드도 CSS만으로 깔끔하게 구현됩니다.
CSS가 까다로운 이유는 '동시에 동작하는 규칙'이 많기 때문입니다. 같은 요소에 일곱 곳에서 색을 정해 두면 무엇이 이기는지 헷갈리고, 부모의 스타일이 자식에게 의도와 다르게 흘러 들어가기도 합니다. 그래서 BEM 같은 명명 규칙이나 CSS-in-JS, Tailwind 같은 유틸리티 우선 접근이 등장했습니다. 어떤 방식을 쓰든 핵심은 '예측 가능한 스타일'을 유지하는 것입니다.
비유로 보면
HTML이 집의 골조라면 CSS는 인테리어입니다. 벽은 그대로 두고 도배·페인트·조명·가구 배치를 바꾸면 같은 골조가 완전히 다른 분위기의 집이 됩니다. CSS를 잘 다룬다는 건 '어떤 인테리어를 쓰면 이 골조가 가장 살아 보이는지'를 안다는 뜻과 비슷합니다.
어디에서 만나나
모든 웹사이트, 모바일 웹앱, 이메일 템플릿(제한된 CSS), 일부 데스크톱 앱(Electron). React Native·Flutter 같은 모바일 프레임워크도 CSS와 유사한 스타일 모델을 사용합니다. 디자인 시스템·접근성·반응형의 거의 모든 결정이 결국 CSS로 표현됩니다.
작은 예시
같은 HTML 문서에 두 가지 CSS만 다르게 입혀 보면, 한쪽은 신문 같은 진지한 블로그가 되고 다른 쪽은 알록달록한 카드 그리드 사이트가 됩니다. CSS만 갈아 끼우면 사이트 분위기가 완전히 달라진다는 뜻이고, 사이트 리뉴얼의 본질이 그 일과 가깝습니다.
자주 하는 오해
한 줄 정리
CSS의 좋은 코드는 '겹침이 적은' 코드입니다. 한 요소의 모양을 결정하는 규칙이 적을수록 변경이 단순해지고 버그가 줄어듭니다.