728x90 300x250 SMALL 분류 전체보기1128 @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. layerpopup select - 비공개 보호되어 있는 글 입니다. 2024. 1. 5. JS 상속 기능을 사용하는 이유 자바스크립트에서 상속 기능을 사용하는 이유 1. 코드 재사용성(Code Reusability) 상속을 통해 부모 클래스의 속성과 메서드를 자식 클래스에서 재사용할 수 있다. 이것은 코드를 더 간결하게 만들고 중복을 피할 수 있도록 해준다. // 부모 클래스 function Animal(name) { this.name = name; } // 공통 메서드 추가 Animal.prototype.eat = function() { console.log(this.name + "가 먹고 있습니다."); }; // 자식 클래스 function Dog(name, breed) { Animal.call(this, name); // 부모 클래스의 생성자 호출 this.breed = breed; } Dog.prototype = .. 2024. 1. 3. 상하 스크롤 하단 뿌옇게 처리하기 하단이 뿌옇게 처리된 상하 스크롤 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 #scrollable-list::after 가상 요소를 사용해서 하단 뿌옇게 처리된 배경을 만들었다. 그런데 여기서 문제는 맨마지막 리스트가 가상 요소 영역에 가려서 클릭이 안된다는 것이다. 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 pointer-events: none; 해당 요소에 마우스 이벤트를 비활성화하는 스타일을 가상요소에 적용하면 해당 가상 요소 위에서 마우스 이벤트가 발생하지 않아 마우스 클릭 등의 이벤트가 아래의 실제 리스트 아이템에 전달될 수 있게 된.. 2024. 1. 2. 이전 1 ··· 38 39 40 41 42 43 44 ··· 282 다음 728x90 반응형 LIST