css3은 CSS 캐스케이딩 스타일 시트 기술의 업그레이드 버전입니다. 이는 "캐스케이딩 스타일 시트 3단계"를 의미합니다. css3은 css2.1을 기반으로 개발자가 주로 상자 모델, 목록 모듈을 포함한 일부 실제 문제를 해결하는 데 도움이 되는 많은 기능을 추가합니다. , 하이퍼링크 모드, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 및 기타 모듈.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS3는 "Cascading Style Sheet Level 3"을 참조하는 CSS(Cascading Style Sheet) 기술의 업그레이드 버전으로 개발자가 일부 문제를 해결할 수 있도록 돕기 위해 CSS2.1을 기반으로 하는 많은 강력한 새 기능을 추가합니다. 의미 없는 태그, 복잡한 JavaScript 스크립트 및 이미지가 필요 없는 실질적인 문제를 해결합니다.
CSS3은 CSS(Cascading Style Sheets Level 3) 기술의 업그레이드 버전으로 1999년에 공식화되었습니다. 2001년 5월 23일 W3C는 이 초안에서 CSS3의 작업 초안을 완성했습니다. CSS3 개발 로드맵이 공식화되었으며 로드맵에는 모든 모듈이 자세히 나열되어 있으며 향후 점진적으로 표준화할 계획입니다.
CSS3은 CSS2.1을 기반으로 한 많은 강력한 새 기능을 추가하여 개발자가 실제적인 문제를 해결할 수 있도록 도와주며 더 이상 의미 없는 태그, 복잡한 JavaScript 스크립트 및 이미지가 필요하지 않습니다. 예를 들어 CSS3는 둥근 모서리, 여러 배경, 투명도, 그림자, 애니메이션, 차트 등을 지원합니다.
CSS3 사양은 모듈로 나뉩니다
CSS1과 CSS2.1은 모두 단일 사양입니다. CSS1은 주로 글꼴, 색상, 배경, 테두리 등과 같은 웹 페이지 개체의 기본 스타일을 정의합니다. CSS2는 플로팅과 같은 고급 개념을 추가합니다. , 위치 지정, 고급 선택기(예: 하위 선택기, 인접 선택기, 범용 선택기 등).
CSS 발전의 주요 변화는 CSS3를 일련의 모듈로 나누기로 한 W3C의 결정입니다. 브라우저 공급업체는 CSS의 속도에 맞춰 빠르게 혁신하므로 모듈식 접근 방식을 취하면 CSS3 사양의 요소가 서로 다른 속도로 발전할 수 있습니다. 왜냐하면 다양한 브라우저 공급업체는 특정 기능만 지원하기 때문입니다. 그러나 서로 다른 브라우저는 서로 다른 시기에 서로 다른 기능을 지원하므로 크로스 브라우저 개발도 복잡해집니다.
CSS3는 여러 모듈로 나누어져 있으며, 각 모듈에는 고유한 사양이 있습니다. 이것의 장점은 다음과 같습니다.
전체 CSS3 사양의 출시는 일부 부분의 분쟁으로 인해 다른 모듈의 발전에 영향을 미치지 않습니다.
브라우저의 경우 필요에 따라 어떤 CSS 기능이 지원되는지 결정할 수 있습니다.
W3C 개발자의 경우 필요에 따라 대상 업데이트를 수행하여 전체 사양을 보다 유연하게 만들고 적시에 개정할 수 있으므로 새로운 기술별 사양을 더 쉽게 확장할 수 있습니다.
CSS3 사양은 완전히 새로운 것은 아니지만 CSS2.1 콘텐츠의 일부를 통합했지만 이를 기반으로 많은 추가 및 수정이 이루어졌습니다.
CSS1 및 CSS2와 비교하여 CSS3는 로컬 기능의 수정 및 개선뿐만 아니라 CSS3의 많은 새로운 기능에 대한 브라우저 지원이 완벽하지는 않지만 여전히 사용자가 미래의 개발 방향을 볼 수 있도록 해줍니다. 그리고 웹페이지 스타일의 사명.
CSS3에는 많은 새로운 기능이 있습니다. 다음은 브라우저에서 널리 지원되는 실용적인 기능의 간략한 목록입니다.
CSS3 선택기는 CSS2.1을 기반으로 향상되었습니다. 이를 통해 디자이너는 중복 클래스, ID 또는 JavaScript 스크립트를 사용하지 않고도 태그에 특정 HTML 요소를 지정할 수 있습니다.
고급 선택기는 깔끔하고 가벼운 웹 태그를 디자인하고 더 나은 구조와 성능을 분리하려는 경우 매우 유용합니다. 태그에 많은 수의 클래스 및 ID 속성을 추가하는 횟수를 줄이고 디자이너가 스타일 시트를 더 쉽게 유지 관리할 수 있습니다.
웹 페이지에서 가장 일반적인 효과에는 둥근 모서리, 그림자, 그라데이션 배경, 반투명도, 그림 테두리 등이 포함됩니다. 이러한 시각적 효과는 디자이너가 이미지나 JavaScript 스크립트를 생성함으로써 CSS에서 달성됩니다.
CSS3의 일부 새로운 기능을 사용하여 특별한 시각 효과를 만들 수 있습니다. 다음 장에서는 이러한 새로운 기능이 이러한 시각 효과를 구현하는 방법을 보여줍니다.
CSS의 배경이 너무 많은 제한을 가져온다면 CSS3는 혁신적인 변화를 가져올 것입니다.
CSS3는 더 이상 배경 색상 및 배경 이미지 사용으로 제한되지 않습니다. 이 새로운 기능은 background-origin, background-clip 및 background-size와 같은 여러 가지 새로운 속성 값을 추가합니다. 또한 여러 속성을 설정할 수도 있습니다. 하나의 요소에 배경 이미지.
이렇게 하면 더 복잡한 페이지 효과를 디자인하려는 경우 더 이상 구현을 지원하기 위해 중복된 태그를 사용할 필요가 없습니다. 예를 들어 CSS에서 미닫이문 효과를 얻으려면 기본적으로 구현을 돕기 위해 2~3개의 추가 태그를 추가해야 하지만 CSS3의 이러한 새로운 기능은 하나의 태그에서 동일한 효과를 얻을 수 있습니다.
상자 모델은 CSS에서 최우선 순위입니다. CSS2의 상자 모델은 일부 기본 기능만 구현할 수 있으며 일부 특수 기능은 JavaScript를 기반으로 구현해야 합니다. CSS3에서는 이것이 크게 개선되었으며 디자이너는 CSS3를 통해 직접 이를 달성할 수 있습니다.
예를 들어 CSS3의 유연한 상자, 이 속성은 모든 사람에게 새로운 레이아웃 개념을 도입하여 다양한 레이아웃, 특히 모바일 단말기의 레이아웃을 쉽게 구현할 수 있으며 그 기능은 더욱 강력합니다.
CSS3을 사용하면 배경 속성을 사용하여 배경 이미지, 배경 반복, 배경 크기, 배경 위치, 배경 원본, 배경 클립 등과 같은 여러 속성 값을 설정할 수 있습니다. 하나의 요소에 여러 속성 값을 설정할 수 있습니다. 배경 이미지의 여러 레이어를 추가합니다. 둥근 모서리, 배경 겹침 등 복잡한 웹 페이지 효과를 디자인하려는 경우 웹 페이지 문서 구조를 최적화하기 위해 HTML 문서에 쓸모없는 태그를 여러 개 추가할 필요가 없습니다.
텍스트 그림자는 CSS에 이미 존재하지만 널리 사용되지는 않습니다. CSS3은 이 기능을 계속 유지하고 텍스트를 더욱 눈길을 끌게 만드는 새로운 크로스 브라우저 솔루션을 제공하는 새로운 정의를 제공합니다.
CSS2에서는 상자 그림자 구현이 약간 아쉽습니다. 이러한 효과를 얻으려면 새로운 태그와 이미지를 추가해야 하며 효과가 반드시 완벽하지는 않습니다. CSS3의 box-shadow는 이러한 상황을 깨고 모든 요소에 상자 그림자를 쉽게 추가할 수 있도록 해줍니다.
CSS3에는 다중 열 레이아웃을 보다 편리하게 생성할 수 있는 몇 가지 새로운 모듈이 도입되었습니다.
다중 열 레이아웃 모듈은 간단한 블록을 신문이나 잡지처럼 여러 열로 분할하는 방법을 설명합니다.
Flexible Box Layout 모듈을 사용하면 블록을 수평 및 수직으로 정렬할 수 있으며 블록을 화면 크기에 맞게 조정할 수 있습니다. CSS 부동 레이아웃, 인라인 블록 레이아웃 및 절대 위치 지정 레이아웃에 비해 더 편리하고 유연해 보입니다.
단점은 이 두 모듈이 아직 일부 브라우저에서 지원되지 않는다는 것입니다. 그러나 기술 발전에 따라 주류 브라우저에서는 이를 적극적으로 지원할 것입니다.
브라우저에는 웹 글꼴에 대한 많은 제한이 있으며 웹 글꼴 아이콘은 디자이너에게 더욱 고급스럽습니다. CSS3는 의심할 여지없이 디자이너에게 좋은 @font-face를 다시 도입합니다.
@font-face는 서버에 있는 글꼴을 연결하는 방법입니다. 이러한 내장 글꼴은 브라우저의 안전한 글꼴이 될 수 있습니다. 이러한 글꼴이 없으면 사용자가 제대로 표시할 수 없는 문제에 대해 더 이상 걱정할 필요가 없습니다. 특수 글꼴 대신에 디자인 시대.
CSS3 색상 모듈의 도입으로 페이지 효과를 만들 때 더 이상 RGB 및 16진수 모드로 제한되지 않습니다. CSS3에는 HSL, HSLA 및 RGBA와 같은 몇 가지 새로운 색상 모드가 추가되었습니다. 웹 디자인에서는 색상을 더 밝게 또는 더 어둡게 만드는 것이 쉽습니다. 그중 HSLA와 RGBA에는 투명도 채널도 추가되어 모든 요소의 투명도를 쉽게 변경할 수 있습니다.
또한 opacity 속성을 사용하여 요소를 투명하게 만들 수도 있습니다. 이제부터 투명도 생성은 더 이상 이미지나 JavaScript 스크립트에 의존하지 않습니다.
둥근 모서리는 CSS3에서 가장 많이 사용되는 속성이며 그 이유는 간단합니다. 둥근 모서리는 직선보다 더 아름답고 디자인과 충돌하지 않습니다. CSS로 둥근 모서리를 만드는 것과 다른 점은 CSS3에서는 태그 요소와 이미지를 추가할 필요가 없고 JavaScript 스크립트를 빌릴 필요도 없다는 점입니다. 단 하나의 속성만으로 가능합니다.
테두리의 경우 CSS는 테두리의 선 유형, 두께 및 색상 설정으로 제한됩니다. 특별한 테두리 효과가 필요한 경우 배경 이미지만 사용하여 모방할 수 있습니다. CSS3의 border-image 속성은 요소 테두리의 스타일을 강화하여 배경과 같은 효과, 비틀기, 늘이기, 타일 테두리 등을 얻을 수도 있습니다.
CSS2 시대에는 요소를 변형하는 것은 불가능한 아이디어였습니다. 이러한 효과를 얻으려면 많은 JavaScript 코드를 작성해야 했습니다. CSS3에는 회전, 왜곡, 크기 조정, 변위 등 2D 또는 3D 공간에서 웹 개체의 위치와 모양을 조작할 수 있는 변환 속성이 도입되었습니다.
CSS3 전환(전환) 기능은 웹 페이지 제작 시 몇 가지 간단한 애니메이션 효과를 구현하여 일부 효과를 더욱 능률적이고 부드럽게 만들 수 있습니다.
CSS3 애니메이션 기능을 사용하면 Flash나 JavaScript 스크립트 코드를 사용하지 않고도 더욱 복잡한 스타일 변경과 일부 대화형 효과를 얻을 수 있습니다.
CSS3 미디어 기능은 반응형(Responsive) 레이아웃을 구현할 수 있어 레이아웃은 사용자의 디스플레이 단말이나 기기 특성에 따라 해당 스타일 파일을 선택하여 다양한 디스플레이에 표시할 수 있습니다. 디스플레이 해상도 또는 장치는 특히 모바일 단말기에서 다양한 레이아웃 효과를 가지며 이는 이상적인 접근 방식입니다.
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3은 무슨 뜻인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
