HTML 3

img tag 와 backgounrd-image 차이점

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

HTML 2022.04.23

button에 type="button"을 사용하는 이유

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

HTML 2022.04.12

input type="number"에서 숫자가 아닌 e, +, - 가 입력된다.

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

HTML 2021.12.17