CSS 정의와 구성 요소 (selector, property, value)

CSS란?

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의할 때 사용하는 언어입니다. 쉽게 말하면, CSS는 HTML 문서의 외형을 꾸미기 위해 사용합니다.

 

CSS는 웹 문서의 색상, 글꼴, 레이아웃 등을 설정하여 페이지가 시각적으로 어떻게 보이는지를 제어합니다. HTML은 구조를 정의하고, CSS는 그 구조를 시각적으로 표현하는 데 사용됩니다.

 

CSS 구성요소

CSS는 3가지 구성 요소로 이루어져있습니다.

• 선택자(Selector)
• 속성(Property)
• 값(Value)

아래에서는 해당 3가지 구성 요소에 대해 설명합니다.

 

선택자(Selector)

선택자는 스타일을 적용할 HTML 요소(Element)를 지정하는 역할을 합니다. 선택자는 Element Selector, Class Selector, ID Selector이 있습니다.

 

Element Selector

• HTML Element의 이름을 사용하여 스타일을 적용합니다.
• 예를들어, <p> 태그에 스타일을 적용한다고 하면 다음과 같이 할 수 있습니다

p {
  color: red; /* p 태그의 폰트 색상을 빨간색으로 스타일을 지정 */
}

 

Class Selector

• 특정 클래스에 해당하는 모든 요소의 스타일을 지정할 수 있습니다.
• 예를들어, text-lg라는 class를 가지는 요소에 font-size를 36px로 지정한다고 하면, 다음과 같이 할 수 있습니다.

.text-lg {
  font-size: 36px;
}

 

ID Selector

• 특정 ID를 가진 하나의 요소에만 스타일을 지정할 수 있습니다.
• Class Selector와 비슷해 보일 수 있지만, ID Selector는 하나의 요소에만 스타일을 지정할 수 있고, Class Selector는 여러개의 요소에 스타일을 지정할 수 있습니다.

#header {
  background-color: yellow;
}

 

속성(Property)

속성은 HTML 요소의 스타일 특성을 정의하는 부분입니다. 여기서 스타일의 특성은 색상(color), 글꼴 크기(font-size), 테두리(border) 등을 말합니다.

 

조금 더 예시를 들어보면,

• color: 글자 색상 지정
• background-color: 배경 색상 지정
• font-size: 글자 크기 지정
• margin: 요소 바깥 여백을 지정
• padding: 요소 내부 여백을 지정
• border: 요소의 테두리를 지정

 

값(Value)

값(Value)은 속성(Property)의 스타일 값을 말합니다. 예시를 들면,

div {
  color: blue;     /* 글자 색상을 파란색으로 설정하기 위해 blue 값을 지정 */
  font-size: 16px; /* 폰트 크기를 16px 값으로 지정 */
  margin: 10px;    /* 바깥 여백의 크기를 10px 값으로 지정 */
}

 

위 예시의 주석과 같이 color 속성에는 blue 값을, font-size 속성에는 16px 값을, margin 속성에는 10px 값을 할당하여 스타일을 지정했습니다.

 

selector / property / value

 

다른 글

HTML 시맨틱 태그를 사용하여 웹 페이지의 구조를 명확하게