CSS 구문
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 2번째.
CSS에서 구문은 CSS 코드가 작성되어야 하는 방식을 정의하는 규칙 집합을 의미합니다. CSS 구문을 이해하는 것은 구조가 잘 잡히고 기능적인 스타일시트를 만드는 데 필수적입니다. 기본적인 CSS 규칙은 선택자와 선언 블록으로 구성됩니다.
간단한 설명은 다음과 같습니다:
- 선택자(Selector): 스타일을 지정하려는 HTML 요소를 지정합니다 (예: p, div, img).
- 선언 블록(Declaration Block): 중괄호
{}로 둘러싸인 하나 이상의 선언을 포함합니다.
- 선언: 속성(property)과 값(value)으로 구성되며, 콜론
:으로 구분됩니다(예: color:green;). 각 선언은 세미콜론(;)으로 끝나야 합니다.
- 속성: 변경하려는 스타일 속성입니다 (예: color, font-size).
- 값: 속성에 설정하려는 값입니다 (예: blue, 16px).
예를 들어:
p {
color: blue;
font-size: 16px;
}이 예제에서 p는 모든 단락 요소를 대상으로 하는 선택자입니다. 선언 블록은 두 개의 선언을 포함하고 있습니다. 하나는 텍스트 색상을 blue로 설정하고, 다른 하나는 글꼴 크기를 16픽셀로 설정합니다.
챌린지
쉬움단락 요소와 해당 단락에 대한 CSS 규칙이 포함된 HTML 코드가 제공됩니다. 텍스트 색상을 red로 변경하도록 CSS 규칙을 수정하세요.
치트 시트
CSS 구문은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다:
- 선택자(Selector): 스타일을 지정할 HTML 요소를 지정합니다 (예: p, div, img)
- 선언 블록(Declaration Block): 중괄호
{}로 둘러싸인 선언들을 포함합니다 - 선언(Declaration): 콜론
:으로 구분되고 세미콜론;으로 끝나는 속성과 값의 쌍입니다 - 속성(Property): 변경할 스타일 속성입니다 (예: color, font-size)
- 값(Value): 속성에 적용할 값입니다 (예: blue, 16px)
p {
color: blue;
font-size: 16px;
}직접 해보기
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
