CSS 문법은 웹 페이지의 스타일을 정의할 때 사용하는 규칙을 의미합니다. 기본적으로 CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다. 선언은 다시 속성(property)과 값(value)으로 나뉘며, 이러한 구조가 CSS 스타일을 정의하는 기본 문법입니다. 이를 바탕으로 각 요소에 특정 스타일을 적용할 수 있습니다.
1. 선택자(Selector)
선택자는 스타일을 적용할 HTML 요소를 지정하는 부분입니다. 예를 들어, <p> 태그에 스타일을 적용하고 싶다면 p라는 선택자를 사용합니다. 선택자의 종류로는 태그 선택자, 클래스 선택자, ID 선택자 등이 있습니다.
예시
p {
color: blue;
}위 예시는 모든 <p> 요소의 글자 색을 파란색으로 설정하는 선택자입니다.
2. 속성(Property)과 값(Value)
CSS 선언 블록은 속성과 값으로 이루어집니다. 속성은 어떤 스타일을 적용할지 결정하고, 값은 그 속성에 대한 구체적인 값을 설정합니다. 속성과 값은 쌍으로 이루어지며, 속성 뒤에는 콜론(:)을, 값 뒤에는 세미콜론(;)을 사용하여 구분합니다.
예시
p {
color: blue;
font-size: 16px;
}위 코드는 <p> 요소에 글자 색을 파란색으로, 글자 크기를 16px로 설정합니다.
3. 선언 블록(Declaration Block)
선택자 다음에는 중괄호({})를 사용하여 선언 블록을 작성합니다. 선언 블록 내부에는 적용할 스타일 속성과 그에 대한 값을 지정합니다. 여러 개의 선언을 사용하여 한 번에 다양한 스타일을 적용할 수 있습니다.
예시
h1 {
color: red;
font-weight: bold;
text-align: center;
}위 코드에서 <h1> 요소에 빨간색 글자, 굵은 글자, 중앙 정렬 스타일이 한꺼번에 적용됩니다.
4. CSS 주석(Comment)
주석은 코드에서 설명을 추가하거나 특정 코드의 실행을 막고자 할 때 사용됩니다. CSS 주석은 /*와 */로 감싸서 작성하며, 주석 내부의 내용은 브라우저에서 무시됩니다.
예시
/* 여기는 주석입니다. */
h1 {
color: green; /* h1 요소의 글자 색을 초록색으로 변경 */
}5. CSS의 우선순위
CSS에서는 스타일이 충돌할 때 어떤 스타일이 적용될지를 결정하는 우선순위 규칙이 있습니다. 기본적으로 인라인 스타일이 가장 높은 우선순위를 가지며, ID 선택자, 클래스 선택자, 태그 선택자 순으로 우선순위가 정해집니다. 또한, 중복된 선택자가 있을 때 나중에 정의된 스타일이 적용됩니다.
예시
<p id="text" class="blue">Hello World</p>
<style>
#text {
color: red;
}
.blue {
color: blue;
}
</style>위 코드에서 #text와 .blue가 충돌할 경우, ID 선택자가 더 높은 우선순위를 가지기 때문에 글자 색은 빨간색으로 적용됩니다.
6. 중요한 속성 (!important)
기본 우선순위를 무시하고 특정 스타일을 강제로 적용하고 싶을 때 !important 키워드를 사용할 수 있습니다. 하지만 너무 자주 사용하면 유지보수에 어려움이 생길 수 있으니 주의해서 사용해야 합니다.
예시
p {
color: blue !important;
}위 코드에서 p 요소에 파란색 스타일이 반드시 적용되도록 설정합니다.
예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 문법 예시</title>
<style>
/* 모든 p 태그의 글자 색을 파란색으로 지정 */
p {
color: blue;
font-size: 16px;
}
/* h1 태그의 글자를 빨간색으로 설정하고 중앙 정렬 */
h1 {
color: red;
text-align: center;
}
/* 클래스 blue를 가진 요소의 색상 설정 */
.blue {
color: blue;
}
/* ID 선택자에 우선순위가 있음 */
#important-text {
color: red;
}
</style>
</head>
<body>
<h1>CSS 문법과 규칙</h1>
<p class="blue">이 문장은 파란색입니다.</p>
<p id="important-text">이 문장은 빨간색입니다.</p>
</body>
</html>참고 사이트
'HTML&CSS' 카테고리의 다른 글
| [CSS] 6. 박스 모델 (Margin, Padding, Border, Content) (2) | 2024.09.16 |
|---|---|
| [CSS] 5. 우선순위와 상속 (0) | 2024.09.15 |
| [CSS] 4. 속성(Property)과 값(Value) (0) | 2024.09.14 |
| [CSS] 3. 선택자(selector) (0) | 2024.09.13 |
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |
| #6 HTML 태그 (0) | 2024.08.25 |
| #5 HTML 시맨틱 태그 (0) | 2024.08.25 |
| #4 HTML5의 새로운 기능 (1) | 2024.08.25 |