[css] CSS의 구조 (선택자, 요소, 값)

CSS는 Cascading Style Sheets의 약자로, HTML이나 XML과 같은 마크업 언어로 작성된 문서의 스타일을 정의하는 스타일 시트 언어입니다. CSS는 웹 페이지의 레이아웃, 디자인, 색상, 폰트 등을 다룹니다. 이를 통해 웹 페이지의 디자인을 더욱 멋지게 만들고, 사용자 경험을 향상시킬 수 있습니다.

CSS는 기본적으로 다음과 같은 구조로 이루어져 있습니다.

선택자(Selectors)

CSS 규칙의 첫 번째 부분으로, 스타일을 적용할 HTML 요소를 선택합니다. 선택자는 요소의 이름, 클래스, 아이디 등으로 정의됩니다.

속성(Properties)

스타일을 적용할 HTML 요소의 특성이나 스타일 속성을 지정합니다. 폰트, 색상, 너비, 높이 등 다양한 스타일 속성을 지정할 수 있습니다.

값(Values)

속성에 대한 설정값으로, 특정한 스타일을 나타냅니다. 예를 들어, 글꼴의 이름, 색상의 코드, 너비의 크기 등이 값에 해당됩니다.

 

선언(Declarations)

선택자와 속성-값 쌍으로 이루어진 스타일 규칙입니다. 선택자가 HTML 요소를 선택하고, 해당 요소에 적용할 스타일을 속성과 값으로 지정합니다.

 

규칙(Rules)

CSS는 선택자와 그에 따르는 선언들로 이루어진 규칙들의 집합입니다. 각 규칙은 특정한 HTML 요소에 적용될 스타일을 정의합니다.

 

 

다음은 CSS의 기본적인 구조를 보여주는 예시입니다.

/* 선택자 */
h1 {
    /* 속성: 값; */
    color: blue;
    font-size: 24px;
}

/* 선택자 */
p {
    /* 속성: 값; */
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

 

 

위의 CSS 코드에서 h1과 p는 선택자에 해당하며, 중괄호 {} 내부에는 각 선택자에 대한 속성과 값이 선언됩니다. 이러한 규칙들을 적용하여 HTML 요소들에 스타일을 적용합니다.