2020/0410 파비콘? 다크모드 지원은? 요즘 바야흐로 다크모드의 시대~ 웹도 시큐리티 웹도 모두 다크모두 전성시대인 것 같습니다. 다크모드를 지원하는 일부 기종과 media query가 나옴에 따라 조금 더 세분화하여 처리할 수 있게 되었는데요. 파비콘은 지금 보시고 계신 웹의 상단에 브라우저 타이틀에 제 캐릭터 아이콘이 떠 있듯이 각 웹 및 어플리케이션의 아이덴티티를 효과적으로 나타내는 수단 중 하나입니다. 파비콘? 브라우저의 북마크와 열린 탭을 통해 스캔 할 때 어떤 사이트가 어떤 사이트인지 이해하는 데 도움이됩니다. 아주 새로운 트릭 중 하나는 SVG를 즐겨 찾기 아이콘으로 사용하는 기능입니다. 대부분의 최신 브라우저가 지원하는 방식으로 더 많은 지원을 제공합니다. svg를 사용하면 path나 rect circle 등의 도형의 fill과.. 2020. 4. 25. CSS @charset "utf-8"; 을 쓰는 이유 CSS를 사용할 때 @charset "utf-8"을 많이 보셨을 것입니다. 이 선언은 html 문서 내의 태그 내에는 적용이 되지 않습니다. 유니코드 문자열(비 아스키코드)이 있을 때 utf-8로 명시적으로 선언해주어 utf-8 인코딩 셋을 지정합니다. [data-set="dragon"]::before { content: ' ↗'; display:block; width:10px; } 예를 들어 위와 같은 유니코드 문자열이 있을 경우에 Windows-1252로 인코딩이 읽히기도 합니다. html 문서 내에 와 같이 작성하는 것은 obsolete(사용하지 않는 상태로 됨) 되었습니다. 작성 규칙은 다음과 같습니다. @charset "UTF-8"; /* 유효 */ @charset 'iso-8859-15'; /.. 2020. 4. 19. SVG 모션 Path 그리기 CSS 모션 경로를 사용하면 사용자 정의 사용자 정의 경로를 따라 요소에 애니메이션을 적용 할 수 있습니다. 이러한 경로는 SVG 경로와 동일한 구조를 따릅니다. `offset-path`를 사용하여 요소의 경로를 정의합니다. .block { offset-path: path('M20,20 C20,100 200,0 200,100'); } 위 요소는 상대적인 offset-path입니다. 하지만 여기서 문제점은 크기에 따라 반응하지 않는 다는 것입니다. 왜냐하면 해당 숫자들은 `px` 기반이기 때문이지요. 스테이지를 설정하기 위해 offset-distance 속성은 요소가 해당 경로에서 있어야하는 위치를 나타냅니다. https://codepen.io/jh3y/pen/cd95c54d57891b095df99eaa0.. 2020. 4. 18. UA 대신에 Client Hints 사용해보기 구글이 사용자 프라이버시를 위한 샌드박스 정책을 급진적으로 진행하고 있습니다. 현재, 코로나 때문에 샌드박스 정책 중 하나인 SameSite Cookie도 롤백한 상태인데요.. 기존에 `navigator.userAgent`를 사용한 곳이 많기 때문에 어떻게 대처해야할지 모호한 상태라 조금 더 자세하게 알아보았습니다. Client Hints는 W3C로부터 인정받은 표준도 아니며, W3C 표준 트랙에도 없습니다. 하지만, Apple과 Microsoft도 동의한 상태이며, 크롬과 파이어폭스 일부 버전에서 `Accept-CH`를 사용할 수 있기 때문에 충분한 대응책을 가지고 있어야 할 것 같습니다. 특정 서비스에서 웹브라우저의 종류를 파악하여 서비스를 제한하는 것은 소비자의 권리에도 부합되지 않는다는 주장입니다.. 2020. 4. 12. 이전 1 2 3 다음
