CSS - 문법

오늘은 CSS 문법에 대해 알아보자!

 

다음은 가장 간단한 CSS 코드이다.

h1 { color: red}

h1, color, red 세 개의 단어가 의미하는 것은 무엇인가?

이 세 개의 단어들을 각각 선택자, 속성, 값이라고 한다. 

 

h1 -> 선택자(selector)

선택자(selector)란 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻이다.

 

color -> 속성(property)

속성(property)이란 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻이다.

 

red -> 값(value)

값(value)은 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻이다.

 

즉, CSS 코드는 이렇게 구성된다.

selector { property: value}
/* 선택자 {속성: 값} */

이때 property와 value를 합쳐서 선언(declaration)이라고 한다.

 

여러 개의 선언하는 방법도 알아보자!

세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있다.

예를 들어,

h1{
	color: red;
    font-size: 20px;
}

h1 요소의 색을 붉은색으로, 글자 크기를 20px로 만들겠다는 뜻이다.

 

값(value)에 공백이 있는 경우

값(value)에 공백이 있다면 작은따옴표 또는 큰 따옴표로 감싼다.

p {
	font-family: 'Times New Roman';
}

/* 큰 따옴표
p {
	font-family: "Times New Roman";
}
*/

 

또, CSS에서의 공백은 여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식한다.

selector {
  property: value;
  property: value;
}

/* 같은 의미
selector { property: value; property: value; }
*/

 

CSS에서의 주석은 /*과 */ 사이에 쓴다.

/* 주석 */

/* 줄바꿈이 있어도 주석으로 인식
  주석 1
  주석 2
*/

/* 여러 줄의 주석
 * 주석 1
 * 주석 2
 * 주석 3
 */