CSS 기초

CSS는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다. Cascading Style Sheets의 약자로, 웹의 시각적 요소를 정의합니다.

개요
기본 문법
주요 선택자
CSS 적용 방법
상속 및 캐스케이딩
주의사항 및 팁

개요

CSS는 HTML이 제공하는 구조에 색상, 폰트, 크기, 위치 등 다양한 시각적 스타일을 적용하는 역할을 합니다. CSS를 통해 HTML 문서의 내용과 디자인을 분리하여 유지보수를 용이하게 하고, 일관된 디자인을 적용할 수 있습니다.

참고

CSS는 HTML의 '스타일'을 담당하며, '구조'는 HTML, '동작'은 JavaScript가 담당합니다.

기본 문법

CSS의 기본 규칙(rule)은 '선택자(selector)'와 '선언 블록(declaration block)'으로 구성됩니다. 선언 블록은 '속성(property)'과 '값(value)'의 쌍으로 이루어집니다.

Css

h1 {
    color: blue;
    font-size: 24px;
}

주요 선택자

CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다.

선택자	설명	예시
`태그 선택자`	특정 태그 이름을 가진 모든 요소 선택	`p { ... }`
`클래스 선택자`	`.`으로 시작하며, 특정 class를 가진 요소 선택	`.title { ... }`
`아이디 선택자`	`#`으로 시작하며, 특정 id를 가진 단일 요소 선택	`#main-header { ... }`
`전체 선택자`	으로 모든 요소 선택	`{ ... }`
`하위 선택자`	공백으로 구분하며, 특정 요소의 하위에 있는 요소 선택	`div p { ... }`

CSS 적용 방법

CSS는 HTML에 세 가지 방식으로 적용될 수 있습니다.

방법	설명
인라인 스타일	HTML 태그의 `style` 속성에 직접 스타일을 정의합니다.
내부 스타일 시트	HTML 문서의 `<head>` 내부에 `<style>` 태그를 사용하여 정의합니다.
외부 스타일 시트	별도의 `.css` 파일에 스타일을 작성하고, `<link>` 태그로 연결합니다.

Html

<!-- 외부 스타일 시트 -->
<link rel="stylesheet" href="style.css">

<!-- 내부 스타일 시트 -->
<style>
  p { color: red; }
</style>

<!-- 인라인 스타일 -->
<p style="color: green;">이 문단은 인라인 스타일이 적용됩니다.</p>

상속 및 캐스케이딩

상속(Inheritance)은 부모 요소에 적용된 스타일이 자식 요소에 자동으로 전달되는 특성입니다. 예를 들어, body 태그에 폰트 크기를 지정하면 대부분의 자식 요소에 상속됩니다.

캐스케이딩(Cascading)은 여러 스타일 규칙이 충돌할 때, 어떤 규칙을 우선적으로 적용할지 결정하는 원리입니다. 선택자의 구체성, 중요도, 적용 순서 등에 따라 우선순위가 결정됩니다.

주의사항 및 팁

유지보수를 위해 대부분의 경우 외부 스타일 시트를 사용하는 것이 좋습니다.
클래스 이름을 지을 때는 내용이 아닌 의미를 담는 이름을 사용하세요 (예: main-nav보다는 primary-navigation).
CSS는 위에서 아래로 순차적으로 적용되므로, 동일한 선택자에 대한 스타일이 여러 개 있을 경우 가장 마지막에 정의된 스타일이 적용됩니다.

주의

인라인 스타일은 우선순위가 매우 높아 다른 스타일을 덮어쓰기 쉽기 때문에, 꼭 필요한 경우가 아니면 사용을 지양하는 것이 좋습니다.