CSS: 선택기와 속성-CSS 튜토리얼-php.cn

CSS: 선택기와 속성

王林

풀어 주다： 2024-08-22 06:30:32

원래의

834명이 탐색했습니다.

CSS: selectors and properties

강 2: 선택자와 속성

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

CSS 선택자란 무엇입니까?

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

선택기의 종류

요소(유형) 선택기:
- 특정 유형의 모든 요소를 타겟팅합니다.
- 예:
```
 p {
   color: green;
 }
```
로그인 후 복사
이렇게 하면 모든
요소를 녹색으로 바꿉니다.
클래스 선택기:
- 특정 클래스 속성을 가진 요소를 대상으로 합니다.
- 예:
```
 .highlight {
   background-color: yellow;
 }
```
로그인 후 복사
HTML에서 class="highlight"가 있는 모든 요소는 노란색 배경을 갖습니다.
```
 <p class="highlight">This is highlighted text.</p>
```
로그인 후 복사
ID 선택기:
- 고유한 ID 속성을 가진 단일 요소를 타겟팅합니다.
- 예:
```
 #header {
   font-size: 24px;
 }
```
로그인 후 복사
id="header"인 요소만 글꼴 크기가 24px입니다.
```
 <div id="header">Welcome to My Website</div>
```
로그인 후 복사
그룹 선택기:
- 여러 선택기에 동일한 스타일을 적용합니다.
- 예:
```
 h1, h2, h3 {
   color: blue;
 }
```
로그인 후 복사
이 규칙은 모든
,
및
파란색 요소.
하위 항목 선택기:
- 다른 요소 내부(그 하위 요소)에 있는 요소를 타겟팅합니다.
- 예:
```
 div p {
   font-style: italic;
 }
```
로그인 후 복사
이렇게 하면 모든
내의 요소 이탤릭체로 표시됩니다.
```
 <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:

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>

로그인 후 복사

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;
}

로그인 후 복사

이 예에서는: