티스토리 강좌 / CSS / 문법
문법
CSS 코드는 다음처럼 생겼습니다.
p { color: blue }
- p : 문단을 뜻하는 HTML 요소입니다.
- color : 글자색입니다.
- blue : 파란색입니다.
즉, 문단의 글자색을 파란색으로 만들라는 뜻입니다. 이때 p를 선택자(selector), color를 속성(property), blue를 값(value)이라고 합니다. 선택자로 무엇을 꾸밀지 정하고, 속성으로 어떤 모양을 꾸밀지 정하고, 값으로 꾸밉니다.
selector { property: value }
속성과 값을 합쳐서 선언(declaration)이라고 합니다.
여러 개의 선언
하나의 선택자에 대해서 여러 가지 모양을 꾸미고 싶다면 선언이 여러 개 들어가야 합니다. 이때 선언과 선언은 세미콜론(;)으로 구분합니다. 예를 들어 문단의 글자색은 파란색, 글자 크기는 20px로 정하고 싶다면 다음과 같이 합니다.(마지막 세미콜론은 붙이지 않아도 되지만, 항상 세미콜론으로 선언을 끝내는 게 여러모로 편합니다.)
p {
color: blue;
font-size: 20px;
}
CSS에서 줄바꿈이나 여러 개의 연속된 공백은 의미가 없습니다. 따라서 다음과 같이 한 줄로 써도 됩니다.
p { color: blue; font-size: 20px; }
값에 공백이 있다면
값에 공백이 있는 경우가 있습니다. 대표적인 게 글꼴 이름입니다. 그럴 땐 값을 작은 따옴표 또는 큰 따옴표로 감쌉니다.
p { font-family: 'Times New Roman'; }
p { font-family: "Times New Roman"; }
주석
웹브라우저가 해석하지 않는 코드를 주석이라고 합니다. 주석을 만드는 방법은 /*와 */로 감싸는 것입니다.
/* Comment */
/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.
/* Comment 1 Comment 2 */