html5 [HTML] input:number 의 숫자 최대값, 최소값 설정 방법 # input 숫자 입력 HTML에서 숫자만 입력 받고자 할 때는 number 타입의 input태그를 사용해주면 된다. # input 숫자 최대값/최소값 최대값은 max 속성값으로, 최소값은 min 속성값으로 설정해주면 된다. 아래 코드는 1~5사이의 숫자만 입력 받는다. # input 숫자 플러스/마이너스 플러스 정수값만 입력 받으려면 min = 1 로 설정해주면 된다. 마이너스 정수값만 입력 받으려면 max = -1 로 설정해주면 된다. input태그로 소수점 숫자를 입력 받으려면 step속성을 활용하면 된다. 자세한 내용은 아래 글을 참고 [HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) 2021. 7. 7. HTML/JS: Audio 객체 음악 파일 제어 및 사운드 재생/정지 방법 HTML에서 오디오를 재생하는 방법 2가지를 정리한다. 1. HTML의 audio 태그를 이용하는 방법 2. Javascript의 audio객체를 이용하는 방법 참고로, 크롬 브라우저에서는 autoplay가 금지되어 자동재생이 불가하다. 1) HTML에서 코드는 자동 재생되지 않으며, 2) Javascript에서 사용자의 액션이 없는 상태에서의 audio객체.play() 코드도 작동하지 않는다. 상황에 따라 아래와 같은 로그가 뜰 수도 있다. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 오디오 자동재생이 사용자 환경에 좋지 않다고 판단한 크롬의 정책이라는 것.. 2021. 6. 19. HTML Canvas 왜곡현상(선 두께 불일치, 비대칭, 비율 불균형 등) 해결 방법 HTML에서는 아래와 같이 canvas태그를 이용하면, 쉽게 그림을 그릴 수 있다. 오른쪽으로 갔다가 아래로 내려가는 선을 그리는 코드다. (나름대로 상세하게 주석을 달았다) 그런데 웹페이지에 띄워보면... 가로 세로 선 두께가 다른 것을 알 수 있다. 아주 기초적인 내용이지만, 모르고 있으면 난감한 내용이다. 이 현상은 그래픽적인 요소를 CSS로 별도 처리하는 좋은(?) 습관으로 인해 발생하는 문제다. (내가 그랬다.... ㅋㅋㅋ) MDN사이트 canvas 튜토리얼을 보면 이런 문장이 있다. Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, .. 2021. 3. 28. [자바스크립트] HTML input 입력창 자동 포커스, 커서 마지막 설정 방법 HTML input에 focus주고, 마지막 글자에 커서 위치 1. input 입력창의 자동 포커스 설정 방법 : input 태그의 속성으로 autofocus를 주면 된다. 결과: 포커스된 커서가 맨 앞으로 간다. 2. input 커서를 텍스트 마지막으로 위치시키는 방법 원리는 동일하다. input 태그에 포커스를 주면서, value값을 새로 넣어주면 된다. 1) 첫번째 방법: input태그에 autofocus 설정된 경우. const $input_01 = document.getElementById('input_01'); // input 태그 취득 $input_01.value = "js로 추가한 value"; // input 태그의 value에 새로운 값 설정 2) 두번째 방법: input태그에 auto.. 2021. 1. 16. [CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법 img 엘리먼트에 공백 생기는 현상 및 해결 방법 a 엘리먼트 내에 img 삽입시 여백이 발생하는 현상 img, a태그 자체는 패딩도 마진도 없는데, 이미지가 뜨는 현상이 발생할 때가 있다. 자세히 보면 이미지 아랫부분이 미세하게 떠있다. 해결방법 아래의 두가지 방법중 하나를 적용하면 된다.(상황에 따라 선택 필요) img 태그의 CSS vertical-align 속성을 bottom으로 설정. img 태그의 CSS display속성을 block으로 설정. /* 첫번째 방법 */ img { vertical-align: bottom; } /* 두번째 방법 */ img { display: block; } 해결 완료 후 모습 a태그 내부에 떠있던 이미지가 여백 없이 꽉 찬다. 해결 완료! 2021. 1. 3. 이전 1 다음
