전체 글 (274) 썸네일형 리스트형 Failed to load config "react-app" to extend from. eslint적용시 config모듈을 설치하지 않아서 발생하는것 같다. eslint-config-react-app 또는 eslint-config-airbnb를 입맛에 맞게 설치하면 된다. 설치 후에는 extends에 react-app을 추가해주면 된다. font 색상 그라데이션 넣기 background: -webkit-linear-gradient(90deg,pink,orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent; Shadow Dom 캡슐화 기능을 제공하는 DOM이다. 독립된 DOM으로 해당 컴포넌트에만 종속된다. 따라서 document.querySelector 등으로 DOM탐색이 불가하다. 마찬가지로 Shadow DOM에 선언된 CSS 또한 해당 컴포넌트 안에서만 유효하므로 단순한 css선택자 사용과 네이밍 충돌을 걱정하지 않아도 된다. 반면 이와 비슷한 리액트의 styled-component의 경우 해당 컴포넌트에만 적용한다는 점은 같지만 내부 작동원리가 해당컴포넌트마다 유일한 클래스를 부여하여 스타일을 적용하는 방식으로 결국 styled-component는 전역에 스타일이 적용된다는 점에서 차이가 있다. https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_.. 웹 접근성 https://muchtrans.com/translations/what-i-ve-learned-about-accessibility-in-spas.ko.html SPA에서의 접근성에 대해 배운 것들 However, I've found that, especially for screen reader accessibility, there is no substitute for testing in an actual browser with an actual screen reader. It gives you the exact experience that a screen reader user would have, and it helps build empathy f muchtrans.com https://elvanov.c.. NPM 모듈 개발환경으로 설치하기 --svae-dev 또는 -D 옵션 추가 크기 키우기, 이동하기 transform transform: scale(1.2) // 배수 1.2배 transform: translate(100px) // 단위 px https://developer.mozilla.org/ko/docs/Web/CSS/transform font태그 font: bold 14px/20px italic Times, serif; 순서 지켜야됨 / 앞의 14px은 font-size를 의미하고 / 뒤의 20px은 line-height 값을 의미한다. 웹접근성을 고려한 요소 숨김처리 방법 display: none은 화면에서 보이지 않지만 스크린리더가 읽어들이지 못하는 문제점이 있다. 그렇다면 비슷한 visible: hidden을 사용해야되는 것인가? 라고 생각할 수 있지만 hidden 또한 사용자에게 보이지 않게하는 의도를 가진 태그이기 때문에 읽지 못하는 스크린리더가 마찬가지로 존재한다고 한다. (국내는 읽을 수 있다는것 같다?... overflow: hidden은 국내외 모든 스크린 리더가 읽어들일 수 있다고 한다.) 따라서 위치를 화면 밖으로 보내버리는 등의 꼼수를 사용하면 된다. .hidden{ position: absolute; top: -9999px; opacity: 0; } .blind { position: absolute; clip: rect(0 0 0 0); width: .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 35 다음