반응형
CSS 규칙은 선택기와 선언 블록으로 구성된다.
| 선택기(selector) | 선언블록(declaration) |
| h1 | { color : blue; -> 속성 : 값 font-size:12px; } |
선택기는 스타일을 지정할 HTML 요소를 가리킨다.
선언 블록에 세미콜론으로 구분된 하나 이상의 선언이 포함되어 있다.
각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함된다.
여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 곱슬곱슬한 중괄호로 둘러싸여 있다.
CSS 예제입니다.
| <!DOCTYPE html> <html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>이 단락들은 CSS로 작성되었습니다.</p> </body> </html> |
위의 css 코드를 실행한 결과는 아래 그림이다.
p는 CSS에서 선택기이다(스타일링할 HTML 요소를 가리킵니다: <p>).
색상은 속성이고, 빨간색은 속성 값이다
text-align은 속성이고 center는 속성 값이다
지금까지 CSS에 구문에 대해 살펴보았다.
선택기와 속성과 값의 쌍으로 스타일을 적용함을 잊지 마시고 꼭 실습해보세요
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS 색상(CSS Colors) (0) | 2023.07.02 |
|---|---|
| CSS 주석(CSS Comments) (0) | 2023.07.01 |
| CSS 추가하는 방법 (0) | 2023.06.30 |
| CSS 선택기(selector) (0) | 2023.06.29 |
| CSS 개요 (0) | 2023.06.26 |
댓글