아래처럼 pattern 속성값을 추가해줍니다 (출처 : 출처: https://kcmschool.com/184 [web sprit])
<input type="number" pattern="\d*">
| css 적용이 바로바로 안 될 때 (0) | 2022.03.28 |
|---|---|
| [BootStrap] Free template (부트스트랩 무료 템플릿) (0) | 2022.02.23 |
| 티스토리 배경화면만 투명하게 하기! (0) | 2022.02.21 |
간혹 css를 아무리 변경해도 바로 적용이 안 되는 경우가 있습니다.
서버 스크립트 문제인가 싶어서 설정을 해봐도 적용이 되지 않았는데, 크롬에서 시크릿모드로 호출시 바로 적용이 되더라구요.
여기서 브라우저 캐시문제라고 예상되어 해결책을 찾아봤는데 생각보다 간단했습니다.
<link href="<?php echo base_url(); ?>static/css/sb-admin-2.css?after" rel="stylesheet">css link 경로에서 css끝에 아무 파라미터만 연결해주면 됩니다.
위에서는 경로에 '?after'라는 파라미터를 추가해 주니 바로 반영이 잘 되었습니다.
브라우저가 다른 css를 인식하게 해주는 방법 중 하나인데요, 아래 블로그 글에서 참고하여 잘 해결하였습니다.
감사합니다.
| 모바일에서 숫자 키보드가 안 될 때 (0) | 2022.04.14 |
|---|---|
| [BootStrap] Free template (부트스트랩 무료 템플릿) (0) | 2022.02.23 |
| 티스토리 배경화면만 투명하게 하기! (0) | 2022.02.21 |
submit이나 button에 동작이 걸려있는 경우, 여러번 클릭했다가 동작이 여러번 처리되는 경우가 종종 발생합니다.
간단하게 버튼이 한 번만 눌릴 수 있게 하는 방법을 소개하겠습니다.
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE> 중복클릭방지! </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
</HEAD>
<BODY>
<form name="form">
<input type="submit" id="button1" value="등록" onclick="OnlyOneClick();">
</form>
</BODY>
<script>
var once = true; // 최초 1회
function OnlyOneClick() {
if (once) {
once = false; // 1회 들어오고 그 다음은 막는다.
return true; // 최초 1회 return 은 true
} else {
return false; // 2회 부터 false
}
}
var id = document.getElementById('button1');
id.addEventListener('click', function () {
var ooc = OnlyOneClick(); // 1회에는 true 를 return 받고 그 다음은 false
if (ooc) {
console.log('입장');
} else {
//alert("이미 등록 되었습니다.")
console.log('입장불가')
document.getElementById('button1').disabled = true;
}
})
</script>
</HTML>자바스크립트에서 'button1' 이라는 id를 가진 버튼이 한 번만 눌리더라도 바로 비활성화되게 처리하였습니다.
(ps. 오래 전에 어느 블로그에서 참고하여 회사 사이트에 적용한 로직인데 블로그를 찾지 못하였읍니다 ㅜㅜ)
| setTimeout 함수와 페이지 자동 이동 (0) | 2022.02.23 |
|---|
많은 Front-End Framework가 있지만 사용자도 많고 접근성이 좋은 Bootstrap을 활용해보겠습니다.
무료 템플릿을 제공하는 사이트가 많이 있는데 제가 자주 이용하는 사이트는 아래 링크에 연결해놨습니다.
Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap
Landing Page A clean, functional landing page theme
startbootstrap.com
접속 후 아래 화면처럼 원하시는 카테고리를 선택 할 수 있습니다.
학습이나 회사 내부 사이트를 구축할 때 아래의 'SB Admin 2'라는 무료템플릿을 자주 이용합니다.
다음에 이 템플릿을 서버(웹 사이트)에 어떻게 적용할지 알아보겠습니다
https://startbootstrap.com/theme/sb-admin-2
SB Admin 2 - Free Bootstrap Admin Theme - Start Bootstrap
Like our free products? Our pro products are even better! Go Pro Today!
startbootstrap.com
| 모바일에서 숫자 키보드가 안 될 때 (0) | 2022.04.14 |
|---|---|
| css 적용이 바로바로 안 될 때 (0) | 2022.03.28 |
| 티스토리 배경화면만 투명하게 하기! (0) | 2022.02.21 |
Content 부분만 은은한 배경화면 구성을 해봤읍니다.
블로그관리 > 스킨편집 > html 편집
위 순서로 접근 하신 후 '파일업로드 > + 추가' 버튼을 눌러 원하는 배경화면을 추가해줍니다.
그 다음 파일업로드 옆 'CSS'을 선택하여 Ctrl + F로 'content-inner' 검색을해보면 Content관련된 클래스가 있으며 아래처럼 수정을 해주면 배경화면이 반영됩니다.
/*
* content
*/
#content { margin: 0 0 0 330px; padding: 0; }
#content-inner { max-width: 1030px; width: 100%; padding-right: 30px;
position: relative;
}
#content-inner::before {
background-color: #ffffff;
content: "";
background-image: url(https://tistory2.daumcdn.net/tistory/4854076/skin/images/header_new222.png);
opacity: 0.1;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}#content-inner::befor 을 생성하여 배경화면에 투명값(Opacity)를 넣을 경우 텍스트 포함한 전체가 투명해지기 때문에 'before'라는 가상박스를 활용하여 투명해지는 부분을 분리하였습니다.
(참고 : https://ddorang-d.tistory.com/89)
| 모바일에서 숫자 키보드가 안 될 때 (0) | 2022.04.14 |
|---|---|
| css 적용이 바로바로 안 될 때 (0) | 2022.03.28 |
| [BootStrap] Free template (부트스트랩 무료 템플릿) (0) | 2022.02.23 |