CSS의 기본 구성 요소

이전 글에서는 CSS가 무엇인지에 대해 알아보았습니다. 이번 글에서는 CSS의 기본 구성 요소인 선택자, 속성, 값에 대해 자세히 알아보겠습니다.

• 선택자(Selector): 선택자는 스타일을 적용할 HTML 요소를 지정합니다.
  • 태그 선택자: 특정 HTML 태그를 선택합니다.

    p {
      color: blue;
    }
    

  • 클래스 선택자: 클래스 속성을 가진 요소를 선택합니다. 클래스 이름 앞에 점(.)을 붙입니다.

    .my-class {
      font-size: 16px;
    }
    

  • 아이디 선택자: 아이디 속성을 가진 요소를 선택합니다. 아이디 이름 앞에 샵(#)을 붙입니다.

    #my-id {
      background-color: yellow;
    }
    

• **속성(Property)**와 값(Value): 속성은 스타일의 종류를, 값은 그 스타일의 구체적인 값을 나타냅니다.
  • 속성 예시:
    • color: 텍스트 색상을 지정합니다.
    • background-color: 배경 색상을 지정합니다.
    • font-size: 글꼴 크기를 지정합니다.
  • 값 예시:
    • color: red;
    • background-color: #00ff00;
    • font-size: 20px;

 

CSS의 기본 구성 요소인 선택자, 속성, 값에 대해 이해하면 스타일을 더 효과적으로 적용할 수 있습니다. 다음 글에서는 CSS의 상속과 우선순위에 대해 알아보겠습니다.