CSS의 문법 - by. UXKM

요약 설명

CSS의 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 이루어진 규칙들의 집합으로, HTML 요소를 선택하고 해당 요소에 원하는 스타일을 적용하는 방법을 정의합니다.
선택자(selector)는 HTML 요소를 지정하며, 속성(property)은 해당 요소에 적용할 스타일 속성을 정의하고, 값(value)은 각 속성에 대한 설정값을 나타냅니다. 이러한 규칙들은 중괄호로 묶인 선언 블록으로 구성되어 있으며, HTML 요소와 스타일을 연결하여 디자인에 맞게 웹 페이지의 모양과 느낌을 조절합니다.

속성(property)은 하나 이상의 값(value)을 가질 수 있으며, 이 값들은 세미콜론(;)으로 구분하여 나열됩니다. 모든 [속성-값] 쌍은 중괄호({ })로 둘러싸여 하나의 규칙을 형성합니다.

CSS 기본 구문

  1. 선택자(Selector)

    CSS는 HTML 요소를 선택하기 위해 선택자를 사용합니다. 선택자는 스타일을 적용할 HTML 요소를 지정하는 역할을 합니다. 선택자는 HTML 요소의 태그 이름, 클래스, 아이디 등으로 지정할 수 있습니다.
    예를 들어, p, .class-name, #id-name과 같이 사용할 수 있습니다.

  2. 속성(Property)

    CSS 규칙 안에는 선택한 HTML 요소에 적용할 스타일 속성을 정의합니다. 이는 폰트, 색상, 배경, 여백, 테두리 등 다양한 스타일링 요소를 포함합니다.
    예를 들어, margin, font-size, color, background-color, border 등이 속성에 해당합니다.

  3. 값(Value)

    속성에 대한 설정값을 값으로 정의합니다. 이 값은 해당 속성에 적용될 실제 스타일의 속성을 지정합니다.
    예를 들어, color 속성의 값으로는 색상 이름(red, green, blue 등), RGB 값(rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) 등), HEX(#ff0000, #00ff00, #0000ff 등) 코드 등을 사용할 수 있습니다.

  4. 선언(Declaration)

    선택자와 속성-값의 쌍이 하나의 규칙을 이룹니다. 이를 선언이라고 합니다.
    각 선언은 선택자에 적용할 스타일을 정의합니다. 선언은 중괄호 {}로 묶여 있습니다.

  5. 규칙(Rule)

    CSS 규칙은 선택자와 선언의 조합으로 이루어집니다. 이 규칙은 스타일을 특정 HTML 요소에 적용하는 방법을 정의합니다.
    각 규칙은 선택자와 중괄호로 묶인 선언 블록으로 구성됩니다.

CSS 구문 예제

다음은 <p> 태그에 스타일을 정의하는 CSS의 기본 구문 예제입니다.

이 규칙은 모든 <p> 태그에 대해 글자 색을 파란색으로, 글자 크기를 16픽셀로 설정합니다.
이 규칙의 각 항목에 대한 설명은 다음과 같습니다.

CSS 구문 설명
[CSS 구문 설명]