'CSS기초문법'에 해당되는 글 1건

CSS 문법은 다음과 같습니다.
selector {
  property: value
}

selector(선택자)로 어떤 요소를 꾸밀지 정하고, property(속성)로 어떤 모양을 꾸밀지 정합니다. value(값)에는 모양의 값을 넣습니다.

property와 value를 합쳐서, 즉
property: value

를 declaration(선언)이라고 합니다.

예를 들어 다음과 같은 코드가 있다고 할 때,
h1 {
  color: red
}

선택자(selector)는 h1으로 h1 요소를 꾸미겠다는 뜻입니다. 속성(property)은 color로 색을 바꾸겠다는 것이고, 값(value)이 red이므로 빨간색으로 만듭니다.

여러 개의 선언

선언(declaration)은 여러 개 넣을 수 있습니다. 선언과 선언 사이에는 세미콜론(;)을 넣어 구분합니다.

선언이 하나만 있거나, 여러 개의 선언이 있을 때 마지막 선언에는 세미콜론은 넣지 않아도 되나, 보통은 선언 뒤에 항상 세미콜론을 붙입니다.
selector {
  property: value;
  property: value;
  ...
  property: value;
}

값에 공백이 있는 경우

선택자(selector)나 속성(property)에는 공백이 없습니다. 하지만 값에는 공백이 있을 수 있습니다. 값(value)에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면
p {
  font-family: 'Times New Roman';
}

또는
p {
  font-family: "Times New Roman";
}

와 같이 합니다.

공백

CSS 코드에서 공백은 의미가 없습니다. 즉,
selector {
  property: value;
  property: value;
}

와
selector {property: value; property: value;}

는 같은 결과를 만듭니다.

결과는 같지만, 줄바꿈과 띄어쓰기가 많을수록 파일 크기가 늘어납니다. 따라서 코드를 만들 때는 가독성있게 작업하고, 완성된 후에는 공백을 없애기도 합니다.

주석

주석(Comment)은 /*과 */ 사이에 씁니다.
/* Comment */

/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.
/*
  Comment 1
  Comment 2
*/