웹사이트의 모양과 느낌을 통제하는 언어는 항상 강력하지만 약간 어려운 언어였습니다.프로그래머들은 수년간 모든 복제, 디자인을 적응하기위한 욕구, 스타일 충돌을 피하기위한 모든 욕구와 싸웠습니다.세 가지 새로운 기능은 이제 CSS를 더 깨끗하고, 더 얇고, 더 현대적인 도구로 혁신시킵니다 : Nesting, Container Queries, and Scoped Styles. CSS 이것들은 사소한 변화가 아닙니다; 그들은 우리가 스타일링하는 방식을 혁명화하고 CSS는 더 직관적이고 모듈화되어 있으며 예측할 수 있습니다. 과거에 CSS는 개발자가 요소를 스타일링 할 때 자신을 반복하게 만들었습니다. Nesting은 스타일이 자연적인 콘텐츠 구조를 따르도록 허용함으로써 이것을 해결합니다. 이것은 CSS가 만든 HTML 구조와 더 비슷해 보이기 때문에 스타일을 읽고 따라가는 것이 더 쉬워집니다.For groups, it means fewer errors and a clearer connection between the design and the code that supports it. Container Queries 원하는 컨테이너 웹 개발자는 수년간 브라우저 창 크기에 따라 디자인을 조정하는 미디어 쿼리를 사용해 왔습니다.이것은 어떤 경우에는 단순히 훌륭하지만, 예를 들어 카드, 버튼 또는 사이드 바의 요소가 페이지의 여러 장소에서 사용될 때는 아닙니다. 컨테이너 쿼리는 구성 요소가 전체 화면이 아닌 공간이 얼마나 큰지에 따라 크기를 변경하도록 하여 문제를 해결합니다. 사이드 바에서 작아 보이지만 주요 콘텐츠 영역에서 완벽하게 성장할 수있는 카드를 생각하십시오.이 기능은 구성 요소를 위치에 상관없이 최대한 재사용 가능하고 적응 가능하게합니다. Scoped 스타일 CSS의 최악의 두통 중 하나는 스타일이 페이지를 통해 "유출"할 수 있다는 것입니다.한 구성 요소를 위해 고안된 스타일은 실수로 다른 구성 요소를 바꿀 수 있으며, 분노를 유발할 수 있습니다. 이 고립은 CSS를 예측할 수 있고 안전하게 만듭니다.이 웹 사이트는 많은 재사용 가능한 조각으로 구축되는 현대 개발에서 특히 중요합니다.사용 가능한 스타일은 각 조각이 다른 조각에 의해 방해되지 않는 것처럼 보이도록합니다. Why Do These Features Matter? 왜 이러한 특징들이 중요합니까? 이 세 가지 기능은 CSS의 근본적인 변화를 포함합니다.Together, these three features include a fundamental change in CSS: 
 
 
 
 Nesting은 코드를 깨끗하고 쉽게 읽을 수 있도록 유지합니다. 컨테이너 쿼리는 모든 상황에서 디자인을 유연하게 만듭니다. Scoped Styles는 구성 요소가 방해받지 않도록 유지합니다. 세 가지 모두 CSS를 오늘날의 웹 사이트 구축의 성격과 일치시키기 위해 함께 작동합니다 : 모듈, 재사용 및 사용자 중심. The Road Ahead 앞서가는 길 이러한 기능에 대한 지원은 아직 모든 브라우저에 있지 않지만 빠르게 증가하고 있습니다.지금 그들을 시도하는 개발자는 CSS의 미래가 올 때 곡선을 앞두고 있으며 지원이 가능합니다. Conclusion 결론 CSS는 현대 웹 개발의 요구 사항을 충족시키기 위해 변화하고 있습니다. 둥지, 컨테이너 쿼리 및 범위 스타일은 스타일링을 단순화하고, 더 똑똑하고, 더 신뢰할 수 있습니다. 디자이너와 개발자에게 이러한 기능은 CSS가 현재 우리가 웹 사이트를 만드는 방식과 더 잘 협력하는 미래를 실현합니다. 
 
 이 이야기는 HackerNoon의 비즈니스 블로그 프로그램에서 Sanya Kapoor가 발표 한 릴리스로 배포되었습니다. 이 이야기는 HackerNoon의 비즈니스 블로그 프로그램에서 Sanya Kapoor가 발표 한 릴리스로 배포되었습니다.

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

웹 스타일링의 미래 : CSS Nesting, 컨테이너 쿼리 & Scoped Styles

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

작업 흐름을 10배 향상하는 방법: 17가지 필수 앱

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

탭하여 수익 창출: 텔레그램에서 솔라나 이전에 100억 명의 암호화폐 사용자를 확보할 수 있음

작업 흐름을 10배 향상하는 방법: 17가지 필수 앱

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

탭하여 수익 창출: 텔레그램에서 솔라나 이전에 100억 명의 암호화폐 사용자를 확보할 수 있음

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps