CSS의 기본 개념과 선택자 이해하기
CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어입니다. HTML이 웹 페이지의 구조를 정의한다면, CSS는 그 구조에 스타일을 입혀 사용자가 보기 좋게 만들어줍니다. 이번 글에서는 CSS의 기본 개념과 선택자에 대해 알아보겠습니다.
1. CSS 규칙
CSS 규칙은 선택자와 선언 블록으로 구성됩니다. 선택자는 어떤 요소에 스타일을 적용할지 결정하고, 선언 블록은 적용할 스타일을 정의합니다.
선택자 {
속성: 속성값;
}- 선택자(Selector): 스타일을 적용할 HTML 요소를 선택합니다.
- 선언(Declaration): 스타일 속성과 그 값을 정의합니다. 하나 이상의 선언이 중괄호
{}안에 들어갑니다. - 속성(Property): 변경하고자 하는 스타일 속성입니다. 예:
color,font-size,margin등. - 속성값(Value): 속성에 적용할 값입니다. 예:
red,16px,10px등.
2. CSS 선택자
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용할 수 있게 합니다. 다양한 선택자가 있으며, 각 선택자는 특정 조건을 만족하는 요소를 선택합니다.
-
요소 선택자(Element Selector): 특정 HTML 태그를 선택합니다.
p { color: blue; } -
클래스 선택자(Class Selector): 특정 클래스를 가진 요소를 선택합니다. 클래스 이름 앞에 점(
.)을 붙여 사용합니다..example { font-size: 20px; } -
ID 선택자(ID Selector): 특정 ID를 가진 요소를 선택합니다. ID 이름 앞에 해시(
#)를 붙여 사용합니다.#unique { margin: 10px; }
3. 선택자 목록 (Selector List)
선택자 목록을 사용하면 여러 선택자에 동일한 스타일을 적용할 수 있습니다. 선택자들을 쉼표(,)로 구분하여 나열합니다.
h1, h2, p {
color: green;
}위 예제에서는 h1, h2, p 요소 모두에 color: green; 스타일이 적용됩니다.
4. 선택자 붙여쓰기
HTML 요소에 여러 클래스를 적용하고 싶을 때, 클래스 이름을 띄어쓰기로 구분하여 작성할 수 있습니다.
<p class="a b">텍스트</p>이 경우, a와 b 클래스가 모두 적용됩니다. CSS에서 선택자를 붙여써서 두 클래스를 모두 가진 요소에 스타일을 적용할 수 있습니다.
.a.b {
font-weight: bold;
}위 예제에서는 a와 b 클래스를 모두 가진 요소에 font-weight: bold; 스타일이 적용됩니다.
5. 자식, 자손 클래스 선택하기
-
자식 결합자 (Child Combinator): 특정 요소의 직계 자식을 선택합니다.
>기호를 사용합니다..parent > .child { color: red; } -
자손 결합자 (Descendant Combinator): 특정 요소의 모든 자손을 선택합니다. 스페이스(
.ancestor .descendant { font-style: italic; }
자식 결합자는 직계 자식만 선택하는 반면, 자손 결합자는 직계 여부와 상관없이 모든 자손 요소를 선택합니다.
선택자 관련 팁
- 선택자는 최대한 단순하게 사용하는 것이 좋습니다. 복잡한 선택자는 유지보수와 성능 면에서 좋지 않습니다.
- 명확한 클래스 이름을 사용하세요. 의미 있는 클래스 이름은 코드의 가독성을 높입니다.
- 불필요한 중복을 피하세요. 여러 선택자에 동일한 스타일을 적용해야 할 때는 선택자 목록을 사용하여 중복을 줄이세요.
결론
CSS의 기본 개념과 다양한 선택자에 대해 알아보았습니다. CSS 선택자를 잘 활용하면 HTML 요소에 원하는 스타일을 효과적으로 적용할 수 있습니다. 다양한 선택자를 조합하여 더욱 정교한 스타일링을 할 수 있습니다. CSS의 선택자를 이해하고 활용하면, 더 아름답고 일관된 웹 페이지를 만들 수 있을 것입니다.
