<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- // 반응형 웹을 만들기 위해서 위의 줄이 꼭 필요 -->
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 30px auto;
border: 3px dotted #333;
padding: 10px;
background: green;
}
/* 브라우저의 너비가 0~600 인 경우는 박스를 사라지게 하고 싶음.*/
@media (max-width:600px) {
.box {
display: none;
}
}
</style>
</head>
<body>
<h3>반응형 웹</h3>
<p> 미디어 쿼리 : 각 미디어 메체에 따라 다른 스타일을 적용할 수 있게 만드는 것</p>
<div class="box"></div>
</body>
</html>
- max-width : 데스크탑의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 css 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function readFile(inputs) {
if(! inputs.value) {
return;
}
var f = inputs.files[0];
var reader = new FileReader(); // 파일의 내용을 읽을 수 있는 기능 제공
reader.onload = function(e) { // 읽어 들이기에 성공할 때 호출되는 이벤트 핸들러
console.log(e.target.result); // result : 파일의 내용
};
reader.readAsText(f); // utf-8
// reader.readAsTest(f, "euc-kr"); // euc-kr
}
</script>
</head>
<body>
<h3> text File 읽기</h3>
<div>
<form name="frm">
<p>
<input type="file" name="selectFile" accept="text/*"
onchange="readFile(this)">
</p>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var p, s;
// 1. 리터널 방식 : 파라미터에 따옴표를 사용하지 않는다.
p = /ab+c/i; // + : 앞문자 1개 이상, i:대소문자를 구분하지 않음
// ac(X), abbc(O), ab(X), a1bc(X), xy abc 12(o)
s = 'xy abc 12';
console.log( p.test(s) );
// 2. 생성자 방식
p = new RegExp('ab+c', 'i');
s = 'xy Abc 12';
console.log(p.test(s));
</script>
</head>
<body>
<h3>정규식(Regular Expression) - 정규식 생성방법</h3>
</body>
</html>
flag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var p, s;
// g : global match - 일치하는 모든 문자 검색. 치환할 때 유용
// i : ignore case - 대소문자 구문안함
p = /[a-d]+/;
s = '12ax';
console.log( p.test(s) ); // true
s = '12Ax';
console.log( p.test(s) ); // false
p = /[a-d]+/i;
s = '12ax';
console.log( p.test(s) ); // true
s = '12Ax';
console.log( p.test(s) ); // true
s = "web 자바 jsp 자바 html 자바";
p = /자바/;
var a = s.replace(p, 'java');
console.log(a); // web java jsp 자바 html 자바
p = /자바/g;
var a = s.replace(p, 'java');
console.log(a); // web java jsp java html java
</script>
</head>
<body>
<h3>정규식(Regular Expression) - flag </h3>
</body>
</html>
패턴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var p, s;
p = /a.s/;
s = "abs";
console.log( p.test(s) ); // true
s = "as";
console.log( p.test(s) ); // false
// .* : 모든 문자
// 자바로 시작
p = /^자바.*/; // .은 반드시 한글자 *은 앞에있는 글자가 0개 이상
s = "자바 사랑";
console.log( p.test(s) ); // true
s = "이자바";
console.log( p.test(s) ); // false
//자바로 끝
p = /.*자바$/; // .은 반드시 한글자 *은 앞에있는 글자가 0개 이상
s = "자바 사랑";
console.log( p.test(s) ); // false
s = "이자바";
console.log( p.test(s) ); // true
// 자바로 시작하고 웹으로 끝나는 모든 문자
p = /^자바.*웹$/;
s = "자바 스프링 웹";
console.log( p.test(s) ); // true
s = '자바 웹 스프링';
console.log( p.test(s) ); // false
s = "자바웹";
console.log( p.test(s) ); // true
// 한자리 숫자
// p = /\d{1}/; // a1b 도 됨. a13ba1도 됨.
// p = /^\d{1}$/;
p = /^[0-9]$/;
s = '7';
console.log( p.test(s) ); // true
s = '77';
console.log( p.test(s) ); // false
// 한자리 이상 숫자
// p = /^\d{1,}$/;
// p = /^(\d)+$/;
p = /^[0-9]+$/;
s = '12';
console.log( p.test(s) ); // true
s = '+12';
console.log( p.test(s) ); // false
// 한자리 이상 숫자(부호가능, 소수점 가능)
p = /^[+-]?\d+(\.?\d*)$/; // +-는 와도되고 안와도되고.
s = '12';
console.log( p.test(s) ); // true
s = '+12.5';
console.log( p.test(s) ); // true
s = '+12';
console.log( p.test(s) ); // true
// 1~3자리 자연수
p = /^\d{1,3}$/;
s = '123';
console.log( p.test(s) );
s = '1233';
console.log( p.test(s) );
</script>
</head>
<body>
<h3>정규식(Regular Expression) - 패턴</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var p, s;
// 1자 이상의 영숫자
// p = /^[a-z0-9]+$/i;
p = /^[a-zA-Z0-9]+$/;
//1자 이상의 영숫자, _
p = /^\w+$/;
// 영문, 띄어쓰기만 가능
p = /^[a-zA-Z\s]+$/;
s = 'a b';
console.log( p.test(s) ); // true
s = 'a 1';
console.log( p.test(s) ); // false
s = ' ';
console.log( p.test(s) ); // true
// 영문으로 시작하고 영문, 띄어쓰기만
p = /^(?=[a-z])[a-z\s]+$/i;
s = 'a b';
console.log( p.test(s) ); // true
s = ' ';
console.log( p.test(s) ); // false
// 자바, 웹, java, web 중 하나라도 존재 여부(영문은 대소문자 구분안함)
p = /(자바|웹|java|web)/i;
s = '스프링 오라클 서블릿';
console.log( p.test(s) ); // false
s = '스프링 오라클 web';
console.log( p.test(s) ); // true
// 0자 이상 한글
// p = /^[가-힣]*$/;
p = /^[\uac00-\ud7a3]*$/;
// 1자 이상 한글
p = /^[가-힣]+$/;
// 이미지 파일
p = /(\.gif|\.jpg|\.jpeg|\.png)$/i;
</script>
</head>
<body>
<h3>정규식(Regular Expression) - 패턴</h3>
</body>
</html>
