아래처럼 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 |
PHP에서 CRUD 기능을 구축하던 중, 동작처리를 요청한 페이지가 호출 완료 된 후 브라우저를 닫지 않았을 경우에 중복으로 호출되는 문제가 발생하였습니다.
단순하게 동작이 완료 된 후에 다른 사이트로 강제 이동시키는 방법으로 뗌질(?)한 경험이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>페이지 자동 리다이렉트 테스트</title>
<style type="text/css">
::selection { background-color: #E13300; color: white; }
::-moz-selection { background-color: #E13300; color: white; }
body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
#body {
margin: 0 15px 0 15px;
}
#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
}
</style>
</head>
<body>
<div id="container">
<h1>Redirect Test</h1>
<div id="body">
<p>3초가 지나면 naver 사이트가 열립니다.</p>
</div>
</div>
<script>
// 시간 변수, setTimeout() 함수는 ms(밀리 초 = 1/1000 초)를 사용함
// ex) 3000ms = 3000 * 1/1000 = 3초
var time = 3000;
setTimeout(function(){
// ms시간 후에 진행 될 코드 작성
alert('3초지남');
location.href='https://www.naver.com';
}, time);
</script>
</body>
</html>
| 버튼 중복 클릭 방지하기 (0) | 2022.02.23 |
|---|
먼저 프레임워크 설치방법은 아래 글을 참고해주세요
| Codeigniter 설치 : https://motown.tistory.com/2 |
개발환경
1. codeigniter에 아래 링크에서 다운로드 받은 부트스트랩 무료 템플릿을 적용해보겠습니다.
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
2. WAMP 로컬서버 경로에 다운받은 Ci3 폴더를 복사해주고 이름을 폴더 이름을 'task'로 변경해줍니다.
3. 작업을 위해 Visual Studio Code에서 위 폴더를 열어줍니다.
4. 서버 접속 확인
http://localhost(:포트)/task/
템플릿 적용을 하기 위해 다운받은 템플릿의 'css, js' 소스와 이미지 같은 리소스를 불러와줘야 합니다.
1. 템플릿 가져오기
먼저 'task'경로 안에 템플릿을 저장할 'static'이라는 폴더를 생성해줍니다.
2. 복사할 템플릿 파일 확인
다운로드 받은 템플릿 파일 압축을 푼 후에 index.html 을 확인해보겠습니다.
index.html을 크롬에서 열면 템플릿 사이트를 확인 할 수 있습니다.
지금은 소스파일을 봐야하므로 우클릭 하여 '연결 프로그램'을 메모장이나, VS code 등의 에디터로 열어봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Dashboard</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>index.html의 <head>태그 부분을 살펴보겠습니다.
<link>태그 에 '*.css' 파일들을 불러온 것을 확인 할 수 있습니다.
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
</html>그리고 <body>태그 맨 밑 부분에 '*.js' 파일들을 불러 왔습니다.
index.html 파일처럼 템플릿을 불러오기위해 css, js 등의 파일들을 불러와줘야합니다.
이미지같은 리소스가 있는 템플릿이라면 이 역시 마찬가지구요.
3. 템플릿 파일을 Ci 3의 Static 폴더에 복사
템플릿 적용에 필요한 폴더들을 위에서 생성한 staic 폴더에 복사해줍니다.
템플릿 적용을 위한 준비가 되었습니다.
다음에 템플릿을 ci 3에 적용해보겠습니다.
| MSSQL과 연동, 쿼리 날려보기 (PHP with MSSQL) (0) | 2022.02.24 |
|---|---|
| [Codeigniter 기초] (2) MVC 컨트롤러와 뷰의 관계 (0) | 2022.02.23 |
| [php 기초] 출력 구문(함수) 차이... print가 함수다? (echo, print, print_r, var_dump ...) (0) | 2022.02.22 |
| [Windows - Codeigniter 3] 설치 (0) | 2022.02.21 |
| [Codeigniter 3] 컨트롤러의 페이지 생성 원리 기초 (0) | 2022.02.21 |