CSS: 선택기와 속성

강 2: 선택자와 속성

이번 강의에서는 CSS의 구성 요소인 선택기와 속성에 대해 알아봅니다. 이는 웹페이지의 특정 요소를 타겟팅하고 효과적으로 스타일을 지정할 수 있는 필수 개념입니다.

---

CSS 선택자란 무엇입니까?

CSS 선택기는 스타일을 지정하려는 HTML 요소를 선택하는 데 사용되는 패턴입니다. 다양한 유형의 선택기를 사용하면 태그, 클래스, ID, 속성 등에 따라 다양한 요소에 스타일을 적용할 수 있습니다.

선택기의 종류

1. 요소(유형) 선택기:

   • 특정 유형의 모든 요소를 ​​타겟팅합니다.
   • 예:

    p {
      color: green;
    }
   

   이렇게 하면 모든 e388a4556c0f65e1904146cc1a846bee 요소를 녹색으로 바꿉니다.

2. 클래스 선택기:

   • 특정 클래스 속성을 가진 요소를 대상으로 합니다.
   • 예:

    .highlight {
      background-color: yellow;
    }
   

   HTML에서 class="highlight"가 있는 모든 요소는 노란색 배경을 갖습니다.
   

    <p class="highlight">This is highlighted text.</p>
   

3. ID 선택기:

   • 고유한 ID 속성을 가진 단일 요소를 타겟팅합니다.
   • 예:

    #header {
      font-size: 24px;
    }
   

   id="header"인 요소만 글꼴 크기가 24px입니다.
   

    <div id="header">Welcome to My Website</div>
   

4. 그룹 선택기:

   • 여러 선택기에 동일한 스타일을 적용합니다.
   • 예:

    h1, h2, h3 {
      color: blue;
    }
   

   이 규칙은 모든 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da 및 684271ed9684bde649abda8831d4d355 파란색 요소.

5. 하위 항목 선택기:

   • 다른 요소 내부(그 하위 요소)에 있는 요소를 타겟팅합니다.
   • 예:

    div p {
      font-style: italic;
    }
   

   이렇게 하면 모든 e388a4556c0f65e1904146cc1a846bee dc6dce4a544fdca2df29d5ac0ea9906b 내의 요소 이탤릭체로 표시됩니다.
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

CSS 속성 이해

CSS 속성은 스타일을 지정하려는 선택한 요소의 측면을 정의합니다. 각 속성 뒤에는 원하는 결과를 지정하는 값이 옵니다.

예시 속성:

• 색상:

  • 텍스트 색상을 설정합니다.
  • 예:

  h1 {
    color: red;
  }
  

• 배경색상:

  • 배경색을 설정합니다.
  • 예:

  body {
    background-color: #f0f0f0;
  }
  

• 글꼴 크기:

  • 텍스트의 크기를 설정합니다.
  • 예:

  p {
    font-size: 16px;
  }
  

• 여백:

  • 요소 외부의 공간을 설정합니다.
  • 예:

  .box {
    margin: 20px;
  }
  

• 패딩:

  • 요소 내부, 콘텐츠와 테두리 사이의 공간을 설정합니다.
  • 예:

  .content {
    padding: 10px;
  }
  

실제 예:

지금까지 배운 내용을 간단한 예와 결합해 보겠습니다.

HTML:

8ca2b4eb17525146e680c309e9dfa6a5
  4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a
  03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS:

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

이 예에서는:

• #container div는 검은색 테두리와 패딩으로 스타일이 지정되었습니다.
• 4a249f0d628e2318394fd9b75b4636b1 제목은 보라색입니다.
• 수업 소개 문단의 배경은 연한 파란색이고 글꼴 크기는 더 큽니다.
• 두 4a249f0d628e2318394fd9b75b4636b1 그리고 e388a4556c0f65e1904146cc1a846bee 요소는 Arial 글꼴을 사용합니다.
• #container 내부의 모든 문단에는 하단 여백이 있습니다.

연습

1. 제목, 단락, div가 포함된 간단한 HTML 파일을 만듭니다.
2. 다양한 선택기와 속성을 실험하여 콘텐츠 스타일을 지정해 보세요.
3. 하위 항목 선택기를 사용하여 중첩된 요소의 스타일을 지정해 보세요.
4. 그룹 선택기를 사용하여 여러 요소에 동일한 스타일을 적용하세요.

---

다음: 다음 강의에서는 CSS 박스 모델을 살펴보고 여백, 테두리, 패딩 및 콘텐츠가 어떻게 결합하여 레이아웃을 정의하는지 알아봅니다. 웹 요소. 거기서 만나요!

나를 따라오세요 -

LinkedIn- 리도이 하산

-

위 내용은 CSS: 선택기와 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!