본문 바로가기

basic

 (173)
웹접근성을 고려한 요소 숨김처리 방법 display: none은 화면에서 보이지 않지만 스크린리더가 읽어들이지 못하는 문제점이 있다. 그렇다면 비슷한 visible: hidden을 사용해야되는 것인가? 라고 생각할 수 있지만 hidden 또한 사용자에게 보이지 않게하는 의도를 가진 태그이기 때문에 읽지 못하는 스크린리더가 마찬가지로 존재한다고 한다. (국내는 읽을 수 있다는것 같다?... overflow: hidden은 국내외 모든 스크린 리더가 읽어들일 수 있다고 한다.) 따라서 위치를 화면 밖으로 보내버리는 등의 꼼수를 사용하면 된다. .hidden{ position: absolute; top: -9999px; opacity: 0; } .blind { position: absolute; clip: rect(0 0 0 0); width: ..
inline-block 버그 inline-block을 사용할 때 마진을 주지 않았음에도 서로 간격이 벌어져 있는 버그가 있다. 가장 쉬운 해결법은 부모요소에 font-size를 0으로 설정해주면 된다.
배열 중복제거 (ES6에 추가된 Set객체 이용하기) 1 2 3 4 const arr = [1, 2, 3, 1, 2, 3]; const newS = new Set(arr); console.log([...newS]); //output: [1,2,3]
eslint + prettier 설정 { "workbench.colorTheme": "Night Owl", "workbench.iconTheme": "material-icon-theme", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": false, "workbench.startupEditor": "none", "eslint.alwaysShowStatus": true, "eslint.validate": [ { "language": "vue", "autoFix": true }, { "language": "javascript", "autoFix": true }, { "language": "javascriptreact", "autoFix": true }, { "language": ..
replace() 전체 수정하는 방법 replace에 바로 문자를 넣으면 가장 첫번째 해당하는 요소만 변경하지만 다음과 같이 작성하면 전체를 바꾸어 준다. const str = '010-0000-0000'; const result = str.replace(/-/g, ''); //결과값은 01000000000 특수문자의 경우 정규식에서는 ￦특수문자의 형태로 넣어주면 된다 replaceAll 이라는 메서드도 있지만 아직 지원 안되는 브라우저도 있으므로 정규식으로 표현하는게 더 좋을거 같다
스크롤 이벤트 사용하기 created() { window.addEventListener('scroll', this.handleScroll); } destroyed() { window.removeEventListener('scroll', this.handleScroll); },
스크롤 현재 위치 구하기 (스크롤 이동) const el = document.getElementById(아이디명); const target = window.pageYOffset + el.getBoundingClientRect().top; // 타겟 위치로 스크롤 이동해준다 window.scrollTo({ top: target, behavior: 'smooth', });
SpringBoot에서 JSON으로 데이터 보내는 방법 3가지 REST통신하기 방법1. @RequestBody와 @ResponseBody를 이용하여 HTTP통신(JSON형식)을 하는것이다. @Controller public class TestController { @ResponseBody @RequestMapping("/restful") public RestfulSpring test(){ RestfulSpring rs = new RestfulSpring(); rs.setType("JSON"); return rs; } } 방법2. 컨트롤러로 JSON객체를 전송하는 가장 쉬운방법으로 @RestController를 사용하면 된다. (@RestController는 @Controller와 @ResponseBody가 합쳐진것이라 보면된다.) @RestController public class..

티스토리툴바