CSS에서 하나의 요소에 여러 스타일 규칙을 정의하는 방법

CSS를 사용하다 보면 하나의 요소에 여러 개의 스타일 속성을 동시에 적용해야 하는 경우가 자주 발생합니다. 예를 들어 제목(h1)의 글자 색상, 굵기, 자간, 여백 등을 한 번에 지정하고 싶을 수 있습니다.

여러 스타일 규칙을 하나의 블록으로 묶기

이럴 때는 여러 속성과 그에 대응하는 값들을 하나의 선언 블록 안에 함께 정의하면 됩니다. 아래 예시는 h1 요소에 다섯 가지 스타일 속성을 동시에 적용한 코드입니다.

h1 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;
}

속성과 값의 구분 방법

위 코드에서 볼 수 있듯이, 모든 속성(property)과 값(value)의 쌍은 세미콜론(;)으로 구분됩니다. 세미콜론은 각 선언이 어디서 끝나고 다음 선언이 시작되는지를 브라우저에 알려주는 역할을 하므로, 마지막 속성 뒤에는 생략할 수 있지만 습관적으로 모든 선언 뒤에 붙이는 것이 좋습니다.

가독성을 위한 작성 팁

선언들은 한 줄에 모두 작성할 수도 있고, 위 예시처럼 여러 줄로 나누어 작성할 수도 있습니다. 기능적인 차이는 없지만, 가독성과 유지보수 편의성을 고려하면 각 속성을 별도의 줄에 작성하는 것이 훨씬 좋습니다. 특히 협업 프로젝트에서는 여러 줄로 나누어 작성된 CSS 코드를 다른 개발자가 이해하기 훨씬 쉽습니다.