CSS 기본 문법
CSS 문법
CSS 규칙은 주로 두 부분으로 구성됩니다: 선택자와 하나 이상의 선언。
selector {declaration1; declaration2; ... declarationN }
선택자는 일반적으로 스타일을 변경하고자 하는 HTML 요소입니다。
각 선언은 속성과 값으로 구성됩니다。
속성(property)은 설정하고자 하는 스타일 속성(style attribute)입니다. 각 속성은 값이 하나 있습니다. 속성과 값은 컬론으로 분리됩니다。
selector {property: value}
이 코드行은 h1 요소 내의 글자 색상을 빨간색으로 정의하고, 글자 크기를 14픽셀로 설정합니다。
이 예제에서 h1은 선택자이고, color와 font-size는 속성이며, red와 14px는 값입니다。
h1 {color:red; font-size:14px;}
위의 시각적 설명은 위의 코드 구조를 보여줍니다：
ヒント：선언을 감싸는 대괄호를 사용하세요。
값의 다른 표기법과 단위
영어 단어 red 외에도 16진수 색상 값 #ff0000를 사용할 수 있습니다：
p { color: #ff0000; }
바이트를 절약하기 위해 CSS의 축약 형식을 사용할 수 있습니다：
p { color: #f00; }
RGB 값을 사용할 때는 두 가지 방법이 있습니다：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
RGB 백분율을 사용할 때, 값이 0 일 때도 백분율 기호를 써야 합니다. 그러나 다른 경우에는 이렇게 하지 않아도 됩니다. 예를 들어, 크기가 0 픽셀일 때, 0 이후에 px 단위를 사용하지 않아도 됩니다. 왜냐하면 0은 단위와 관계없이 0이기 때문입니다.
쌍따옴표를 기억해야 합니다
ヒント：값이 여러 단어일 경우, 값을 따로 쓰세요：
p {font-family: "sans-serif";}
다중 선언：
ヒント：여러 선언을 정의하려면 각 선언을 세미콜론으로 분리해야 합니다. 아래의 예제는 빨간 글자의 중앙 정렬된 문단을 정의하는 방법을 보여줍니다. 마지막 규칙은 세미콜론을 추가하지 않아도 됩니다. 왜냐하면 세미콜론은 영어에서 구분 기호이고 종료 기호가 아닌 데요. 그러나 많은 경험 많은 디자이너들은 각 선언의 끝에 세미콜론을 추가합니다. 이렇게 하면 현재 규칙에서 선언을 추가하거나 제거할 때 오류를 최소화할 수 있습니다. 예를 들어:
p {text-align:center}; color:red;}
각 행에 하나의 속성만 설명해야 하며, 이는 스타일 정의의 가독성을 향상시킵니다. 예를 들어:
p {
text-align: center;
color: black;
font-family: arial;
}
공백과 대소문자
대부분의 스타일 시트는 여러 가지 규칙을 포함하고, 대부분의 규칙은 여러 가지 선언을 포함합니다. 다중 선언과 공백의 사용은 스타일 시트가 편리하게 편집되도록 합니다:
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
공백을 포함하더라도 CSS는 브라우저에서의 작동에 영향을 미치지 않습니다. 또한, XHTML과는 달리, CSS는 대소문자에 대해 민감하지 않습니다. 그러나 예외가 있습니다: HTML 문서와 함께 작업할 때, class와 id 이름은 대소문자에 대해 민감합니다.
