CSS( Cascading Style Sheets)는 HTML 및 XML 문서의 표현을 정의하기 위한 스타일 시트 언어입니다. 이 문서에서는 CSS에서 사용되는 선택자와 속성에 대해 알아보겠습니다.

선택자(Selectors)

CSS 선택자는 HTML 요소를 스타일링하기 위해 사용됩니다. 선택자는 다양한 방식으로 사용되며, 요소의 유형, 클래스, ID 등을 기반으로 선택할 수 있습니다.

요소 선택자 (Element Selector)

가장 기본적인 선택자로, 특정 HTML 요소를 선택하여 스타일을 지정합니다. 예를 들어, 모든 <p> 요소에 대한 스타일을 지정하려면 다음과 같이 작성합니다.

p {
  color: blue;
}

클래스 선택자 (Class Selector)

클래스 선택자는 특정 클래스를 가진 요소를 선택하여 스타일을 지정합니다.

.button {
  background-color: #008CBA;
}

ID 선택자 (ID Selector)

ID 선택자는 특정 ID를 가진 요소를 선택하여 스타일을 지정합니다.

#header {
  font-size: 24px;
}

자식 선택자 (Child Selector)

자식 선택자는 특정 요소의 자식 요소를 선택하여 스타일을 지정합니다.

ul > li {
  list-style-type: square;
}

속성(Properties)

CSS 속성은 선택한 요소에 적용할 스타일을 지정합니다.

color

color 속성은 텍스트의 색상을 지정합니다.

p {
  color: red;
}

font-size

font-size 속성은 텍스트의 크기를 지정합니다.

h1 {
  font-size: 36px;
}

background-color

background-color 속성은 요소의 배경색을 지정합니다.

body {
  background-color: #f2f2f2;
}

이제 선택자와 속성을 활용하여 웹 페이지의 스타일을 정의할 수 있는 기초적인 내용을 알아보았습니다.

다양한 선택자와 속성을 활용하여 더 다양하고 풍부한 스타일을 구현할 수 있으며, 반응형 및 모바일 친화적인 디자인을 위해 미디어 쿼리 등의 다양한 기술도 함께 적용될 수 있습니다.