CSS 강좌 / 문법: 선택자·선언·주석과 오류 처리

CSS의 기본 규칙은 선택자 { 속성: 값; } 형태입니다. 선택자는 꾸밀 요소를 고르고, 중괄호 안의 선언은 그 요소에 적용할 모양을 정합니다. 콜론은 속성과 값을, 세미콜론은 선언과 선언을 구분하므로 줄바꿈만으로 두 선언을 나눌 수는 없습니다.

규칙 한 개를 구성하는 부분

.notice {
  color: #087f5b;
  padding: 16px;
}

속성마다 허용하는 값이 다릅니다. color에는 색상값을, padding에는 길이값 등을 넣습니다. padding: blue;는 단어의 철자가 맞더라도 여백 값으로 사용할 수 없습니다. 16px는 숫자와 단위를 붙여 씁니다. 16 px처럼 띄어 쓰면 하나의 길이값으로 읽히지 않습니다.

중괄호·콜론·세미콜론과 줄바꿈

줄바꿈과 들여쓰기는 사람이 코드를 읽기 쉽게 만드는 역할을 합니다. 다음 두 규칙은 같은 선택자와 같은 선언을 갖고 있으므로 동일하게 적용됩니다. 처음 배울 때는 선언을 한 줄씩 나누면 빠진 기호를 찾기 쉽습니다. 꾸밀 대상에 따라 선택자를 고르는 방법은 요소·클래스·ID·속성 선택자에서 비교합니다.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

마지막 선언의 세미콜론은 문법상 생략할 수 있지만, 나중에 선언을 추가할 때 실수하기 쉬우므로 항상 적는 습관이 좋습니다. 선택자 안의 공백은 별도의 의미를 가질 수 있습니다. .notice.urgent는 두 클래스가 함께 있는 요소를, .notice .urgent는 notice 안의 urgent 요소를 고릅니다. 이 공백까지 제거해도 같은 코드라고 생각하면 안 됩니다. 기본 선언 구조는 MDN의 CSS 문법 설명에 정리되어 있습니다.

여러 선택자 묶기와 주석 쓰기

h1, h2 {
  color: #087f5b;
}

/* 안내문에만 배경과 테두리를 적용합니다. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

쉼표는 여러 선택자를 같은 선언 블록에 연결합니다. h1, h2는 h1과 h2를 각각 선택하며, h1 h2는 h1 안에 있는 h2를 찾는 다른 선택자입니다. 같은 색을 적용하려는 목적에는 쉼표가 맞습니다.

CSS 주석은 /*로 시작해 */로 끝납니다. 주석 안의 문장은 스타일로 실행되지 않습니다. 설명을 쓰거나 잠깐 규칙을 제외할 때 쓸 수 있지만, 닫는 기호를 빠뜨리면 뒤의 코드까지 주석으로 처리될 수 있습니다. 일반 CSS에서는 JavaScript의 //를 한 줄 주석 표기로 사용하지 않습니다.

잘못된 선언과 잘못된 선택자는 영향이 다릅니다

브라우저는 CSS의 오류를 만나면 유효하지 않은 부분을 무시하고 가능한 규칙을 계속 처리합니다. 그렇다고 항상 “틀린 한 줄만 무시한다”는 뜻은 아닙니다. 빠진 구분 기호나 선택자 오류가 있으면 영향 범위가 커질 수 있습니다.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

여기서는 padding: blue만 유효하지 않습니다. 다른 규칙이 없다면 글자색과 배경색은 적용되고, 안쪽 여백은 이 선언으로 바뀌지 않습니다. 속성을 colro처럼 잘못 쓰는 경우에도 그 선언은 인식되지 않습니다.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

반면 이 예제에서는 첫 선언 뒤의 세미콜론이 없습니다. 브라우저는 다음 세미콜론까지를 color의 값으로 읽으려 하므로 blue background-color: #e9f7ef가 유효하지 않은 색상값이 됩니다. 따라서 이 블록의 색과 배경 선언이 모두 적용되지 않고, 뒤의 padding: 16px는 적용됩니다. 해결 방법은 blue 뒤에 세미콜론을 넣는 것입니다.

h1, .notice:made-up-state {
  color: blue;
}

이처럼 일반적인 쉼표 선택자 목록에 알 수 없는 가상 클래스가 들어가면 목록 전체가 유효하지 않아 h1에도 해당 규칙이 적용되지 않습니다. 일부 특수 선택자 목록에는 다른 처리 규칙이 있으므로 이 예제를 모든 CSS 구문에 확대해서 적용하지는 마세요. 오류 처리 범위는 MDN의 CSS 오류 처리 설명을 참고할 수 있습니다.

전체 예제와 결과 확인

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>작은 정원</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* 운영 시간을 설명하는 문장 */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>작은 정원</h1>
  <p class="notice">매일 오전 9시에 문을 엽니다.</p>
  <h2>방문 안내</h2>
  <p class="description">물병과 편한 신발을 준비하세요.</p>
</body>
</html>

전체 코드를 index.html로 저장해 열면 h1과 h2가 같은 초록색이고, 안내문에는 연한 배경·16px 안쪽 여백·1px 테두리가 보입니다. 설명 문장은 18px로 표시됩니다. font-size는 글자 크기, line-height는 줄 높이, border는 테두리를 정하는 속성입니다. 여기서는 문법과 결과를 연결하기 위한 보조 속성으로 사용했습니다.

틀린 코드를 고치는 실습

전체 예제의 .notice 블록을 아래 코드로 바꾸어 보세요. 문법 오류 두 개를 고쳐서 “파란 글자, 연한 초록 배경, 16px 여백”이 되도록 만드는 것이 목표입니다. 바꾸기 전에는 원래 파일을 다른 이름으로 복사해 두면 쉽게 되돌릴 수 있습니다.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

수정 답안: colro를 color로 고치고, background-color 뒤에 콜론을 넣습니다. 저장 후 새로고침하면 안내문 글자와 배경이 목표대로 바뀝니다. 수정 전에도 padding 선언은 유효하므로 여백이 남아 있을 수 있습니다. 일부 모양이 보인다고 전체 코드가 올바른 것은 아닙니다.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

수정했는데도 바뀌지 않으면 열어 둔 파일이 맞는지 먼저 확인하고, 개발자 도구에서 선택된 요소의 Styles와 Computed 확인하기로 실제 적용값을 살펴보세요. 문법 오류, 대상 선택 오류, 다른 규칙과의 충돌을 구분하면 무작정 값을 바꾸는 일을 줄일 수 있습니다.