728x90 300x250 Front-end/CSS63 @supports 최신 브라우저에만 스타일 적용하기 '@supports'는 css 조건부 규칙 중 하나로, 특정한 css속성이나 값이 브라우저에서 지원되는지 여부를 확인하는데 사용된다.이를 통해서 특정 스타일을 지원하는 최신 브라우저에만 스타일을 적용하거나, 그렇지 않은 경우에는 대체 스타일이나 처리를 정의할 수 있다. @supports (condition) { /* condition이 참일 때 적용되는 스타일 */ } 여기서 condition은 특정한 css 속성이나 값의 지원여부를 확인하는 조건을 나타낸다. 만약 조건이 참이면 괄호 안의 스타일이 적용되고, 그렇지 않으면 무시된다 예시 리스트 아이템 1 리스트 아이템 2 현재 브라우저가 (background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rg.. 2024. 1. 6. 상하 스크롤 하단 뿌옇게 처리하기 하단이 뿌옇게 처리된 상하 스크롤 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 #scrollable-list::after 가상 요소를 사용해서 하단 뿌옇게 처리된 배경을 만들었다. 그런데 여기서 문제는 맨마지막 리스트가 가상 요소 영역에 가려서 클릭이 안된다는 것이다. 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 pointer-events: none; 해당 요소에 마우스 이벤트를 비활성화하는 스타일을 가상요소에 적용하면 해당 가상 요소 위에서 마우스 이벤트가 발생하지 않아 마우스 클릭 등의 이벤트가 아래의 실제 리스트 아이템에 전달될 수 있게 된.. 2024. 1. 2. 컨텐츠 너비에 따라 박스 크기 조정 width:min-content width: min-content 이 값은 컨텐츠가 가질 수 있는 최소 너비를 기반으로 요소 크기를 결정한다. 해당요소의 내용에 따라서 최소한의 너비 키그로 조절됨 See the Pen width: min-content by kim oya (@ttuttu) on CodePen. 2023. 11. 18. 체크박스 클릭시 검정색 border 생기는 현상 해결방법 .체크박스 클래스:focus{ outline:none; } 2023. 6. 2. 이전 1 2 3 4 ··· 16 다음 728x90 반응형