CSS 새로운버전?

 

 

최신 CSS 릴리스에는 웹 디자인과 개발을 향상시킬 수 있는 여러 가지 새로운 기능이 포함되어 있습니다. 다음은 그 중 일부입니다.

• @layer: 이 구문은 CSS 규칙을 레이어로 그룹화하고, 특정 레이어에 대한 스타일을 적용하거나, 레이어 간의 특수성을 조정할 수 있습니다1.
• inert: 이 전역 속성은 HTML 요소를 비활성화하고, 포커스, 스크롤, 텍스트 선택 등의 사용자 상호작용을 방지합니다1.
• :has: 이 상대적 선택기는 특정 자식 요소를 포함하는 부모 요소를 선택할 수 있습니다. 예를 들어, <span> 요소를 포함하는 모든 <div> 요소를 선택하려면 div:has(span)을 사용할 수 있습니다1.
• subgrid: 이 값은 CSS 그리드 레이아웃에서 부모 그리드의 행과 열을 상속받는 자식 그리드를 정의할 수 있습니다. 이를 통해 중첩된 그리드 요소들이 일관된 크기와 간격을 유지할 수 있습니다2.
• accent-color: 이 속성은 체크박스, 라디오 버튼, 진행 바 등의 UI 요소에 적용할 색상을 지정할 수 있습니다. 이를 통해 웹 사이트의 브랜딩이나 테마에 맞게 UI 요소의 외관을 커스터마이즈할 수 있습니다3.
• scroll-snap-type: 이 속성은 스크롤 컨테이너에서 스크롤 위치를 조정할 수 있습니다. 예를 들어, 슬라이드 쇼나 갤러리와 같은 콘텐츠를 스크롤할 때, 각 슬라이드가 화면에 정확하게 맞도록 스크롤을 정렬할 수 있습니다4.
• CSS 논리적 속성: 이 속성들은 텍스트 방향이나 쓰기 모드에 따라 상대적으로 패딩, 마진, 보더, 정렬 등을 지정할 수 있습니다. 예를 들어, padding-inline-end 속성은 인라인 방향의 끝 부분에 패딩을 적용합니다. 이를 통해 다양한 언어와 스크립트를 지원하는 웹 사이트를 쉽게 만들 수 있습니다.

이 외에도 hwb, lch, lab 색상, @container, @when, @else 등의 새로운 CSS 기능들이 있습니다. 자세한 내용은 [CSS 문서]를 참고하세요. 😊

 

 

포트폴리오 웹을 만드는 도중 자식선택자는 있지만 내 부모 선택자는 없어서 스타일링할때 굉장히 불편했던 기억이 있다. 

 

근데 업데이트된 CSS버전에는 :has로 부모요소를 선택할 수 있다니 꼭 한번 써봐야겠다