[CSS] CSS 기본 규칙

CSS 기본 규칙을 들어가며

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 지정하는 데 사용되는 스타일 시트 언어입니다. CSS를 사용하면 HTML 요소의 색상, 크기, 간격, 위치 등을 제어할 수 있으며, 웹 페이지의 시각적 표현을 개선할 수 있습니다. CSS의 기본 규칙과 작동 원리에 대해 알아보겠습니다.

CSS 기본 규칙

1. 선택자(Selector): CSS에서는 '선택자'를 사용하여 스타일을 적용할 HTML 요소를 지정합니다. 예를 들어, p 선택자는 모든 <p> 요소를 대상으로 합니다.
2. 선언(Declaration): 선택자 뒤에 오는 중괄호 {} 안에 스타일 규칙을 작성합니다. 각 규칙은 속성(Property)과 값(Value)으로 구성됩니다.
3. 속성(Property): 스타일을 지정할 특성을 나타냅니다. 예를 들어, color, font-size, background-color 등이 속성입니다.
4. 값(Value): 속성에 할당되는 구체적인 스타일 값을 나타냅니다. 예를 들어, red, 12px, #FFFFFF 등이 값입니다.
5. 선언 블록: 중괄호 안의 속성-값 쌍들을 '선언 블록'이라고 합니다.

CSS 규칙의 예시

p {
    color: red;
    font-size: 16px;
}

이 예시에서 p는 선택자, color와 font-size는 속성, red와 16px은 각 속성의 값입니다. 이들은 모두 중괄호 {} 안에 선언 블록으로 포함되어 있습니다.

CSS 작동 원리

1. 적용 우선순위: CSS는 'Cascading'이라는 이름에서 알 수 있듯이, 여러 스타일 규칙이 하나의 요소에 적용될 경우 특정한 우선순위에 따라 스타일이 결정됩니다.
2. 상속: 일부 CSS 속성은 부모 요소로부터 자식 요소로 상속됩니다. 예를 들어, 부모 요소의 font-family 속성은 자식 요소에도 적용될 수 있습니다.
3. 미디어 쿼리: CSS 미디어 쿼리를 사용하여 다양한 디스플레이 유형과 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 이는 반응형 웹 디자인에 필수적입니다.

결론

CSS는 웹 개발에서 중요한 요소로, 웹사이트의 시각적 스타일과 레이아웃을 정의합니다. CSS의 기본 규칙을 이해하고 올바르게 적용하는 것은 효과적인 웹 디자인과 사용자 경험을 위해 필수적입니다.