당신이 알아야 할 현대 CSS 스타일 4

TL;DR: 이 블로그에서는 코드 예제를 사용하여 웹 개발을 위한 최고의 CSS 스타일과 기능 5가지(컨테이너 쿼리, 하위 그리드, 의사 클래스, 논리 속성, 랩 색상 공간)를 살펴봅니다. 반응성을 향상시키고 레이아웃을 단순화하며 디자인 일관성을 향상시킵니다.

CSS(Cascading Style Sheets)는 웹페이지 스타일을 지정하는 데 사용되는 잘 알려진 스타일 언어입니다. CSS를 사용하면 공백을 추가하여 HTML 요소를 사용자 정의할 수 있습니다. 색상, 글꼴 크기 및 글꼴 스타일 정의 그리고 더. CSS는 개발자 경험을 개선하는 새로운 기능을 통해 지난 몇 년 동안 많이 개선되었습니다.

이 기사에서는 다음 프로젝트에 사용할 수 있는 5가지 혁신적인 CSS 기능에 대해 설명합니다.

1. 컨테이너 쿼리

CSS 컨테이너 쿼리는 응답성에 대한 새로운 접근 방식을 도입했습니다. 이전에는 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 조정되는 UI를 만들었습니다. 하지만 말만큼 쉽지는 않았습니다. 유지보수, 성능, 유연성, 스타일 중복 등의 문제가 있었습니다.

컨테이너 쿼리는 개발자가 상위 컨테이너 크기에 따라 요소를 맞춤설정할 수 있도록 하여 이러한 문제를 해결합니다. 이 방법은 뷰포트 크기에 의존하지 않으므로 HTML 구성 요소를 완전히 모듈식이며 독립적으로 만듭니다.

다음은 컨테이너 쿼리가 작동하는 방식에 대한 간단한 예입니다.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@container (min-width: 500px) {
  .profile-card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px;
  }

  .profile-card header,
  .profile-card .bio {
    grid-column: 2;
  }

  .profile-card .profile-image {
    grid-row: 1 / 3;
    grid-column: 1;
  }
}

이 컨테이너 쿼리는 프로필 카드의 너비가 500px 이상이면 레이아웃을 조정합니다. 카드가 스택형 레이아웃(이미지가 위에 위치)에서 이미지가 왼쪽에 나타나고 텍스트 내용이 오른쪽에 정렬되는 2열 레이아웃으로 변경됩니다.

다음 이미지를 참고하세요.

스택 레이아웃

2열 레이아웃

컨테이너 쿼리는 전체 뷰포트가 아닌 즉각적인 환경을 기반으로 구성요소를 조정해야 하는 디자인 시스템에 매우 유용합니다. 그러나 컨테이너 쿼리에는 여전히 완전한 브라우저 지원이 부족합니다. 사용자가 지원되지 않는 브라우저나 이전 버전을 사용하는 경우 스타일 문제가 발생할 수 있습니다.

출처: CSS 컨테이너 쿼리

참고: CSS 컨테이너 쿼리에 대한 작업 데모를 살펴보세요.

2. 서브그리드

Subgrid는 하위 그리드 항목에서 상위 그리드 컨테이너의 그리드 구조를 상속할 수 있는 CSS 그리드 레이아웃 모델에 대한 흥미로운 추가 기능입니다. 간단히 말해서 하위 그리드를 사용하면 상위 그리드의 행이나 열에 따라 하위 요소를 정렬할 수 있습니다. 이 방법을 사용하면 중첩 그리드 재정의를 사용하지 않고도 복잡한 중첩 그리드를 쉽게 생성할 수 있습니다.

다음 코드 예제에서 레이아웃은 목록 내의 하위 그리드 접근 방식을 사용합니다.

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  display: grid;
  grid-template-rows: subgrid; /* Allows the nested grid to align directly with the parent grid */
}

이 예에서 product-wrapper는 컨테이너 너비에 따라 열 수를 제어하는 ​​유연한 그리드 레이아웃을 생성합니다. 그런 다음 각 제품 카드는 제품 래퍼.

에서 정의한 그리드에 직접 행을 정렬합니다.

Subgrid는 제품 카드에 다양한 양의 콘텐츠가 포함될 수 있지만 균일한 모양을 유지해야 하는 전자상거래 사이트에 특히 유용합니다.

다음 이미지를 참고하세요.

상위 그리드

하위 그리드 CSS를 사용하여 생성된 하위 그리드

