CSS / Tutorial / 문법

CSS 규칙은 어떤 요소를 꾸밀지 정하는 선택자와, 무엇을 어떻게 바꿀지 정하는 속성·값으로 이루어집니다. 예를 들어 p { color: #176b54; }는 문단을 선택해 글자색을 바꿉니다. 중괄호 안의 color: #176b54; 한 쌍을 선언이라고 합니다.

규칙의 기본 구조

p {
  color: #176b54;
}

p는 선택자(selector), color는 속성(property), #176b54는 값(value)입니다. 콜론은 속성과 값을 나누고, 세미콜론은 선언을 마칩니다. 중괄호는 이 규칙에 속한 선언들을 묶습니다. 선택자가 일치하는 요소가 여러 개면 모두 같은 규칙의 대상이 됩니다.

CSS 파일에는 이런 규칙을 이어서 적습니다. HTML 문서 안에서 작성한다면 일반적으로 head의 style 요소에 넣고, 별도 CSS 파일이라면 style 태그 없이 규칙만 넣습니다. 인라인 style 속성에는 선택자와 중괄호 없이 선언만 적습니다.

선언 여러 개 작성하기

하나의 요소에 글자색, 배경색, 안쪽 여백을 함께 지정할 수 있습니다.

.notice {
  color: #173b34;
  background-color: #e9f4ee;
  padding: 16px;
}

각 선언 끝에 세미콜론을 쓰면 다음 선언과 분명하게 구분됩니다. 마지막 선언의 세미콜론은 생략할 수 있지만, 나중에 선언을 추가할 때 실수하지 않도록 일관되게 적는 편이 좋습니다. 속성에 맞지 않는 값이나 알 수 없는 속성을 적으면 브라우저가 해당 선언을 무시할 수 있으므로 결과가 안 보일 때는 철자부터 확인하세요.

예제의 .notice는 클래스 선택자입니다. HTML 요소에 class="notice"가 있어야 규칙이 적용됩니다. 선택자를 여러 개 쉼표로 나열하면 선언 블록을 공유할 수도 있습니다.

h1,
h2 {
  color: #176b54;
}

쉼표가 없는 h1 h2는 의미가 다릅니다. 이는 h1의 자손인 h2를 찾는 선택자이므로, 두 종류의 제목을 함께 꾸미려면 쉼표를 빠뜨리지 마세요.

주석과 공백 사용하기

CSS 주석은 /*로 시작하고 */로 끝납니다. 브라우저는 주석 안의 선언을 스타일로 적용하지 않습니다.

/* 안내 상자의 색상 */
.notice {
  color: #173b34;
  /* padding: 16px; */
}

주석은 규칙의 목적을 설명하거나 잠시 선언을 제외할 때 유용합니다. //는 CSS의 일반적인 주석 표기가 아닙니다. 또한 /*를 닫지 않으면 이후 코드가 주석으로 취급될 수 있으니 종료 표시를 확인하세요.

선택자와 중괄호 주변의 줄바꿈·들여쓰기는 대부분 결과를 바꾸지 않지만, 읽기 쉬운 형태로 적어야 오류를 찾기 쉽습니다. 다만 문자열 안의 공백, calc()의 연산자 주변 공백처럼 문법에 영향을 주는 곳도 있으므로 ‘CSS의 공백은 언제나 무시된다’고 생각하면 안 됩니다. 공백이 있는 글꼴 이름은 font-family: "Noto Sans KR", sans-serif;처럼 따옴표로 묶어 두면 의도가 분명합니다.

완성된 문서에서 확인하기

다음 코드를 index.html로 저장한 뒤 브라우저에서 열어 보세요. 상자에 연한 배경과 여백이 생기고, 제목은 초록색으로 보입니다. 클래스 이름을 notice에서 다른 이름으로 바꾼 뒤 새로고침하면 상자 규칙만 적용되지 않는 것을 확인할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 문법 연습</title>
  <style>
    h1 {
      color: #176b54;
    }

    .notice {
      background-color: #e9f4ee;
      padding: 16px;
    }
  </style>
</head>
<body>
  <h1>CSS 문법</h1>
  <p class="notice">선택자와 선언을 확인하는 예제입니다.</p>
</body>
</html>

모양이 예상과 다르면 선택자의 철자, 중괄호·콜론·세미콜론, 저장 여부를 차례로 확인하세요. 브라우저 개발자 도구에서는 어떤 규칙이 요소에 맞았고 어떤 선언이 무시됐는지도 볼 수 있습니다. CSS 문법의 공식적인 설명과 실습은 MDN의 CSS 시작 안내를 참고하세요.