본문 바로가기

개발(Development)273

[자바스크립트] html table 태그 행(tr) 개수 파악 방법(+ 전체 행 삭제) 자바스크립트만으로 table태그의 행 갯수를 파악하고, 특정 행이나 전체 행을 삭제할 수 있다. # HTML table 행 갯수 파악 방법 : table태그.rows.length [HTML코드] table 태그의 id 값을 'myTable'로 주었다. 항목 가격 사과 1,000 귤 500 [Javascript코드] table태그를 취득 후, 행의 개수를 숫자로 출력한다. const $table = document.getElementById('myTable'); // table 엘리먼트 취득 console.log($table.rows.length); // 3, 행 갯수 출력 테이블의 행을 삭제할 때, 아래와 같이 활용할 수 있다. # HTML table 행 전체 삭제 방법 : table태그.deleteRo.. 2021. 1. 23.
[HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) 아래와 같이 number 타입의 input 입력창을 생성하면, 아래처럼 소수점 입력이 안 된다... 자바스크립트 없이 해결하는 방법이 있다. 즉, INPUT 엘리먼트의 속성 조정만으로 "소수점 입력"을 가능하게 할 수 있다. # INPUT:number 태그에 소수점 숫자 입력 방법 => step 속성 설정 1. 소수점 1자리까지 입력 설정: input태그에 step="0.1" 속성 추가 2. 소수점 2자리까지 입력 설정: input태그에 step="0.01" 속성 추가 이렇게하면 소수점 숫자도 입력이 가능해진다. (물론 number 타입이므로, 숫자외의 문자 등은 입력이 불가하다) # step 속성이란? : step속성은 input 입력창의 숫자 간격을 설정하는 속성이다. : number 타입의 inpu.. 2021. 1. 22.
[CSS] 아이폰(iOS) input, button 기본 테두리, 색(그라데이션) 스타일 제거 방법 모바일 웹을 개발해보면, iOS에서 input의 테두리나, button의 색상이 내가 설정한대로 적용되지 않는 현상이 나타난다. # 문제 현상 버튼(input[type=submit])은 그라데이션이 먹고,(그림자도 있는듯?) 입력창도 테두리(border-radius) 등이 정상 작동하지 않는다. 아이폰 사파리 브라우저에 적용된 기본 스타일 때문인데, 쉽게 해결할 수 있다. # iOS 사파리 기본 스타일 제거 방법 1. -webkit-appearance 속성을 none으로 설정 해준다.(CSS에 아래와 같이 작성하고 시작.) 2. -webkit-border-radius 속성을 0으로 설정 해준다.(CSS에 아래와 같이 작성하고 시작.) input, textarea, button { appearance: n.. 2021. 1. 21.
[HTML] 스마트폰(모바일) input 입력창 포커스 시, 화면 확대 방지 방법 스마트폰으로 모바일 웹에 접근시, input 입력창을 터치(클릭)하여 포커스가 먹으면, 화면이 확대될 때가 있다. 당췌 어떻게 해결해야할지 난감할 수 있지만, 해결책은 아주 쉽고 간단하다. #모바일 화면 자동확대 방지 방법 사이에 viewport 메타태그를 아래와 같이 설정해주면 된다. 필요에 따라 maximum-scale=1 속성을 추가하여 확대 배율을 설정할 수도 있다. 도움이 되셨길 바랍니다. (참고) viewport 속성 width=device-width : 화면 너비를 기계 너비로 맞춤 initial-scale=1.0 : 초기 화면 크기 배율 설정 minimum-scale=1 : 최소 화면 크기 설정 maximum-scale=1 : 최대 화면 크기 설정 user-scalable=no : 사용자가.. 2021. 1. 20.
[HTML] input:radio 여러개(다중) 선택될 때, 하나만(단일) 선택 방법 radio 타입의 input 태그를 사용하다보면, 가끔(?) 라디오 버튼이 한번에 여러개가 선택되는 문제가 발생할 때가 있다. (물론 의도할 때도 있지만...) 즉, 아래와 같이 라디오 버튼을 만들면, 10대 20대 30대 아래와 같이 여러개가 동시에 선택되는 것이다. 라디오 버튼은 보통, 특정 변수 하나에 특정 값 하나만 할당하기 위해 많이 사용한다. 이를 위해 name 속성을 활용하는 것으로 알고 있다. 즉, 라디오 버튼들의 name 속성을 모두 동일하게 주어야, 라디오 버튼 간에 연관성(?)이 확보되어 단 하나만 선택할 수 있게 된다. 아래처럼 name 속성을 동일하게 주면, 10대 20대 30대 아래처럼 단 하나만 다중택일 된다. 해결 완료! 2021. 1. 19.
[자바스크립트] 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.
[자바스크립트] 입력값 체크(한글, 영문, 특수문자, 공백 정규식 활용) 정규표현식의 기본/기초에 대한 쉽고 상세한 내용은 아래 글 참고 [자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코드) 정규표현식으로 입력값 체크 함수 정리 // 특수 문자 체크 function checkSpecial(str) { const regExp = /[!?@#$%^&*():;+-=~{}\_\[\]\|\\\"\'\,\.\/\`\₩]/g; if(regExp.test(str)) { return true; }else{ return false; } } // 한글 체크 function checkKor(str) { const regExp = /[ㄱ-ㅎㅏ-ㅣ가-힣]/g; if(regExp.test(str)){ return true; }else{ .. 2021. 1. 15.
HTTPS, SSL 인증서: 아주 쉽고 간단하면서도, 매우 상세한 정리. HTTPS, SSL 인증서: 쉬운! 간단한! 상세한! 정리. HTTPS 한줄 정리 공인된 '인증 기관'에게 내 서버의 '주민등록증'(SSL인증서)을 발급받고, '브라우저'와 통신할 때마다 제시하며 "나 인증받은 서버야." 라고 알리는 방식(HTTPS)이다. HTTPS 세줄 정리 인증서 발급: 공인된 '인증 기관'에게 내 서버의 '주민등록증'(인증서)을 발급받는다. 서버 인증: '브라우저'가 내 서버에 접속할 때마다, 인증서를 제시하며 "나 인증받은 서버야. 안전해!" 라고 알린다. 암호화 통신: '인증서'에 적힌 내 서버의 '주민번호'(key)로 데이터를 암호화하여 주고 받는다 이제부터는 HTTPS/SSL 관련 용어, 암호화 기법, 상세한 원리를 정리한다. 관련 용어 HTTP(Hypertext Trans.. 2021. 1. 10.
[자바스크립트] HTML 테이블(table) 행 추가 불가 이유, 해결 방법 appendChild()로 table 태그에 tr 행을 추가 하는게 불가능한 경우가 있다. 왜 안 되는지! 어떻게 해야하는지! 이유와 해결방법을 정리해 보려고 한다. 결론부터 말하면, table엘리먼트 자체 메서드인 insertRow(), insertCell() 등을 이용하면 된다. 일반적인 table 생성 방식 보통 table > tr > td(th) 구조로 테이블을 생성한다. 제목 내용 1 2 table 태그의 행 추가 안 되는 이유 table 태그는 자동으로 tbody가 자식 요소로 추가된다. 그래서 table 태그에 tr을 추가해도 행이 추가되지 않는다. table 태그에 행 추가하는 방법 #1 (노가다 방법) : appendChild()메서드를 통해 tbody 태그의 하위요소로 tr을 추가 //.. 2021. 1. 5.

티스토리툴바