css 기본 구조
CSS(Cascading Style Sheets)는 스타일 규칙(Style Rule) 으로 구성되며, 기본적인 문법 CSS 기본구조는 다음과 같습니다.
선택자 {
속성1: 값1;
속성2: 값2;
...
}CSS 기본구조 각 부분의 명칭과 역할
선택자(Selector)
- 스타일을 적용할 HTML 요소를 지정합니다.
- 예:
p,h1,.class-name,#id-name등
p { color: red; }
중괄호(Declaration Block)
{}중괄호 안에 스타일 속성과 값을 작성합니다.- 예:
{ color: red; font-size: 16px; }
선언(Declaration)
속성: 값;형태로 이루어진 스타일 지정 부분입니다.- 쉼표로 구분하여 여러 개의 선언을 사용할 수도 있습니다.
- 예:
color: red;,font-size: 16px;
속성(Property)
- 적용할 스타일의 항목을 지정합니다.
- 예:
color(글자 색상),font-size(글자 크기),background-color(배경색)등
값(Value)
- 속성에 적용할 구체적인 값을 지정합니다.
- 예:
red(빨간색),16px(글자 크기 16픽셀)
세미콜론(Semicolon, ;)
선언(Declaration) 끝에 붙이며, 여러 선언을 구분하는 역할을 합니다.
마지막 선언 뒤에도 세미콜론을 붙이는 것이 일반적인 관례입니다.
예제와 분석
h1 {
color: blue;
font-size: 24px;
text-align: center;
}선택자: h1 → 모든 <h1> 태그에 적용
선언 블록: { color: blue; font-size: 24px; text-align: center; }
선언:
color: blue;(글자 색상은 파란색)font-size: 24px;(글자 크기 24픽셀)text-align: center;(글자를 가운데 정렬)
속성: color, font-size, text-align
값: blue, 24px, center
세미콜론: 각 선언 뒤에 있음
CSS 기본구조는 선택자 → 중괄호 → 속성과 값의 선언 → 세미콜론 의 구조를 가집니다.
하나의 스타일 규칙만 보는 것이 아니라, CSS 전체적인 문법을 이해하는 것이 중요합니다.
