CSS 기초부터 Tailwind CSS까지 핵심 선택자와 상속 메커니즘 정리함

Context

CSS는 웹 페이지의 구조를 담당하는 HTML에 시각적 스타일을 입히는 언어입니다. 초보 개발자가 혼란을 느끼기 쉬운 cascading 우선순위 체계와 다양한 스타일 적용 방식의 차이를 명확히 이해할 필요가 있습니다.

Technical Solution

• Selectors & Properties: p, h1, div 등 HTML 요소를 선택하여 color, font-size, margin 속성으로 스타일 지정함
• Inline/Internal/External: HTML 요소에 직접 작성, style 태그 내 삽입, 별도 .css 파일 분리 세 가지 방식 지원함
• Cascading & Inheritance: 우선순위에 따라 스타일 오버라이드되며, 자식 요소가 부모 스타일을 상속받는 메커니즘임
• Tailwind CSS: bg-blue-500, text-center 등 사전 정의된 utility class를 제공하여 반복 코드 감소함
• Case Sensitivity: 속성명과 값은 대소문자 무관하지만, HTML에서 정의된 class와 ID 이름은 대소문자 구분됨

Impact

수치가 포함되지 않은 입문 가이드입니다.

Key Takeaway

CSS의 cascading 우선순위 체계를 숙지하면 예상치 못한 스타일 충돌을 방지할 수 있습니다. utility-first CSS 프레임워크인 Tailwind CSS는 전통적 CSS 작성 방식의 대안으로 개발 속도를 크게 향상시킵니다.