CSS 문법

소요 시간: 3분 조회수: 30

CSS 문법을 조금 더 체계적으로 알아두면 좋겠다는 생각이 들었다. 그래서 하나하나 다시 정리해 보기로 했다.


CSS의 기본 구조: 선택자와 선언 블록

CSS 규칙은 생각보다 단순한 구조로 이루어져 있었다. 그 기본 구조는 다음과 같다.

선택자 {
    속성: 값;
    속성: 값;
    ...
}

알고 보니 이 구조는 크게 선택자(Selector)와 선언 블록(Declaration Block) 두 부분으로 나눠진다. 선택자는 HTML 요소를 선택하는 것이고, 선언 블록은 그 요소에 어떤 스타일을 적용할지를 지정하는 부분이다. 마치 일종의 지침서 같은 느낌이랄까.


선택자 (Selector): 스타일을 적용할 대상 찾기

선택자는 스타일을 적용할 HTML 요소를 찾는 데 필요한 부분이다. 다양한 방식으로 특정 요소를 선택할 수 있다.

이 선택자들 덕분에 HTML 문서 내에서 특정 요소를 가리켜 원하는 스타일을 입힐 수 있다.


선택자 (Selector): 스타일을 적용할 대상 찾기

선택자는 스타일을 적용할 HTML 요소를 찾는 데 필요한 부분이다. 다양한 방식으로 특정 요소를 선택할 수 있다.

이 선택자들 덕분에 HTML 문서 내에서 특정 요소를 가리켜 원하는 스타일을 입힐 수 있다.


선언 (Declaration): 스타일의 세부사항

선언 부분은 중괄호 { } 안에 들어가며, HTML 요소에 적용할 구체적인 스타일을 지정한다. 선언은 각각 속성(Property)과 값(Value)으로 구성되며, 속성과 값은 속성: 값; 형태로 작성된다.

예를 들어:

여러 개의 선언이 있을 경우, 각 선언의 끝에는 세미콜론(`;`)을 추가해 구분하는 것도 중요한 부분이다.


선언 블록 (Declaration Block): 속성과 값의 집합

선택자 다음에 `{ }`로 묶인 부분을 선언 블록이라고 부른다. 이 블록 안에는 스타일을 적용하기 위한 여러 속성과 값들이 모여 있다. 예를 들어, `h1` 태그에 적용할 스타일을 지정한다고 했을 때, 이 태그의 텍스트 색상, 크기, 여백을 함께 지정할 수 있다. 각 속성마다 값이 설정되므로, 스타일을 세세하게 조절할 수 있는 것이다.


예시: 실제 CSS 규칙 작성

h1 {
    color: blue;
    font-size: 24px;
    margin: 10px 5px;
}

이 코드는 <h1> 요소에 대해 세 가지 스타일을 지정하고 있다.

이렇게 각각의 요소에 맞춰 여러 스타일을 설정할 수 있다는 점이 CSS의 매력이라는 생각이 들었다.


CSS는 단순한 문법 구조를 가지고 있지만, 알고 보니 매우 강력한 도구다. 선택자를 통해 HTML 문서 내 특정 요소를 골라내고, 선언 블록에서 세세한 스타일을 지정하는 방식이 인상적이다. 이렇게 CSS 기본 구조를 제대로 이해하니 앞으로 더 복잡한 디자인도 자신 있게 도전할 수 있을 것 같다.

인기글

CSS 리스트