CSS3의 기본 구문 살펴보기
- PHPz원래의
- 2023-04-13 09:20:59603검색
CSS는 웹 디자인에 사용되는 스타일 시트 언어입니다. CSS3는 CSS의 업그레이드 버전으로, 더 많은 스타일과 특수 효과를 제공합니다. 이 글에서는 CSS3를 더 잘 적용할 수 있도록 작성하는 방법을 살펴보겠습니다.
1. 선택기
CSS3에는 다양한 HTML 요소를 선택하는 데 사용할 수 있는 새로운 선택기가 많이 있습니다.
- 속성 선택기
속성 선택기를 사용하면 속성에 따라 요소를 선택할 수 있습니다. 속성 값은 요소를 선택합니다. 예를 들어, 다음 CSS 규칙은 제목 속성 값이 "example"인 모든 요소를 선택합니다.
[title=example] {
color: red;
}
- 하위 문자열 일치 선택기
하위 문자열 일치 선택기를 사용하면 속성 값의 하위 문자열을 기반으로 요소를 선택할 수 있습니다. 다음은 *를 사용하여 요소를 일치시키는 예입니다.
a[href*="example"] {
color: red;
}
이는 href 속성 값에 "example" 문자열이 포함된 모든 앵커 요소를 선택합니다.
- 의사 요소 선택기
CSS3에는 다음과 같이 요소의 특정 부분에 스타일을 추가할 수 있는 몇 가지 새로운 의사 요소 선택기도 추가되었습니다.
p::first-letter {
font-size: 200%;
}
p::first-line {
color: red;
}
위 규칙은 단락의 첫 글자를 변경합니다. 텍스트 첫 줄의 글꼴 크기 및 색상입니다.
2. 새로운 기능
CSS3은 다음을 포함한 많은 새로운 기능도 제공합니다.
- 둥근 모서리
border-radius: 50%;
위 코드는 요소의 모서리를 둥글게 만듭니다.
- Gradient
그라디언트를 사용하여 요소에 부드러운 색상 전환을 추가하세요. 다음은 그라데이션 사용의 예입니다.
background: linear-gradient(to bottom right, red, yellow);
이렇게 하면 요소의 배경이 왼쪽 상단에서 오른쪽 하단으로, 빨간색에서 노란색으로 그라데이션됩니다.
- Box Shadow
CSS3은 요소에 그림자를 추가하는 데 사용할 수 있는 새로운 상자 그림자 속성도 제공합니다. 예:
box-shadow: 10px 10px 5px grey;
위 규칙은 요소의 오른쪽 하단에 그림자를 추가합니다.
- Transition
전환 효과는 요소의 변화를 더 부드럽게 만들 수 있습니다. 다음은 전환 사용의 예입니다.
transition: width 2s;
이렇게 하면 요소의 너비가 한 값에서 다른 값으로 변경되는 데 2초가 걸립니다.
- Animation
애니메이션은 요소를 더욱 흥미롭고 생생하게 만들 수 있습니다. 다음은 애니메이션 사용의 예입니다.
animation: example 5s infinite;
이렇게 하면 5초 동안 지속되고 영원히 반복되는 요소에 "example"이라는 애니메이션이 추가됩니다.
3. 브라우저 호환성
CSS3 기능은 브라우저마다 호환성이 다릅니다. 귀하의 웹사이트가 모든 브라우저에서 제대로 작동하도록 하려면 브라우저 지원을 구현하는 데 사용해야 하는 몇 가지 요령이 있습니다.
한 가지 해결책은 브라우저 접두사를 사용하여 CSS 속성 앞에 -vendor- 접두사를 추가하여 다양한 브라우저가 코드를 올바르게 구문 분석할 수 있도록 하는 것입니다. 예:
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
CSS 작성을 더욱 깔끔하게 만들고 믹스인 및 변수와 같은 기능을 제공하는 Sass 또는 Less와 같은 CSS 전처리기를 사용할 수도 있습니다.
간단히 말하면 CSS3는 웹 디자인을 더욱 생생하고 흥미롭게 만들 수 있는 많은 새로운 기능과 선택기를 제공합니다. 이러한 새로운 기능과 작성 방법을 이해하면 웹 페이지를 더욱 매력적으로 만들고 사용자에게 더 나은 경험을 제공할 수 있습니다.
위 내용은 CSS3의 기본 구문 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!