CSS를 사용하는 방법-프런트엔드 Q&A-php.cn

CSS(Cascading Style Sheets)는 웹 페이지 스타일을 정의하는 데 사용되는 언어로 HTML과 함께 웹 페이지를 구성하는 데 사용됩니다. CSS는 HTML 요소의 모양과 위치를 제어하여 웹 페이지를 아름답게 만들고 사용자 경험을 향상시킵니다.

이 글에서는 CSS의 기본과 CSS를 사용하여 HTML 요소의 스타일을 변경하는 방법을 소개합니다.

CSS 기본

CSS는 선택기와 선언으로 구성됩니다. 선택기는 스타일을 적용할 HTML 요소를 선택하는 데 사용되며 선언은 선택한 요소에 적용할 스타일을 지정합니다.

다음은 몇 가지 일반적인 선택기입니다.

Element Selector: HTML 요소 이름을 지정하여 요소를 선택합니다. 예:
```
p {
color: red;
}
```
로그인 후 복사
이렇게 하면 문서의 모든
요소가 선택됩니다. 색상을 빨간색으로 설정하세요.
클래스 선택기: 클래스 이름을 지정하여 요소를 선택합니다. 예:
```
.my-class {
background-color: yellow;
}
```
로그인 후 복사
이렇게 하면 class="my-class"인 모든 요소가 선택되고 배경색이 노란색으로 설정됩니다.
ID Selector: ID를 지정하여 단일 요소를 선택합니다. 예:
```
#my-id {
font-size: 20px;
}
```
로그인 후 복사
이렇게 하면 id="my-id"인 요소가 선택되고 글꼴 크기가 20픽셀로 설정됩니다.
속성 선택기: 속성을 지정하여 요소를 선택합니다. 예:
```
a[href="https://www.google.com"] {
color: blue;
}
```
로그인 후 복사
이렇게 하면 Google 사이트를 가리키는 모든 요소가 선택되어 색상이 파란색으로 설정됩니다.
의사 클래스 및 의사 요소 : 상태나 위치를 지정하여 요소를 선택합니다. 예:
```
a:hover {
text-decoration: underline;
}
```
로그인 후 복사
이렇게 하면 모든 요소가 선택되고 마우스를 올리면 해당 텍스트에 밑줄이 그어집니다.

p {
  color: red;
}