728x90 300x250 SMALL Front-end/HTML80 input type text 숫자만 입력 정규식 input영역에 숫자만 입력 받는 방법은 이렇게 input type을 number로 지정해 주면 되는 일이지만 input에 up down 버튼이 생겨버린다. 그래서 input type="text"로 하면서 숫자만 입력 받기 위해서는 oninput 이벤트와 정규식을 사용해서 가능하다. oninput 이벤트는 input 값이 바뀌면 발생하는 이벤트 이며 이 이벤트가 발생할 때 숫자만 입력받는 정규식이 적용되고 숫자가 아닌 값이 입력되면 replace 함수로 대체하게 된다. 참고사이트 https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input/28838789#28838789 https://stackoverflow.com.. 2022. 1. 3. wai-aria란? wai-aria란? Web Accessibillty Initiative-Accessible Rich Internet Applications의 약자 이며 W3C에서 출판한 장애가 있는 사람들이 액세스 할 수 있는 대화형 웹 사이트 콘텐츠를 구축하는데 가장 일반적으로 사용되는 기술사양이다. 특히 동적인 콘텐츠와 Ajax, JS, VUE, REACT 등과 같은 페이지를 새로고침 하지 않고 갱신했을때 스크린 리더기를 사용하는 전맹 시각장애인들이 정보를 제대로 제공받지 못하는 상황을 방지 하기 위해 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가해서 접근성을 높여주는 방식이다. 만약 의미가 있는 시맨틱 태그가 아닌 일반 div를 사용할 경우 예를들면 네비게이션 네비게이션 nav로 만들든 div로 만들든 같.. 2021. 12. 17. <cite> html 태그 태그는 인용을 할 때 사용합니다. 인용된 콘텐츠, 책, 웹사이트, 블로그, 연구논문, 예술작품등에 대해서 출처를 표기할때 사용하며 제목을 반드시 표기해야 합니다. 사용법 인용 콘텐츠 cite를 사용하면 기본적으로 기울임꼴로 표시되기 때문에 기울임꼴로 적용하지 않을시에는 css로 수정해야 한다. 브라우저 호환성 보기 출처: https://developer.mozilla.org/ko/docs/Web/HTML/Element/cite 2021. 12. 16. html / css 박스크기 기준 box-sizing: border-box box 크기 기준 박스 width + 패딩 + 테두리 = 실제 박스 값 .box { padding: 10px; font-size: 50px; font-weight: 600; line-height: 50px; border: 10px solid #000; width: 300px; text-align: center; } 그러니까 만약 width 값이 300px이라고 할때 박스 크기는 300px이 아니고 340px이라는 사이즈가 나온다. 양쪽 패딩 값 10px씩 총 20px 양쪽 border 값 10px씩 20px 더해서 340px이 된다. 만약 padding 값과 border값에 상관없이 설정한 width 값만큼 box 사이즈를 표현하고 싶다면 box-sizing: border-box;를 사용하면 된다. .b.. 2021. 12. 10. 이전 1 2 3 4 5 6 7 8 ··· 20 다음 728x90 반응형 LIST