[CSS] css의 기본 문법

css의 기본 문법

1. css 기본규칙

- css의 기본규칙은 선택자(selector) 부분과 선언부(declaration) 부분으로 구성되고 선언부는 다시 속성(property)과 속성 값(value)으로 나눌 수 있다.

 

 

- 선택자 영역에는 css를 적용하여 스타일을 지정할 HTML요소를 가리키는데 HTML 요소, 아이디(id) 선택자, 클래스(class) 선택자, 그룹(group) 선택자등이 있다.

- 선언부 영역에는 세미콜론으로 구성된 하나이상의 선언이 있어야 하고 선언은 콜론으로 구분된 css속성이름과 값이 포함된다. 여러개의 선언은 세미콜론으로 구분되고 모든 선언을 중괄호로 묶는다.

ex)

/* 
선택자 : table 요소 선택자 
선언부 : background-color속성의 red속성값 선언
*/
p { background-color: red; }
<p>이부분의 스타일을 지정</p>

/* 
선택자 : 아이디(id) 선택자 
선언부 : background-color속성의 blue속성값 선언
*/
#cssIdTest { background-color: blue; }
<div id='cssIdTest'>이부분의 스타일을 지정</div>

/* 
선택자 : 클래스(class) 선택자 
선언부 : background-color속성의 yellow속성값 선언
*/
.cssClassTest { background-color: yellow; }
<div id='cssIdTest' class='cssClassTest'>이부분의 스타일을 지정</div>

/* 
선택자 : 그룹(group) 선택자 
선언부 : color속성의 navy속성값 선언
선언부 : text-align속성의 center속성값 선언
선언부 : background-color속성의 grey속성값 선언
*/
h1 { color: navy; }
h1, h2 { text-align: center; }
h1, h2, p { background-color: grey; }
<h1>이부분의 스타일을 지정</h1>
<h2>이부분의 스타일을 지정</h2>
<p>이부분의 스타일을 지정</p>

 

2. css 적용 우선순위

- 기본적으로 선언 순서대로 적용되지만 선택자와 삽인된 위치에 따라 우선순위가 달라진다.

- 우선순위 : !important > 인라인 스타일(Inline style) > 아이디(id) 선택자 > 클래스(class), 추상클래스 선택자 > tag 선택자