CSS 규칙과 선택자 사용법
CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용됩니다. 이번 글에서는 CSS의 기본 규칙과 선택자 사용법에 대해 알아보겠습니다.
1. 관심사의 분리 (Separation of Concerns)
CSS의 핵심 개념 중 하나는 내용과 스타일을 분리하는 것입니다. 이는 코드의 유지보수성과 재사용성을 높이는 데 매우 중요합니다. HTML은 문서의 구조와 내용을 담당하고, CSS는 문서의 스타일과 레이아웃을 담당합니다.
2. CSS 규칙
CSS 규칙은 선택자와 선언 블록으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은 중괄호 {} 안에 스타일 속성과 속성값을 포함합니다.
예제:
h3 {
color: #666666;
}h3는 선택자로, HTML 문서의<h3>요소를 선택합니다.color: #666666;은 선언으로, 선택한 요소의 텍스트 색상을 회색으로 설정합니다.
3. ID 속성
ID는 문서 내에서 유일해야 하는 요소에 사용됩니다. ID는 # 기호를 사용하여 선택합니다.
예제:
HTML:
<div id="header">헤더 영역</div>CSS:
#header {
background-color: #f1f1f1;
}4. Class 속성
클래스는 여러 요소에 공통된 스타일을 적용할 때 사용됩니다. 클래스는 . 기호를 사용하여 선택합니다. 하나의 요소에 여러 개의 클래스를 지정할 수 있습니다.
예제:
HTML:
<div class="box primary">첫 번째 박스</div>
<div class="box secondary">두 번째 박스</div>CSS:
.box {
padding: 20px;
border: 1px solid #ddd;
}
.primary {
background-color: #f1f1f1;
}
.secondary {
background-color: #e1e1e1;
}5. letter-spacing
letter-spacing 속성은 텍스트의 글자 간격을 조절하는 데 사용됩니다.
예제:
p {
letter-spacing: 2px;
}이 설정은 모든 <p> 요소의 텍스트에 2픽셀의 간격을 추가합니다.
결론
CSS의 기본 규칙과 선택자 사용법을 이해하는 것은 웹 페이지의 스타일과 레이아웃을 효과적으로 관리하는 데 매우 중요합니다. 선택자와 선언 블록을 사용하여 HTML 요소에 스타일을 적용하고, ID와 클래스 속성을 활용하여 다양한 스타일을 지정할 수 있습니다. 이러한 기초 개념을 잘 이해하고 활용하면, 더 복잡하고 세련된 웹 페이지를 만들 수 있습니다.
