웹 디자인이 빠르게 진화하면서, CSS는 인터페이스를 더욱 풍부하고 상호작용이 가능한 형태로 꾸밀 수 있는 다양한 속성들을 제공하고 있습니다. 특히, 올해는 UI와 UX를 개선할 수 있는 새로운 CSS 속성들이 각광받으며 웹 디자이너와 개발자들 사이에서 널리 사용되었습니다.
이번 포스팅에서는 2024년 가장 많이 사용된 CSS 속성 TOP 3를 소개하고, 각 속성이 웹 디자인에 어떤 영향을 주었는지 살펴보겠습니다! 🎨
1. CSS Filter Effects (75.4%)
CSS의 filter 속성은 요소에 그래픽 효과를 적용해 시각적 스타일을 변경할 수 있도록 합니다. 이 속성은 이미지, 텍스트, 배경 등에 블러 효과, 색상 변환, 밝기 조절 등 여러 가지 필터를 적용할 수 있어 웹 인터페이스에 시각적 매력을 더할 때 자주 사용됩니다.
지원하는 주요 함수들
blur(): 요소에 블러 효과(흐림)를 추가합니다. 예: blur(5px)
brightness(): 요소의 밝기를 조절합니다. 예: brightness(150%)
contrast(): 요소의 대비를 조절합니다. 예: contrast(200%)
grayscale(): 요소를 흑백으로 변환합니다. 예: grayscale(100%)
invert(): 색상을 반전시킵니다. 예: invert(100%)
opacity(): 투명도를 설정합니다. 예: opacity(50%)
saturate(): 요소의 채도를 조정합니다. 예: saturate(300%)
sepia(): 요소에 세피아 톤을 적용합니다. 예: sepia(100%)
위 속성들은 단순한 시각 효과를 통해 사용자의 관심을 끌거나, 인터페이스의 시각적 계층을 개선하는 데 효과적입니다.
🎯 여러 필터를 공백으로 구분하여 동시에 적용할 수 있습니다.
filter: brightness(150%) contrast(120%) blur(2px);img {
filter: grayscale(100%) blur(5px);
}위 코드에서는 이미지를 흑백으로 바꾸고 흐림 효과를 추가합니다.
2. :has() (72.8%)
:has()는 동적 부모 선택자로, 특정 조건을 충족하는 자식 요소가 존재할 때 부모 요소에 스타일을 적용할 수 있게 해줍니다. 기존 CSS는 자식 요소를 기준으로 스타일을 설정할 수 있었는데, :has()는 부모 요소가 자식을 조건으로 스타일을 변경할 수 있는 기능을 제공합니다. 예를 들어, 특정 자식을 포함하는 부모에만 스타일을 적용하거나 상태 기반의 스타일을 만들 수 있습니다.
/* 자식 요소로 img를 포함한 figure에만 스타일을 적용 */
figure:has(img) {
border: 2px solid blue;
}위 코드는 img를 포함한 figure 요소에만 파란색 테두리를 적용합니다.
/* .parent 요소에 .child 요소가 있을 경우 .parent에 스타일 적용 */
.parent:has(.child) {
background-color: lightgray;
}:has() 선택자는 주로 상태 기반 스타일링이나 동적 스타일링에서 강력하며, 특정 자식을 포함하는 부모에게 직접적인 스타일을 적용할 수 있어 더 복잡한 레이아웃이나 UI 구성에 유용하게 쓰입니다.
3. Intrinsinc Sizing Keywords (72.5%)
min-content는 CSS에서 요소의 최소 크기를 계산할 때 사용하는 키워드입니다. 요소의 크기를 min-content로 설정하면, 그 요소가 담고 있는 콘텐츠의 가장 작은 크기에 맞춰 요소의 폭이나 높이가 자동으로 조정되며, 주로 긴 텍스트가 줄 바꿈 없이 표시되도록 할 때 유용합니다.
적용 대상
min-content는 width, height, min-width, min-height, max-width, max-height 속성 등에 적용할 수 있습니다.
이 속성은 반응형 웹 디자인과 적응형 레이아웃을 구현할 때 특히 유용하며, 웹 콘텐츠의 길이나 크기에 따라 자동으로 레이아웃이 조정됩니다.
