css에도 많은 최신 기능들이 존재하지만 사용을 하지 못하고 있었습니다. 왜냐!! 우리는 작업 시 ie 버전까지 테스트를 하며 화면이 잘 표현이 되는지 확인하였기 때문입니다. 하지만 이제는 점점 ie는 배제되고 작업을 하다 보니 이러한 기능들도 알아두고 사용해 보는 것이 좋을듯하여 정리하여 봅니다. @supports 규칙 - CSS 조건부 규칙으로, 브라우저가 특정 CSS 속성, 속성 값, ª)미디어 피처를 지원하는지 여부를 확인하는 데 사용됩니다. - 이를 통해 브라우저 호환성을 개선하고, 일부 브라우저에서 지원되지 않는 스타일을 대체할 수 있습니다. - @supports 규칙은 조건의 논리(and, or, not) 조합도 가능하다. @supports 구문 @supports (조건) { /* 지원되는 ..

소리가 없는 비디오가 자동재생 되는 사이트가 있습니다. A의 맥북에서는 잘 재생되지만 B의 맥북에서는 자동재생이 되지 않고 클릭을 통해 재생을 시켜야 했다. 체크 해야 할 사항은 무었이 있을까 ?? 코드를 먼저 살펴 보겠습니다. muted: 이 속성은 말그대로 음소거 처리를 하는 속성입니다. 제 경우 iOS 에서 이슈를 발견했으나 트러블 슈팅중 chrome 에서도 재생이 안되는 현상을 발견했고, 이 속성은 사용자의 제한된 네트워크 상황에서 과도한 데이터 소비를 방하기 위한 정책과 관련이 있습니다. 아래 링크를 참조해 주세요. chrome - autoplay/#webaudio Autoplay policy in Chrome - Chrome Developers Learn best practices for go..

if ('visualViewport' in window) { const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75; window.visualViewport.addEventListener('resize', function (event) { if ( (event.target.height * event.target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO ) console.log('keyboard is shown'); else console.log('keyboard is hidden'); }); }

ES6부터 새로 도입된 문자열 표기법입니다. 문자열 생성시 작은따옴표(')나 큰따옴표(") 대신 백틱(`)으로 감싸줍니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다. 템플릿 리터럴의 기본 문법 `string text` // 한줄 표현 `string text line 1 string text line 2` // 개행된 표현 var expression; `string text ${expression} string text` // 변수값 문자열 조합 function tag() { }; tag `string text ${expression} string text` // 함수 호출 Expression inte..

Array.from(element.parentNode.children).indexOf(element) element.parentNode.children → element해당 요소를 포함하여 의 형제를 반환합니다. Array.fromchildren → 생성자 를 Array객체 로 캐스트합니다. indexOf → 이제 대상[Array]이 있으므로 indexOf를 신청할 수 있습니다.

접근성을 확인하고 개발할 경우에는 스크린리더를 사용하여 수동으로 테스트를 하는것이 접근성테스트 도구로 체크할수 없는 문제점을 포착하고 수정할수 있습니다. MacOS 와 Windows 의 스크린리더는 ? windows의 경우 가장인기 있는 스크린리더는 JAWS(Job Access With Speech) 및 NVDA(NonVisual Desktop Access) 두가지 입니다. mac의 경우는 VoiceOver입니다. 어떤 브라우저로 테스트해야 할까 ? 스크린리더는 가장 호환이 잘되는 브라우저로 사용을 할때 가장 잘 작동이 되어집니다. MacOS - VoiceOver는 Safari에서 최적화가 가장 잘 되어져 있어 Safari와 함께 사용해야 합니다. - 만약 Chrome 또는 Firefox에서 VoiceO..