css 선택자, 속성, 스타일 관계

CSS 선택자(Selector) 복습

CSS의 구문은 스타일을 지정할 대상을 나타내는 선택자와 그렇게 지정된 선택자를 어떤 속성과 값으로 변경할 것인지가 선택자 뒤에 따라옵니다. 즉 선택자, 속성, 값 이렇게 3가지가 되겠네요.

Selector, Attribute, Value의 이해

다음은 일반적인 CSS 구문입니다. 이걸로 각 부분들이 무엇을 의미하는지 알아보죠.

h1,h2{

Background-color:red;

}

H1, H2 : 꾸미고자 하는 HTML 태그 요소(Element)를 말합니다. 위 예제에서는 선택자로서 HTML 태그가 지정된 것이고요. 꼭 HTML태그가 아니더라도 선택자는 ID나 CLASS가 될수도 있습니다. 참고로 선택자가 한 개 이상이라면 선택자 사이에 콤마(,)를 넣어주면 됩니다.

Background-color : 꾸미고자 하는 스타일 속성입니다. 여기서는 배경색의 속성을 변경하겠다는 거죠.

Red : 변경하고자 하는 속성의 값입니다. 배경 색상을 빨강으로 하겠다는 뜻이죠.

정리

CSS 구문은 선택자, 속성, 값으로 이루어집니다. 또 선택자는 여러개 선택할 수도 있고, 여러 속성들의 값을 지정할 수도 있습니다.