저번에는 Javascript를 간단히 맛보았다.
버튼사용, alert메세지띄우기, form전송에 대하여 간단한 수준이였지만
오늘은 확실히 조금 더 심화되어 Checkbox , Select, Radio, 배열, 문자열에 대하여 배웠고
css는 의미만 이해한 상태에서 예제 1개정도 진행하였다.
- CSS 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)
W3C의 표준을 지키며, 높은 자유도로 레이아웃과 스타일을 정의할 수 있다.
HTML이 웹사이트의 몸체를 담당한다면 CSS는 꾸미는 역할을 담당한다.
즉! HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
Javscript / CSS를 다시 정의하자면
HTML문서안에 동적기능을 부가하는 Javascript와 디자인을 담당하는 CSS가 있다!
10여 년 전 웹사이트를 만들 때는 생각해보니 Flash를 굉장히 많이 다뤘는 데
요즘 안쓰는 이유는 CSS덕분이 아닐까 싶다.
CSS 사용방법
CSS 또한 javascript와 크게 다를 건 없다.
ex) <head> <style> css코드 </style></head>
CSS 사용방법
CSS 또한 javascript와 크게 다를 건 없다.
ex) <head> <style> css코드 </style></head>
<head>
<meta charset="UTF-8">
<title>css basic</title>
<style>
body{
background-color: yellow;
font-size: large;
font-style: italic;
}
</style>
</head>
| cs |
ex) 외부 css파일 링크하여 사용
<head>
<meta charset="UTF-8">
<title>css basic</title>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
| cs |
ex) home.css
body { <- HTML문서 body부분
background-color: yellow;
배경화면 컬러
font-size: large;
글씨크기
font-style: italic;
글씨체 기울임
}
table, td { <-테이블, td칸
border: 1px solid black;
두께 스타일 컬러
}
td { <- 테이블 td칸
padding: 15px;
td칸 여백
}
| cs |
- Javascript 예제
ex) 문자열 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 문자열</title>
<script type="text/javascript">
function testStr() {
var name1 = "아이유";
name1.length; <- 문자열 길이
var name2 = "아이고";
name1==name2; <- 문자열 비교
var name3 = "오진석부반장님";
name3.substring(1,6)); <- 부분 추출 : 진석부반장
var age1 = 25;
var age2 = "25";
age1 == age2; <- true : 비권장
age1 === age2; <- false : 데이터와 타입을 비교
var age3 = parseInt(age2); <- 문자열 25를 정수형으로 변환
age3 === age1; <- 데이터와 타입 비교 true
var data = " 손흥민 ";
data.trim().length; <- trim() 문자열 양여백 제거
}
</script>
</head>
<body>
<input type="button" value="확인" onclick="testStr()">
</body>
</html>
| cs |
ex) Array +Checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript checkbox</title>
<script type="text/javascript">
function testCheckbox() {
checkbox 는 다중선택 가능하므로 아래처럼 선택한 값을 반환받을 수 없다
-> 배열을 이용한다
var fri = document.friendForm.friend;
fri.length; <- checkbox가 3개이므로 length 는 3
fri[0].value; <- 배열요소의 값 출력 - 박보검
fri[0].checked; <- 체크 여부를 true false로 반환
fri[1].checked = true; <- 인덱스 1 ( 두번째 ) 체크박스 체크상태로 할당
}
</script>
</head>
<body>
<form name="friendForm">
<input type="checkbox" name="friend" value="박보검">박보검<br>
<input type="checkbox" name="friend" value="손재만">손재만<br>
<input type="checkbox" name="friend" value="송중기">송중기<br>
<input type="button" value="선택" onclick="testCheckbox()">
</form>
</body>
</html>
| cs |
ex) Radio + Select
<title>Javascript Radio</title>
<script>
function choiceFriend() {
var fr = document.friendForm.friend;
if (fr.value == "")
alert("친구를 선택하세요!");
else {
alert(fr.value + " 찜!!");
document.friendForm.reset();
}
}
</script>
</head>
<body>
<form name="friendForm">
<input type="radio" name="friend" value="박보검">박보검<br>
<input type="radio" name="friend" value="손재만">손재만<br>
<input type="radio" name="friend" value="공유">공유<br>
<input type="button" value="찜하기" onclick="choiceFriend()">
</form>
</body>
-------------------------------------------------------------------
<title>Javascript Select</title>
<script>
function testSelect() {
var lineComp = document.subwayForm.line;
if (lineComp.value == "") {
alert("호선을 선택하세요!");
} else {
alert(lineComp.value + "호선을 선택하셨습니다!");
document.subwayForm.reset();
}
}
</script>
</head>
<body>
<form name="subwayForm">
<select name="line">
<option value="">----</option>
<option value="1">1호선</option>
<option value="2">2호선</option>
<option value="3">3호선</option>
</select>
<input type="button" value="선택" onclick="testSelect()">
</form>
</body>
| cs |
ex) 외부 Javasciprt 사용하기
<head>
# head 태그안에
<script type="text/javascript" src="외부.js"></script>
</head>
| cs |
Servlet도 간단히 맛보긴 했지만... 내일 제대로 한 후 리뷰를..
0 개의 댓글:
댓글 쓰기