CSS
position
absolute | fixed | static | relative
초기화면
스크롤 이동 시 banana 이동하는 것을 확인 가능
<style type="text/css">
.a { background-color:yellow; width: 300px; height: 200px;
position: fixed; top: 300px; left: 300px;
}
.b { background-color:skyblue; width: 300px; height: 200px;
position: fixed; top: 150px; left: 150px;
}
.c { background-color:pink; width: 300px; height: 200px; }
.d { background-color:orange; width: 300px; height: 200px; }
</style>position: absolute : 위치를 강제적으로 지정할 수 있다.
position: fixed : 스크롤을 이동해도 위치가 고정된다.
<style type="text/css">
.a { background-color:yellow; width: 300px; height: 200px;
position: relative;
}
.b { background-color:skyblue; width: 300px; height: 200px;
position: relative; top: 80px; left: 80px;
}
.c { background-color:pink; width: 300px; height: 200px;
position: relative;
}
.d { background-color:orange; width: 300px; height: 200px;
position: relative;
}
</style>position: static : 디폴트값. 브라우저가 잡는 위치에 알아서 위치한다.
position: relative : 일단 static 에서 출발. static에서 결정된 위치를 기준으로 지정된 위치로 이동
z-index
<style type="text/css">
.a { background-color:yellow; width: 300px; height: 200px; z-index: 4; }
.b { background-color:skyblue; width: 300px; height: 200px;z-index: 3; }
.c { background-color:pink; width: 300px; height: 200px; z-index: 2; }
.d { background-color:orange; width: 300px; height: 200px; z-index: 1; }
</style>z-index : 요소를 겹치게 놓을 수 있으며 값이 클 수록 위로 올라오게 된다.
정규식
<!doctype html>
<html>
<head>
<script>
function abcd() {
// 영문자 소문자 한개로 시작, 0-3 한자리 그 다음은 숫자 3개
var b = new RegExp("[a-z][0123][0-9]{3}");
alert( b.test("x0346") ); // true
alert( b.test("x138") ); // false
alert( b.test("x1380") ); // true
}
</script>
</head>
<body onload="abcd();">
</body>
</html>var a = new RegExp("[1234][56]");
alert( a.test("15") );
alert( a.test("19") );
alert( a.test("45") );일때, [1234][56] 앞자리는 1, 2, 3, 4 중 하나 / 뒷자리 5, 6 중의 하나
이런식으로 문장의 패턴을 정하고, 문장이 패턴에 맞는지 검증할수 있는데
이러한 패턴을 정의하는 문장을 "정규식( Regular Expression )" 이라 한다.
Java
정규식
public class Test371 {
public static void main(String[] args) {
String ptn = "[1234][56]";
String val = "45";
boolean b = Pattern.matches(ptn, val);
System.out.println( b ); // true
System.out.println( Pattern.matches(ptn, "16") ); // true
System.out.println( Pattern.matches(ptn, "x16") ); // false
System.out.println( Pattern.matches("x[1234][56]", "x16") ); // true
System.out.println( Pattern.matches("x[1234]?[56]", "x6") ); // true
System.out.println( Pattern.matches("x[1234]?[56]", "x36") ); // true
System.out.println( Pattern.matches("x[1234]?[56]", "x346") ); // false
System.out.println( Pattern.matches("x[1234]+[56]", "x34121436") ); // true
// 휴대폰 번호가 맞는지 아닌지 정규식을 이용해 검증
System.out.println( Pattern.matches("010-[0-9]{4}-[0-9]{4}", "010-1234-5678") ); // true
// 정규식을 적을때 ^로 시작하고 $로 끝난다. 공식처럼 생각
System.out.println( Pattern.matches("^010-[0-9]{4}-[0-9]{4}$", "010-1234-5678") ); // true
// 한글로만 이루어진 데이터
System.out.println( Pattern.matches("^[가-힣]*$", "김수한무거북이와두루미삼천갑자동방삭") ); // true
}
}x[1234] : 이건 x 가 하나 무조건 오고, 그 다음 1,2,3,4 선택적으로 하나
바로 앞 요소에 대해
? : 0 또는 1개 존재
* : 0개 이상 존재
+ : 1개 이상 존재
