작심삼일 개발이야기

px은 CSS에서 가장 기본적인 단위이다. px를 사용하여 크기를 설정하면 그 크기는 절댓값이 되어버린다.하지만 웹 페이지 사이즈의 변동이 많아 크기가 고정되어 버리면 접근성에 안 좋아질 수 있다. 보통 웹 브라우저의 기본 폰트 사이즈는 16px로 설정되어 있으며 일부 웹 브라우저는 기본 폰트 사이즈를 확대하는 기능을 제공한다.기본 폰트 사이즈를 확대 하더라도 px로 설정되어 있는 폰트 사이즈는 변함이 없다.(ctrl + 휠 키를 사용한 화면 확대는 화면 전체를 확대하는 것이라 가능하다.) rem을 사용하게 된다면 좋은 점웹 브라우저 마다 다른 기본 폰트 사이즈에 대응할 수 있다.저시력자 접근성에 대응할 수 있다. rem을 사용하게 된다면 html의 폰트 사이즈를 기준으로 폰트 사이즈를 계산하게 된다.기..

overflow: overlay라는 속성에 대해 새롭게 알게 되어서 다른 속성들까지 간단하게 정리해보았다. 기본 css 설정 이미지를 기준으로 설명하려고 한다.overflow속성을 따로 지정한 것은 없다.overflow: scroll항상 스크롤바를 생성하기 때문에 내용의 변화에 따라 스크롤바를 생성하거나 사라지게 하지 않는다.  콘텐츠 내용이 지정한 크기보다 넘치지 않은 경우에도 위의 사진과 같이 무조건 스크롤이 생성되는 것을 확인할 수 있다. overflow: auto컨텐츠가 요소 안에 들어간다면 visible과 같아 보이나 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 생성한다.   같은 overflow: auto를 적용했는데 height의 값에 따라서 스크롤이 자동으로 생성되는 것을 확인할 ..

이미지를 사용할 때 tag와 background-image를 사용하는 두 가지 방법이 존재한다. 이미지를 사용해서 렌더링 되는 결과는 똑같다. 결과는 같지만 사용법이 다른 두가지가 무엇이 다른지 검색해봤다. 결론은 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 SEO, 성능 등 더 효율적인 tag를 사용하고 그게 아니라면 background-image를 사용해라 tag와 background-image의 차이점 tag의 경우 이미지가 로딩을 실패하면 broken image와 alt 텍스트가 보이지만 반대로 background-image경우 실패하면 아무것도 보이지 않는다. 이미지에 대해 사용자가 알아야 한다면 tag를 사용할 것이고 있어도 그만이고 없어도 그만이라면 background-ima..

다른 사람의 코드를 읽다 보니 을 본 적이 있다. 한 번도 button에 type을 사용해본 적이 없던 나로서는 뭘까 싶었다. 솔직히 아무 문제없이 잘 사용하고 있어서 별로 관심이 없었던 것도 있다. button의 type mdn에서 button에 대해서 찾아봤다. button의 type은 3가지가 있다. submit 서버로 양식 데이터를 제출. 타입을 지정하지 않는 경우 기본 값. 유효하지 않은 값일 때도 사용 reset 처럼, 모든 컨트롤을 초깃값으로 되돌린다. button 기본 행동이 없으며 클릭했을 때 아무것도 하지 않는다. IE 10 이하에서 form 태그에 속하지 않은 input에서 엔터키를 누르면 submit을 실행하는 이슈가 있다. type="button"을 명시해준다면 실행되지가 않는다...

이렇게 input을 사용해서 숫자만 입력받으려고 했는데 테스트 결과 e, +, -도 입력이 가능하다는 것을 알게 되었다... 진짜 생각지도 못했는데 뭔가 새롭게 발견해서 신기하다 그래서 js를 이용해서 정규식으로 숫자만 받기로 했다 하하 아래의 코드는 숫자만 입력받는 정규식 export const checkOnlyNumber = (string) => { const check = /[^0-9]/g; // 숫자가 아닌 문자열을 선택하는 정규식 string = string.replace(check, ""); // 원래 문자열에서 숫자가 아닌 모든 문자열을 빈 문자로 변경 return string; };