참고: CSS 서브그리드의 작업 데모를 확인하세요.

3. 의사 클래스

:hover, :focus 및 :first-child와 같은 유사 클래스는 HTML 요소가 아닌 상태를 기반으로 HTML 요소를 선택하는 옵션입니다. 문서의 계층 구조 또는 순서. 이러한 선택기를 사용하면 개발자는 JavaScript를 사용하지 않고도 보다 대화형이고 반응성이 뛰어난 UI를 만들 수 있습니다.

다음 코드 예제는 여러 의사 클래스의 실제 동작을 보여줍니다.

// HTML
...
.hover-section:hover {
  background-color: rgb(82, 11, 145); /* Changes the background color on hover */
  color: white;
}
.input-section input[type="text"]:focus {
  border-color: orange; /* Highlights the input field when focused */
  background-color: lightyellow;
}
.list-section li:first-child {
  color: green; /* Styles the first item in a list */
}
.list-section li:last-child {
  color: red; /* Styles the last item in a list */
}

이 CSS 코드 예제는 요소에 마우스를 올리거나 초점을 맞추는 등 사용자 작업에 따라 스타일을 변경하여 사용자 상호 작용을 향상시키는 방법과 컨테이너의 특정 하위 항목에 스타일을 지정하는 방법을 보여줍니다.

이러한 의사 클래스는 사용자 상호 작용을 안내하기 위해 시각적 신호가 필요한 양식, 탐색 메뉴 및 대화형 콘텐츠를 개발할 때 매우 유용합니다.

다음 이미지를 참고하세요.

CSS Pseudo-Class Demo

Note: Check out this working demo for pseudo-classes.

4. Logical properties

CSS logical properties allow developers to manage layout and spacing in a direction-agnostic way. In other words, with CSS logical properties, you can use different writing modes, such as left-to-right (LTR) and right-to-left (RTL), without changing the structural code.

Here’s an example that uses logical properties for layout adjustments.

.lab-gradient-generator {
  margin-inline-start: 2rem; /* Responsive margin that adjusts based on text direction */
}
.lab-gradient-display {
  background: linear-gradient(
    to right, 
    lab(var(--l-start) var(--a-start) var(--b-start)), 
    lab(var(--l-end) var(--a-end) var(--b-end))
  ); /* Creates a gradient using LAB colors */
}

In this code example, margin-inline-start uses logical properties to ensure margins are always on the content starting side, adapting automatically to different writing systems. The background property with a LAB color gradient illustrates the use of logical properties in defining visually consistent color transitions.

Logical properties are particularly useful in global apps that require support for multiple languages, keeping the layouts the same regardless of directionality.

Refer to the following image.

Logical properties demo

Note: Refer to the working demo of how CSS logical properties can be used with internationalization.

5. Lab Color Space

Lab color space allows you to specify colors to align more closely with human vision. This method provides a broader and more precise range of colors, facilitating greater consistency across different displays.

Here’s a code example showcasing the usage of lab color space in CSS.

.color-strip:nth-child(1) {
  --l: 90%;
  --a: -80;
  --b: 80;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(2) {
  --l: 75%;
  --a: -40;
  --b: 40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(3) {
  --l: 60%;
  --a: 0;
  --b: 0;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(4) {
  --l: 45%;
  --a: 40;
  --b: -40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(5) {
  --l: 30%;
  --a: 80;
  --b: -80;
  background-color: lab(var(--l) var(--a) var(--b));
}

This code example sets up a series of divs (color-strip), each with a unique background color defined in the lab color space. It shows how lab colors produce a variety of hues and shades that are consistent across various displays.

Lab colors are invaluable in digital design, particularly in industries where color accuracy is critical, like digital art, online commerce, and brand design.

Refer to the following image.

Exploring LAB Colors

Note: For more details, refer to the lab color space demo.

Conclusion

Thanks for reading! These CSS features offer unique advantages and new possibilities to improve the functionality and the user experience of your app. They also improve the developer experience, since these features simplify complex tasks for them.

So, make sure to try these examples yourself and implement them in your next web app to make it a modern one.

Related blogs

• React Styling: Essential Tips and Tricks for Designers
• Top 7 Ways to Write CSS in Your React or Next.js App
• Responsive Web Design Evolved: Introducing CSS Container Queries
• CSS Flex: What Every Developer Should Know

위 내용은 당신이 알아야 할 현대 CSS 스타일 4의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!