[Web]html, javascript 잡동사니
🐐 내가 힘들어서 찾아봤던 자바스크립트, HTML, CSS 잡동사니
Html 태그니 뭐니 정규식이니, 입력 조건에따른 값이니,
Jquery문법이니 등등 자주 찾는건 다 적어놓을련다.
🕵🏽♂️ HTML Tag
input tag
숫자만
<input type="number" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
한글만
<input type="text" oninput="this.value=this.value.replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,'');">
영어만
<input type="text" oninput="this.value=this.value.replace(/[^a-zA-Z]/g,'');">
영어, 숫자만
<input type="text" oninput="this.value=this.value.replace(/[^a-zA-Z0-9]/g,'');">
영어, 숫자, 특수문자만
<input type="text" oninput="this.value=this.value.replace(/[^a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'');">
공백제거
<input type="text" oninput="this.value=this.value.replace(/(\s*)/g,'');">
공백제거, 특수문자만
<input type="text" oninput="this.value=this.value.replace(/(\s*)/g,'').replace(/[^a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'');">
공백제거, 영어, 숫자, 특수문자만
<input type="text" oninput="this.value=this.value.replace(/[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'').replace(/(\s*)/g,'').replace(/[^a-zA-Z0-9]/g,'');">
특수문자, 공백제거, 영어, 숫자만, 한글만
<input type="text" oninput="this.value=this.value.replace(/[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'').replace(/(\s*)/g,'').replace(/[^a-zA-Z0-9]/g,'').replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,'');">
전화번호
<input type="text" oninput="this.value=this.value.replace(/(\s*)/g,'').replace(/[^a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'').replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,'').replace(/[^a-zA-Z0-9]/g,'').replace(/[^0-9]/g,'');">
주민등록번호
<input type="text" oninput="this.value=this.value.replace(/(\s*)/g,'').replace(/[^a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'').replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,'').replace(/[^a-zA-Z0-9]/g,'').replace(/[^0-9]/g,'').replace(/[^-]/g,'');">
주민등록번호, 휴대전화번호, 이메일
<input type="text" oninput="this.value=this.value.replace(/(\s*)/g,'').replace(/[^a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]/g,'').replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,'').replace(/[^a-zA-Z0-9]/g,'').replace(/[^0-9]/g,'').replace(/[^-]/g,'').replace(/[^-]/g,'').replace(/[^@]/g,'');">
Table Tag
Table Header, Footer
| Header |
|---|
| Body |
| Footer |
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
</tr>
</tfoot>
</table>
HTML Table all option add example
| No | Name | ID | Phone | Address | Date | Action | |
|---|---|---|---|---|---|---|---|
| No | Name | ID | Phone | Address | Date | Action | |
| 1 | Mark | mark | mark gmail.com | 010-1234-5678 | Seoul | 2019-01-01 | View Edit Delete |
| 2 | Mark | mark | mark gmail.com | 010-1234-5678 | Seoul | 2019-01-01 | View Edit Delete |
<table border="1" width="100%" cellspacing="0" cellpadding="0" align="center">
<caption>HTML Table all option add example</caption>
<colgroup>
<col width="5%">
<col width="15%">
<col width="10%">
<col width="15%">
<col width="10%">
<col width="15%">
<col width="15%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Name</th>
<th scope="col">ID</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Address</th>
<th scope="col">Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">No</th>
<td>Name</td>
<td>ID</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Date</td>
<td>Action</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>mark</td>
<td>
<a href="mailto:">
<span class="hide">mark</span>
<span class="hide">gmail.com</span>
</a>
</td>
<td>010-1234-5678</td>
<td>Seoul</td>
<td>2019-01-01</td>
<td>
<a href="#">View</a>
<a href="#">Edit</a>
<a href="#">Delete</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>mark</td>
<td>
<a href="mailto:">
<span class="hide">mark</span>
<span class="hide">gmail.com</span>
</a>
</td>
<td>010-1234-5678</td>
<td>Seoul</td>
<td>2019-01-01</td>
<td>
<a href="#">View</a>
<a href="#">Edit</a>
<a href="#">Delete</a>
</td>
</tr>
</tbody>
</table>
Table add column
| Header |
|---|
| Body |
| Footer |
<button type="button" id="addColumnBtn">
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
</tr>
</tfoot>
</table>
var addColumnBtn = document.getElementById('addColumnBtn');
addColumnBtn.addEventListener('click', function() {
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr');
var td = tr[0].getElementsByTagName('td');
var tdLength = td.length;
var tdLength = td.length;
for (var i = 0; i < tr.length; i++) {
var newTd = document.createElement('td');
newTd.innerHTML = 'New Column';
tr[i].appendChild(newTd);
}
});
// table add column function
function addColumn() {
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr');
var td = tr[0].getElementsByTagName('td');
var tdLength = td.length;
var tdLength = td.length;
for (var i = 0; i < tr.length; i++) {
var newTd = document.createElement('td');
newTd.innerHTML = 'New Column';
tr[i].appendChild(newTd);
}
}
Table Delete last row
<button type="button" id="deleteRowBtn">
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
</tr>
</tfoot>
</table>
var deleteRowBtn = document.getElementById('deleteRowBtn');
deleteRowBtn.addEventListener('click', function() {
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr');
var trLength = tr.length;
table.deleteRow(trLength - 1);
});
// table delete last row function
function deleteRow() {
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr');
var trLength = tr.length;
table.deleteRow(trLength - 1);
}
Table 5row 5col button click Delete this row
Modal
Bootstrap Modal show hide
<button id="modalOpenBtn">
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#modalOpenBtn').click(function(){
$('#modal').modal('show');
});
$('#modal .close').click(function(){
$('#modal').modal('hide');
});
Form
회원가입 Form
<form>
<div class="form-group">
<label for="id">아이디</label>
<input type="text" class="form-control" id="id" placeholder="아이디를 입력해주세요.">
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해주세요.">
</div>
<div class="form-group">
<label for="passwordConfirm">비밀번호 확인</label>
<input type="password" class="form-control" id="passwordConfirm" placeholder="비밀번호를 다시 입력해주세요.">
</div>
<div class="form-group">
<label for="name">이름</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력해주세요.">
</div>
<div class="form-group">
<label for="email">이메일</label>
<input type="email" class="form-control" id="email" placeholder="이메일을 입력해주세요.">
</div>
<div class="form-group">
<label for="phone">전화번호</label>
<input type="tel" class="form-control" id="phone" placeholder="전화번호를 입력해주세요.">
</div>
<div class="form-group">
<label for="address">주소</label>
<input type="text" class="form-control" id="address" placeholder="주소를 입력해주세요.">
</div>
<div class="form-group">
<label for="addressDetail">상세주소</label>
<input type="text" class="form-control" id="addressDetail" placeholder="상세주소를 입력해주세요.">
</div>
<div class="form-group">
<label for="birthday">생년월일</label>
<input type="date" class="form-control" id="birthday" placeholder="생년월일을 입력해주세요.">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="agree">
<label class="form-check-label" for="agree">
개인정보 수집 및 이용에 동의합니다.
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">회원가입</button>
</form>
Nav Tabs
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
🕵🏽♂️ JavaScript
현재시간
function getTime() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clock.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
function init() {
getTime();
setInterval(getTime, 1000);
}
function Time() {
let date = new Date();
date.setHours(date.getHours() + 9);
let dateString = date.toISOString().replace('T', ' ').substring(0, 19)+'.000';
}
버블링
-
- 버블링이란? 이벤트가 발생했을 때, 이벤트가 일어난 요소에서 시작해서 부모 요소로 전파되는 것을 의미한다.
-
- 이벤트가 발생하면 일단 이벤트가 일어난 요소에서 이벤트를 처리하고, 부모 요소로 이벤트를 전파한다. 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없으면 그 다음 부모 요소에서 이벤트를 처리한다. 이런 식으로 이벤트가 발생한 요소의 부모 요소를 거슬러 올라가면서 이벤트를 처리하는 것을 버블링이라고 한다.
-
- 이벤트 버블링은 이벤트가 발생한 요소에서 이벤트를 처리하고, 부모 요소로 이벤트를 전파하는 과정을 거치며, 이벤트가 발생한 요소의 부모 요소를 거슬러 올라가면서 이벤트를 처리한다.
-
- 이벤트 버블링을 이용하면 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없어도, 부모 요소에서 이벤트를 처리할 수 있는 핸들러가 있다면 이벤트를 처리할 수 있다. 이벤트 버블링을 이용하면 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없어도, 부모 요소에서 이벤트를 처리할 수 있는 핸들러가 있다면 이벤트를 처리할 수 있다.
버블링 막기
// 버블링 막기
event.stopPropagation();
// example
const $button = document.querySelector('button');
const $input = document.querySelector('input');
$button.addEventListener('click', (event) => {
console.log('button');
event.stopPropagation();
});
$input.addEventListener('click', (event) => {
console.log('input');
});
캡처링
- 캡처링이란? 이벤트가 발생했을 때, 이벤트가 일어난 요소에서 시작해서 자식 요소로 전파되는 것을 의미한다.
- 이벤트가 발생하면 일단 이벤트가 일어난 요소에서 이벤트를 처리하고, 자식 요소로 이벤트를 전파한다. 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없으면 그 다음 자식 요소에서 이벤트를 처리한다. 이런 식으로 이벤트가 발생한 요소의 자식 요소를 거슬러 내려가면서 이벤트를 처리하는 것을 캡처링이라고 한다.
- 이벤트 캡처링은 이벤트가 발생한 요소에서 이벤트를 처리하고, 자식 요소로 이벤트를 전파하는 과정을 거치며, 이벤트가 발생한 요소의 자식 요소를 거슬러 내려가면서 이벤트를 처리한다.
- 이벤트 캡처링을 이용하면 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없어도, 자식 요소에서 이벤트를 처리할 수 있는 핸들러가 있다면 이벤트를 처리할 수 있다. 이벤트 캡처링을 이용하면 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없어도, 자식 요소에서 이벤트를 처리할 수 있는 핸들러가 있다면 이벤트를 처리할 수 있다.
캡처링 예시
클릭시 alert과 console.log 출력된다.
<!DOCTYPE html>
<body>
<div id="capturing_div1" style="width: 100px; height: 100px; background-color: #ff0;">
<div id="capturing_div2" style="width: 80px; height: 80px; background-color: #0f0;">
<div id="capturing_div3" style="width: 60px; height: 60px; background-color: #00f;">
</div>
</div>
</div>
</body>
</html>
var div1 = document.getElementById('capturing_div1');
var div2 = document.getElementById('capturing_div2');
var div3 = document.getElementById('capturing_div3');
div1.addEventListener('click', function (event) {
console.log('capturing_div1');
alert('capturing_div1');
}, true);
div2.addEventListener('click', function (event) {
console.log('capturing_div2');
alert('capturing_div2');
}, true);
div3.addEventListener('click', function (event) {
console.log('capturing_div3');
alert('capturing_div3');
}, true);
캡처링 example result
capturing_div1
capturing_div2
capturing_div3
이벤트 위임
- 이벤트 위임이란? 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없으면, 부모 요소로 이벤트를 위임하는 것을 의미한다.
- 이벤트 위임을 이용하면 이벤트가 발생한 요소에서 이벤트를 처리할 수 있는 핸들러가 없어도, 부모 요소에서 이벤트를 처리할 수 있는 핸들러가 있다면 이벤트를 처리할 수 있다.
이벤트 위임 예시
<!DOCTYPE html>
- Item 1(클릭)
- Item 2(클릭)
- Item 3(클릭)
- Item 4(클릭)
- Item 5(클릭)
var list = document.getElementById('parent-list');
list.addEventListener('click', function(e) {
if (e.target && e.target.nodeName == 'LI') {
console.log('List item ', e.target.id.replace('post-', ''), ' was clicked!');
e.target.style.backgroundColor = 'red';
}
});
Dropzone.js
참고 : https://www.dropzonejs.com/
참고 : 이미지-파일-업로드-드래그-앤-드롭-라이브러리-사용법
파일을 여기에 끌어다 놓으세요
.jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF 만 가능합니다.
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<div class="dropzone" id="LED_dropzone">
<div class="dz-message" data-dz-message>
<span>파일을 여기에 끌어다 놓으세요</span>
<p>.jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF 만 가능합니다.</p>
</div>
</div>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
let addedFiles = [];
Dropzone.autoDiscover = false; // deprecated 된 옵션. false로 해놓는걸 공식문서에서 명시
const dropzone = new Dropzone('#LED_dropzone', {
url: '/api/upload', // 파일을 업로드할 서버 주소 url.
method: 'post', // 기본 post로 request 감. put으로도 할수있음
/*
headers: {
// 요청 보낼때 헤더 설정
Authorization: 'Bearer ' + token, // jwt
},
*/
//previewsContainer: '#LED_dropzone', // 드롭존 영역을 .dropzone이 아닌 다른 엘리먼트에서 하고싶을때
autoProcessQueue: false, // 자동으로 보내기. true : 파일 업로드 되자마자 서버로 요청, false : 서버에는 올라가지 않은 상태. 따로 this.processQueue() 호출시 전송
clickable: true, // 클릭 가능 여부
autoQueue: false, // 드래그 드랍 후 바로 서버로 전송
createImageThumbnails: true, //파일 업로드 썸네일 생성
thumbnailHeight: 120, // Upload icon size
thumbnailWidth: 120, // Upload icon size
maxFiles: 10, // 업로드 파일수
maxFilesize: 100, // 최대업로드용량 : 100MB
paramName: 'image', // 서버에서 사용할 formdata 이름 설정 (default는 file)
parallelUploads: 10, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 넘긴다.)
uploadMultiple: true, // 다중업로드 기능
timeout: 300000, //커넥션 타임아웃 설정 -> 데이터가 클 경우 꼭 넉넉히 설정해주자
addRemoveLinks: true, // 업로드 후 파일 삭제버튼 표시 여부
dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
acceptedFiles: '.jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF', // 이미지 파일 포맷만 허용
init: function () {
// 최초 dropzone 설정시 init을 통해 호출
console.log('최초 실행');
let LED_Dropzone = this; // closure 변수 (화살표 함수 쓰지않게 주의)
// 서버에 제출 submit 버튼 이벤트 등록
document.querySelector('#LED_submitBtn').addEventListener('click', function () {
console.log('업로드');
// 거부된 파일이 있다면
if (LED_Dropzone.getRejectedFiles().length > 0) {
let files = LED_Dropzone.getRejectedFiles();
console.log('거부된 파일이 있습니다.', files);
return;
}
LED_Dropzone.processQueue(); // autoProcessQueue: false로 해주었기 때문에, 메소드 api로 파일을 서버로 제출
});
// 파일이 업로드되면 실행
this.on('addedfile', function (file) {
// 중복된 파일의 제거
if (this.files.length) {
// -1 to exclude current file
var hasFile = false;
for (var i = 0; i < this.files.length - 1; i++) {
if (
this.files[i].name === file.name &&
this.files[i].size === file.size &&
this.files[i].lastModifiedDate.toString() === file.lastModifiedDate.toString()
) {
hasFile = true;
this.removeFile(file);
}
}
if (!hasFile) {
addedFiles.push(file);
}
} else {
addedFiles.push(file);
}
});
// 업로드한 파일을 서버에 요청하는 동안 호출 실행
this.on('sending', function (file, xhr, formData) {
console.log('보내는중');
});
// 서버로 파일이 성공적으로 전송되면 실행
this.on('success', function (file, responseText) {
console.log('성공');
});
// 업로드 에러 처리
this.on('error', function (file, errorMessage) {
alert(errorMessage);
});
// 삭제버튼 클릭시 실행
this.on('removedfile', function (file) {
console.log('삭제');
var index = addedFiles.indexOf(file);
if (index >= 0) {
addedFiles.splice(index, 1);
}
});
},
}); // dropzone end
🕵🏽♂️ CSS
사용된 색상
#9688F2
#7EBCF2
#6AD991
#F25050
#F2F2F2
사용된 이모지
🦝🐐🕵🏽♂️
Note: 만들고나니 내것이 아니었다.
Leave a comment