[CSS] CSS에서 하나의 선택자에 여러 개의 스타일 규칙을 지정

CSS에서 하나의 선택자에 여러 개의 스타일 규칙을 지정

CSS에서 하나의 선택자에 여러 개의 스타일 규칙을 지정하는 것은 매우 일반적인 작업입니다. 이를 통해 특정 HTML 요소에 다양한 스타일 속성을 한 번에 적용할 수 있습니다. 선택자에 여러 스타일을 적용하는 방법을 살펴보겠습니다.

CSS 선택자와 다중 스타일 규칙

1. 선택자 정의: 우선, 스타일을 적용할 HTML 요소를 선택합니다. 이것은 태그 이름, 클래스, ID 등이 될 수 있습니다.
2. 선언 블록: 선택자 뒤에 중괄호 {}를 사용하여 선언 블록을 시작합니다.
3. 다중 스타일 규칙 적용: 선언 블록 내부에 적용할 스타일 규칙들을 나열합니다. 각 스타일 규칙은 속성과 값으로 구성되며, 세미콜론(;)으로 구분됩니다.

예시

p {
    color: blue;        /* 텍스트 색상을 파란색으로 지정 */
    font-size: 18px;    /* 폰트 크기를 18픽셀로 지정 */
    line-height: 1.5;   /* 줄 간격을 1.5로 설정 */
    margin-bottom: 10px;/* 아래쪽 여백을 10픽셀로 설정 */
}

이 예시에서 p 선택자는 <p> 태그에 적용되며, 해당 태그는 파란색 글씨, 18픽셀의 글꼴 크기, 1.5의 줄 간격, 그리고 아래쪽 여백이 10픽셀로 지정된 스타일을 가지게 됩니다.

주의사항

• 세미콜론 사용: 각 스타일 선언 뒤에는 세미콜론(;)을 붙여야 합니다. 이는 다음 스타일 규칙과 구분하는 데 필요합니다.
• 스타일 충돌: 하나의 HTML 요소에 여러 선택자가 스타일을 적용할 경우, CSS의 우선순위 규칙에 따라 어떤 스타일이 적용될지 결정됩니다.
• 가독성 유지: 스타일 규칙이 많아질 경우, 가독성을 위해 각 규칙을 별도의 줄에 작성하는 것이 좋습니다.

CSS를 사용하여 하나의 선택자에 여러 스타일 규칙을 적용하는 방법은 웹 페이지의 다양한 요소에 일관된 스타일을 효율적으로 적용하는 데 매우 유용합니다.