HTML, CSS16 CSS 미디어쿼리 Level 4 입력방식으로 기기 구분하기 기존에도 사용하던 방식인데 레벨 4에서 이름이 변경되었습니다. 기기에 따라 화면사이즈의 한계가 있을 수 있기 때문에 화면의 크기에 따른 UI를 설정해야 할 경우가 있습니다. 특히나 터치기기들은 기본 터치를 위한 최소 사이즈가 있기 때문에 기기 구분을 해야할 경우가 자주 생깁니다. any-hover 미디어 쿼리 any-hover는 사용자의 입력 장치들 중 하나라도 호버링 기능을 갖고 있는지를 확인하는 데 사용됩니다. 호버링(hovering)은 사용자가 입력 장치로 화면의 요소 위를 가리킬 수 있을 때 발생하는 특징입니다. 예를 들어, 버튼이나 앵커같은 링크영역을 마우스로 가리키면 일반적으로 버튼에 특정 효과가 적용됩니다. any-hover 미디어 기능은 2가지 값, 즉 none과 hover를 갖습니다. a.. 2023. 6. 16. 터치화면의 자연스러운 스크롤을 위한 webkit-overflow-scrolling webkit-overflow-scrolling은 스크롤 화면의 자연스러운 스크롤, 특히 Safari 및 Chrome과 같은 웹킷 기반 브라우저에서 웹 페이지를 부드럽게 스크롤할 수 있도록 하기 위해 사용되는 CSS 속성입니다. 사용자의 손가락이 화면에서 쉽게 미끄러져 스크롤 동작을 방해할 수 있는 터치 기반 장치에서 overflow: scroll 또는 overflow: auto로 요소를 스크롤하면 스크롤이 고르지 않고 응답하지 않을 수 있습니다. 이 속성은 사용자가 부드럽고 반응이 빠른 스크롤을 기대하는 스마트폰 및 태블릿과 같은 터치 기반 장치에 특히 유용합니다. webkit-overflow-scrolling은 모멘텀 기반 스크롤을 활성화하여 터치 스크롤시 발생했던 문제를 해결합니다. 이 기능으로 스크.. 2023. 6. 15. 브라우저 플래그 지원 이란? 브라우저 플래그 지원은 브라우저에서 실험적인 기능을 활성화 또는 비활성화하는 데 사용되는 기능입니다. 브라우저 제작자들은 새로운 기능을 시험하고 개발자들이 해당 기능을 미리 경험하고 피드백을 제공할 수 있도록 다양한 플래그를 제공합니다. Chrome 브라우저 플래그 지원 Chrome 브라우저 플래그 지원은 Chrome 브라우저에서 실험적인 기능을 활성화 또는 비활성화하는 기능입니다. Chrome은 개발자들에게 새로운 기능이나 개선된 기능을 미리 제공하고, 이를 테스트하고 피드백을 받을 수 있도록 다양한 플래그를 제공합니다. Chrome 브라우저의 플래그는 chrome://flags 주소를 통해 접근할 수 있습니다. 사용자는 주소 창에 chrome://flags를 입력한 후, 실험적인 기능에 대한 설정을 .. 2023. 6. 1. :has() 선택자 ":has() 의사 클래스는 '부모 선택자'로 불리며, 단순히 요소의 조상을 스타일링하는 것 이상의 범위를 가지고 있습니다. Safari 15.4+ 및 Chromium 105+에서 사용 가능하며, Firefox에서는 플래그로 사용됩니다. 가상 클래스로서, :has()의 기본적인 기능은 해당 요소인 '대상' 요소를 스타일링하는 것입니다. 이는 다른 가상 클래스인 :hover 또는 :active와 유사합니다. 하지만 :has()는 :is(), :where(), :not()와 유사하게 괄호 내에서 상대적인 선택자 목록을 받아들이기 때문에 복잡한 기준을 테스트할 수 있습니다. 이를 통해 :has()는 매우 강력한 선택자가 됩니다. :has()가 어떻게 작동하는지 이해하기 위해 예제를 살펴보겠습니다. 다음 선택자.. 2023. 5. 31. 이전 1 2 3 다음
