CSS를 본격적으로 배우기 전에 가장 먼저 익혀야 할 개념이 바로 구문(syntax)입니다. '구문'이라는 단어가 다소 어렵게 느껴질 수 있지만, 사실 CSS에서 코드를 작성할 때 지켜야 하는 규칙을 의미할 뿐입니다. 이러한 규칙은 표준화되어 있기 때문에 다른 개발자가 작성한 코드도 쉽게 읽고 이해할 수 있습니다.
CSS 구문에서 가장 중요한 두 가지 요소는 선택자(selector)와 선언 블록(declaration block)입니다. 선택자는 웹 페이지에서 스타일을 적용할 요소를 지정하는 역할을 하며, 선언 블록은 선택한 요소에 적용할 스타일 내용을 담습니다.
이 글에서는 예제와 함께 CSS 구문의 기본 원리와 스타일 규칙의 구조를 살펴보고, CSS에서 주석을 작성하는 방법까지 알아봅니다. 글을 끝까지 읽고 나면 직접 CSS 스타일을 작성할 수 있는 기본기를 갖추게 될 것입니다.
CSS 스타일 규칙
CSS에서 스타일시트는 웹 사이트가 사용자 화면에 어떻게 표시될지 결정하는 일련의 규칙을 저장합니다. 예를 들어, 웹 페이지 텍스트의 색상이나 특정 제목의 글꼴 크기를 스타일시트에 정의할 수 있습니다.
이러한 규칙은 모두 표준화된 구조를 따르며, 크게 두 부분으로 구성됩니다. 바로 선택자와 선언입니다. CSS에서 스타일 규칙은 다음과 같은 형태로 작성됩니다.
h1 {
color: blue;
}
위 스타일 규칙은 웹 페이지의 모든 <h1> 요소 색상을 파란색으로 지정합니다. 이제 이 규칙을 두 가지 구성 요소로 나누어 어떻게 동작하는지 자세히 살펴보겠습니다.
CSS 선언(Declaration)
CSS 스타일의 첫 번째 구성 요소는 선언입니다. 선언이란 웹 페이지의 요소에 적용하려는 특정 스타일을 의미합니다.
하나의 CSS 스타일 규칙에는 최소 하나 이상의 선언이 포함되어야 하며, 원하는 만큼 여러 개의 선언을 추가할 수도 있습니다. 예를 들어 박스의 너비와 높이를 100px로 설정하고 배경색을 파란색으로 지정하고 싶다면, 하나의 규칙 안에 여러 선언을 나열하면 됩니다.
선언은 다음 두 부분으로 구성됩니다.
- 속성(Property): 요소에 적용할 스타일 항목입니다. (예: color, background-color, width, height)
- 값(Value): 해당 속성이 브라우저에서 어떻게 표시될지를 지정합니다. (예: 박스 색상을 "green" 또는 "red"로 설정)
CSS 선언의 기본 문법은 다음과 같습니다.
property: value;
속성이 먼저 오고, 콜론(:)으로 구분된 뒤 값이 따라옵니다. 즉, 콜론 뒤에는 정의한 속성에 할당할 값을 작성합니다.
각 CSS 선언은 반드시 세미콜론(;)으로 끝나야 합니다.
다음은 두 개의 CSS 선언 예시입니다.
color: blue; font-size: 16px;
첫 번째 선언은 HTML 요소의 글꼴 색상을 "blue"로, 두 번째 선언은 글꼴 크기를 "16px"로 지정합니다. 두 선언 모두 속성 이름으로 시작하고, 콜론 뒤에 할당할 값을 작성하는 동일한 구조를 따릅니다.
선언들은 중괄호({ }) 안에 작성됩니다.
CSS 선택자(Selector)
앞서 선언을 통해 웹 요소에 스타일을 적용하는 방법을 살펴봤습니다. 하지만 선언만으로 CSS 구문이 완성되지는 않습니다. 나머지 한 부분인 선택자는 브라우저에게 특정 선언 집합을 어떤 요소에 적용해야 하는지 알려주는 역할을 합니다.
CSS 선택자의 기본 문법은 다음과 같습니다.
selector {
// 선언 목록
}
선택자는 스타일을 적용할 대상 요소를 브라우저에 지시합니다. 예를 들어, 모든 <div> 요소의 너비를 "500px"로 설정하고 싶다면 다음과 같이 작성할 수 있습니다.
div {
width: 500px;
}
여기서 div가 선택자이며, CSS 규칙의 맨 앞에 위치합니다. 그 뒤 중괄호 안에 앞서 설명한 문법대로 선언들을 작성합니다. 이 규칙은 웹 페이지의 모든 <div> 요소 너비를 "500px"로 설정합니다.
선택자에 대해 더 깊이 알고 싶다면 CSS 선택자 초보자 가이드를 참고해 보세요.
이처럼 선언과 선택자가 함께 어우러져 하나의 CSS 스타일 규칙을 이룹니다.
CSS 주석(Comment)
지금까지 CSS에서 스타일 규칙을 작성하는 방법을 알아봤습니다. 하지만 스타일시트에 작성되는 모든 텍스트가 스타일 규칙인 것은 아닙니다.
CSS 스타일시트에는 주석(comment)도 포함될 수 있습니다. 주석은 개발자가 코드를 더 쉽게 이해할 수 있도록 작성해 두는 메모 성격의 텍스트 블록입니다. 주석은 브라우저가 무시하기 때문에 스타일시트에 원하는 만큼 자유롭게 추가할 수 있습니다.
주석을 작성하면 좋은 점은 크게 두 가지입니다.
첫째, 코드를 작성하면서 흐름을 정리하고 기록으로 남길 수 있어, 나중에 코드를 다시 볼 때 이해에 큰 도움이 됩니다. 둘째, 본인이 작성하지 않은 다른 개발자도 코드의 목적과 작성 의도를 파악할 수 있게 되어 협업에 유리합니다.
CSS 주석은 /* 로 시작하고 */ 로 끝납니다.
한 줄 주석과 여러 줄 주석
CSS 주석에는 두 가지 유형이 있습니다. 바로 한 줄 주석과 여러 줄 주석입니다.
한 줄 주석은 스타일시트에서 한 줄에 걸쳐 작성되는 주석입니다. 다음은 스타일 규칙 위에 작성된 한 줄 주석의 예시입니다.
/* 이 스타일은 모든 <p> 태그의 글꼴 크기를 16px로 설정합니다 */
p {
font-size: 16px;
}
위 코드에서 주석은 /* 와 */ 마커 사이에 위치하며, 그 아래에 앞서 설명한 문법으로 작성된 스타일 규칙이 이어집니다.
여러 줄 주석은 스타일시트에서 두 줄 이상에 걸쳐 작성되는 주석입니다. 다음은 CSS 여러 줄 주석의 예시입니다.
/* 이 스타일은 모든 <p> 태그의 글꼴 크기를 16px로 설정하고
텍스트 색상도 회색으로 지정합니다 */
p {
font-size: 16px;
color: gray;
}
이 주석은 두 줄에 걸쳐 작성되었으며, 하나의 CSS 스타일을 설명하고 있습니다.
마무리
다른 프로그래밍 언어와 마찬가지로 CSS 역시 코드를 작성하는 방식을 정의하는 기본 문법을 갖추고 있습니다.
CSS에서 스타일 규칙은 두 가지 요소로 구성됩니다. 선언은 요소에 적용하려는 스타일 내용이고, 선택자는 그 선언이 적용될 대상 요소를 지정합니다.
또한 CSS에는 주석 기능이 있어, 나중에 참고할 수 있도록 코드에 메모를 남길 수 있습니다. 주석은 브라우저가 무시합니다.
이번 글에서는 CSS 구문의 기본 원리와 스타일시트에 주석을 작성하는 방법을 살펴봤습니다. 이제 여러분도 전문 웹 개발자처럼 CSS 스타일 규칙과 주석을 자유롭게 작성할 준비가 되었습니다!