이 글에서는 2023년에 주목해야 할 상위 15가지 CSS 트렌드에 대해 알아보세요. 이러한 트렌드는 CSS의 힘을 활용하여 시각적으로 놀라운 반응형 디자인을 만드는 데 도움이 됩니다.
CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 나타냅니다. 마크업 언어로 작성된 문서의 레이아웃과 서식을 기술하는 스타일 시트를 작성하기 위한 언어입니다. HTML과 함께 작동하여 온라인 페이지 및 사용자 인터페이스의 모양을 수정합니다. 일반 XML, SVG, XUL을 포함한 모든 XML 문서 유형을 사용할 수 있습니다.
CSS를 사용하면 HTML로 작성된 이전 문서를 변경하거나 CSS 코드를 사용하여 새로운 스타일을 만들 수 있습니다. CSS가 웹사이트에 제공하는 몇 가지 이점은 다음과 같습니다.
이제 CSS의 핵심과 그 이점을 알았으니 2023년 최고의 CSS 트렌드 목록부터 시작해 보겠습니다.
참고: 여기의 브라우저 호환성 데이터는 CanIUse에서 가져온 것입니다.
CSS Grid는 복잡하고 반응성이 뛰어난 그리드 레이아웃을 만들 수 있는 강력한 레이아웃 모듈입니다. 최신 브라우저에서 완벽하게 지원되며 웹 개발자들 사이에서 점점 인기를 얻고 있습니다. 이 놀라운 CSS 추세를 통해 행이나 열 작업이 쉬워졌습니다.
서브그리드는 그리드 레이아웃에 추가된 편리한 기능입니다. 상위 그리드의 레이아웃을 모방하는 하위 그리드 기능을 사용하여 하위 그리드를 만들 수 있습니다. 하위 그리드가 다른 그리드 표시 내에 중첩되면 해당 치수와 간격이 선택됩니다. 필요한 경우 하위 그리드가 특정 부분을 계속 덮을 수 있지만 상위 그리드의 레이아웃은 하위 그리드에 적용됩니다.
브라우저 지원: 95.91%
언어에 따라 CSS 쓰기 모드 속성은 텍스트 정렬을 위에서 아래로 또는 왼쪽에서 오른쪽으로 조정합니다. . 읽다. 예를 들어, 왼쪽에서 오른쪽으로, 위에서 아래로 읽는 텍스트를 추가한다고 가정해 보겠습니다.
중국어, 일본어, 한국어 등 텍스트가 세로로 배치되는 경우가 많은 언어에 유용합니다. 미적인 이유로 CSS 트렌드의 도움을 받아 이 기능을 영어로 사용하고 싶을 수도 있습니다.
브라우저 지원: 97.7%
웹 브라우저의 CSS 스크롤 캡처 동작을 제어하기 위해 CSS는 일련의 유용한 속성을 제공합니다. 이러한 기능 중 일부는 확장되었지만 최신 브라우저 버전에서는 이제 다른 기능에만 액세스할 수 있습니다. CSS 동향의 가장 좋은 점은 CSS 사용자의 3분의 1만이 이에 대해 알고 있다는 것입니다.
scroll-snap-type 속성을 사용하면 컨테이너의 스크롤 위치를 다양한 방법으로 수정할 수 있습니다. 개발자는 정확성을 높이고, 최종 사용자는 더욱 원활하고 제어 가능한 사용자 경험을 누릴 수 있습니다.
브라우저 지원: 95.89%
CSS는 컨테이너 쿼리를 위해 아직 완전히 구축되지 않았습니다. 이는 우리가 반응형 디자인에 대해 생각하는 방식에 중요한 영향을 미칠 것입니다. 기본 개념은 뷰포트 및 미디어 외에도 상위 컨테이너의 크기에 따라 중단점을 지정할 수도 있다는 것입니다.
사용자 인터페이스의 중첩 레이어에 나타나는 다양한 컨테이너의 크기에 따라 레이아웃을 조정하는 작업이 포함됩니다. CSS 컨테이너 쿼리는 CSS 트렌드가 아니지만 UI 개선의 물결을 촉발할 수 있는 주요 이니셔티브입니다.
브라우저 지원: 76.94%
CSS 실무자들은 웹 페이지를 아름답게 만들기 위해 RGB를 사용하기 시작했습니다. 최근 CSS는 HWB, LAB 및 LCH라는 세 가지 새로운 색상 팔레트를 도입했습니다.
HWB: Hue, Whiteness, Blackness의 약어입니다. 사람들이 쉽게 읽을 수 있는 기능은 다음과 같습니다. 색상을 선택한 다음 흰색과 검정색을 추가합니다. Chrome, Firefox 및 Safari의 최신 릴리스에서 지원됩니다.
브라우저 지원: 87.71%
LAB: CIA LAB 색상 이론을 기반으로 만들어졌으며 이론적으로 가장 복잡한 새로운 색상 공간으로 간주됩니다. LAB 색상 설명자는 인간이 인지할 수 있는 모든 색상을 포함하며 이는 대담한 표현입니다. 현재 LCH와 마찬가지로 Safari만이 CSS 트렌드와 호환됩니다.
LCH: 밝기(Lightness), 채도(Chroma) 및 색조(Hue)를 의미하며 사용 가능한 색상 팔레트를 넓히는 것으로 알려져 있습니다. Safari는 LCH만 지원합니다.
브라우저 지원: 15.38%
CSS 사용자 정의 속성이라고도 알려진 CSS 변수는 2015년부터 시장에서 인기 있는 CSS 트렌드였으며 현재 점점 더 많은 인기를 얻고 있습니다. CSS 사용자. CSS 변수를 사용하면 HTML 코드의 다른 위치에 값을 저장하고 사용할 수 있습니다. 이는 코드의 중복성을 제거하고 유연성을 향상시키며 코드 가독성을 높이는 데 도움이 됩니다.
브라우저 지원: 95.81%
뷰포트 단위 설정은 iOS에서 Safari용 웹사이트를 작성하려는 모든 사람에게 번거로운 일입니다. 모바일 브라우저는 원래보다 작은 단위 vh 크기로 설정된 컨테이너를 표시합니다.
이 오류를 해결하려면 자동 크기 조정 컨테이너 스크립트를 사용해야 합니다. 새 스크립트를 로드하는 불편함 외에도 일부 해결 방법은 Chrome 사용자에게 피해를 줍니다.
다행히 CSS는 이제 새로운 상대 길이 및 뷰포트 사양을 지원합니다. 그 중 일부는 "vw", "svw", "lvw" 및 "dvw"입니다. 이러한 측정값은 소형, 대형, 동적 뷰포트 크기의 너비와 UA의 기본 뷰포트 크기의 1%입니다.
브라우저 지원 등급: 97.53%
계단식의 다음 요소의 구체성이 더 높은 경우 CSS는 첫 번째 요소 스타일 변경을 재정의합니다. 이 문제는 거대한 코드 기반으로 인해 대규모 프로젝트에 항상 존재합니다. CSS 계단식 레이어가 유용한 곳입니다.
계단식 레이어는 개발자에게 테마, 프레임워크 및 디자인에 있어 더 나은 유연성을 제공하여 계단식 시스템을 최대한 활용할 수 있도록 합니다. 경험적 중심인 원래 캐스케이드와 비교하여 캐스케이드 계층은 기본 캐스케이드 논리를 직접 조작하고 관리합니다.
이 CSS 추세는 스타일 변형을 정의하기 위해 캐스케이드에 두 번째 레이어를 추가하여 구성 요소가 항상 기본 스타일을 따르지 않도록 보장합니다. 대신, 레이어에 작성된 규칙과 설정된 레이어 계층 구조를 기반으로 구성 요소가 생성됩니다.
브라우저 지원: 87.57%
CSS의 콘텐츠 가시성 속성은 페이지의 나머지 부분이 로드되는 동안 사용자가 콘텐츠와 상호 작용할 수 있도록 웹 페이지의 콘텐츠 렌더링 속도를 높이는 데 도움이 됩니다. 이 속성을 사용하면 개발자는 페이지의 어느 부분에 독립적인 콘텐츠가 있는지 브라우저에 지시할 수 있습니다. 그 대가로 브라우저가 게으른 계산을 통해 웹 콘텐츠를 최적화하는 데 도움이 됩니다.
콘텐츠 가시성은 CSS Containment Spec의 기본 요소에 따라 달라집니다. 지금까지는 Chromium 85만이 콘텐츠 가시성 속성을 지원하지만 모든 주요 브라우저는 CSS Containment Spec을 지원합니다.
브라우저 지원: 71.40%
Gap 속성은 공식적으로 그리드 간격으로 알려진 행과 열 사이의 간격을 정의하는 데 도움이 되는 새로운 CSS 트렌드입니다. 다음 속성을 대체하여 사용할 수 있습니다.
Gap 속성을 단일 값으로 활용하여 행과 열 사이의 동일한 간격을 나타냅니다. 행과 열 사이의 거리에 차이가 있는 경우 두 값을 갖는 간격 함수를 사용하여 먼저 행 사이의 거리를 정의한 다음 열 사이의 거리를 정의합니다. 행-갭 및 열-갭 속성을 활용하여 코드를 더욱 투명하고 이해하기 쉽게 만들 수 있습니다.
gap 속성 이전에 디자이너는 요소와 컨테이너 가장자리 사이에 들여쓰기를 추가하는 등 특정 제한 사항이 있는 여백 속성을 사용해야 합니다. 대조적으로, gap 속성을 사용하면 그러한 트릭이나 기믹을 사용하지 않고 언어의 기본 구조에만 의존하여 항목 사이의 들여쓰기를 지정할 수 있습니다.
브라우저 지원률: 93.29%
우리 목록의 또 다른 CSS 추세는 개체-보기-상자 속성입니다. 웹페이지에 이미지나 동영상의 지정된 영역만 표시되도록 합니다. 그 결과는 viewBox SVG 속성과 대략 동일합니다. object-view-box 속성은 다양한 요소나 다양한 해상도에 대한 이미지나 비디오의 일부만 표시할 때 유용합니다. 또한 사진과 동영상을 이동하고 확대/축소하는 데 사용할 수 있습니다.
object-view-box 속성이 등장하기 전에는 콘텐츠를 래핑 요소 안에 배치하고 "overflow: hide;"를 사용하여 크기를 조정하여 이미지나 비디오가 잘리는 문제를 해결해야 했습니다. 속성. 이는 코드에 위쪽, 아래쪽, 왼쪽 및 오른쪽 값을 추가하여 수행할 수 있습니다.
브라우저 지원: 66.99%
Inset 속성은 요소와 상위 요소 사이의 거리를 설정하는 데 도움이 됩니다. 이는 위쪽, 오른쪽, 왼쪽 및 아래쪽의 네 가지 속성을 대체하며 단일 명령으로 네 측면 모두에서 요소 삽입을 볼 수 있습니다. CSS Inset 속성에는 위치 지정을 위한 네 가지 명령을 모두 추가해야 합니다.
브라우저 지원: 90.29%
가변 글꼴을 사용하면 너비, 두께 또는 스타일별로 별도의 글꼴 파일을 사용하는 대신 다양한 글꼴 변형을 단일 파일에 통합할 수 있습니다. . OpenType 글꼴 사양이 발전한 것입니다.
가변 글꼴은 일반 글꼴처럼 사용할 수 있지만 더 많은 기능을 제공합니다. 글꼴 가중치 속성은 표준 글꼴의 경우 100에서 900 사이의 값을 허용하고, 가변 글꼴의 경우 1에서 999 사이의 정수를 허용합니다.
일반 글꼴의 글꼴 스타일 속성은 일반 글꼴과 기울임꼴의 두 가지 값을 허용하지만, 가변 글꼴의 경우 -90도에서 90도 사이에서 가변 글꼴의 기울기 각도를 지정할 수 있습니다. 가변 글꼴은 50%(좁은 글꼴의 경우)에서 200%(넓은 글꼴의 경우) 범위의 글꼴 확장을 제공하며 표준 배율은 100%입니다. 또 다른 속성은 글꼴 크기에 따라 글꼴의 모양을 변경하는 글꼴 광학 크기 조정 속성입니다.
브라우저 지원: 94.89%
CSS에서 text-overflow 속성은 특정 텍스트가 오버플로되어 이제 숨겨졌음을 나타내는 데 사용됩니다. 이 속성을 추가하면 오버플로 내용이 잘리고 사용자 정의 문자열이나 줄임표가 디스플레이에 표시됩니다.
text-overflow 속성을 사용할 때 기억해야 할 한 가지는 공백 속성은 nowrap이어야 하고 오버플로 속성은 Hidden으로 설정되어야 한다는 것입니다.
브라우저 지원: 98.95%
비교 기능을 사용하여 더 적은 코드로 반응형 웹사이트를 구축하세요. "clamp()", "min()", "max()" 등의 함수를 가지고 있는데 상한값과 하한값을 정의하고, 함수에 제공되는 입력값을 계산 및 비교한 후 계산된 값을 적용하는 데 사용됩니다. 자산 가치.
계산된 값이 최소값과 최대값 사이에 있으면 중앙값이 요소에 적용됩니다. 추정값이 최소값보다 작거나 최대값을 초과하는 경우 최소값 또는 최대값이 사용됩니다.
브라우저 지원률: 92.26%
CSS 라이브러리에 새로운 기능과 속성이 도입됨에 따라 웹 개발자는 웹 사이트 브라우저 호환성을 보장해야 하는 새로운 과제를 매일 마주하게 됩니다. 웹사이트에 사용하는 모든 CSS 속성이 제대로 작동하고 모든 브라우저에서 지원되는지 확인하는 것이 중요합니다.
다음은 2023년에 볼 수 있는 CSS 트렌드 중 일부에 불과합니다. 다른 추세가 나타날 수도 있지만 이를 따르는 것이 초보자에게 도움이 될 것입니다. 다중 열 레이아웃으로의 전환은 이미 본격화되고 있으며, 2023년 이후에는 반응형 인터페이스로의 전환이 빠르게 가속화될 것입니다.
여기서는 최고의 CSS 트렌드 중 최고만을 강조했습니다. 하지만 향후 10년이 지나면서 다른 트렌드도 등장하더라도 놀라지 마세요. 무슨 일이 일어나더라도 한 가지는 확실합니다. CSS는 결코 유행을 벗어나지 않을 것입니다. 디자이너는 자신의 견해를 바꿀 수 있지만 완전히 사라지지는 않습니다. 이는 좋은 일입니다!
위 내용은 최고의 CSS 트렌드 15가지가 귀하의 웹 프로젝트를 단 몇 초 만에 성공으로 이끌 것입니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
