728x90
수업내용
1교시 (09:30-10:20)
- mem_2.html ←데이터 주고받기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 폼</title>
<!-- 디바이스에 최적화된 크기로 출력됨 --------------------------------------->
<meta name="viweport" content="width=device-width, iitail-scale=1">
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- 다음 주소록 OPEN API CDN 불러오기 ----------------------------------->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("ready >>> : ");
/*====== memForm 태그 START ==========================================*/
// memForm 태그에 바인딩 된 데이터 jsp 로 보내기
$("#memInsertBtn").click(function(){
alert("mzone_btn >>> : ");
console.log("mzone_btn >>> : ");
// var mname = document.memForm.mname;
// alert("mname >>> : " + mname);
// selected
var mhp = document.memForm.mhp;
alert("mhp >>> : " + mhp);
var mhp_length = mhp.length;
alert("mhp_length >>> : " + mhp_length);
var mhpid = document.getElementById("mhp");
alert("mhpid >>> : " + mhpid);
var mhpid_length = mhpid.length;
alert("mhpid_length >>> : " + mhpid_length);
var mhpname = document.getElementsByName("mhp");
alert("mhpname >>> : " + mhpname);
var mhpname_length = mhpname.length;
alert("mhpname_length >>> : " + mhpname_length);
var mhpname_0 = mhpname[0]
alert("mhpname_0 >>> : " + mhpname_0);
var mhpname_0_length = mhpname_0.length;
alert("mhpname_0_length >>> : " + mhpname_0_length);
var mhpname0 = document.getElementsByName("mhp")[0];
alert("mhpname0 >>> : " + mhpname0);
var mhpname0_length = mhpname0.length;
alert("mhpname0_length >>> : " + mhpname0_length);
// var memail2 = document.memForm.memail2;
// alert("memail2 >>> : " + memail2);
// checked
// var mgender = document.memForm.mgender;
// alert("mgender >>> : " + mgender);
// var mhobby = document.memForm.mhobby;
// alert("mhobby >>> : " + mhobby);
$("#memForm")
.attr({
"action":"#",
"method":"GET",
"enctype":"application/x-www-form-urlencoded"
})
.submit();
});
});
</script>
<style type="text/css">
/*====== div START ==========================================*/
div {
margin: 50px 0px 0px 100px;
}
/*====== div END ==========================================*/
</style>
</head>
<body>
<div>
<h3>회원 가입</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
<td colspan="2">회원 가입</td>
</tr>
<tr>
<td>회원번호</td>
<td><input type="text" name="mnum" id="mnum" readonly /></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="mname" id="mname" /></td>
</tr>
<tr>
<td>아이디</td>
<td>
<input type="text" name="mid" id="mid" placeholder="아이디체크" />
<input type="button" name="midCheck" id="midCheck" value="아이디중복확인" />
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input type="text" name="mpw" id="mpw" style="width:100px"/><br>
<input type="text" name="mpw_r" id="mpw_r" placeholder="비밀번호확인" style="width:100px"/>
<input type="button" name="mpwCheck" id="mpwCheck" value="비밀번호확인">
</td>
</tr>
<tr>
<td>핸드폰</td>
<td>
<select name="mhp" id="mhp" style="width:50px;">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
</select>
- <input type="text" name="mhp1" id="mhp1" maxlength="4" style="width:50px;"/>
- <input type="text" name="mhp2" id="mhp2" maxlength="4" style="width:50px;"/>
</td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" name="memail" id="memail" style="width:100px"/>
@ <input type="text" name="memail1" id="memail1" style="width:100px" placeholder="직접입력" />
<select name="memail2" id="memail2">
<option value="1" selected>직접입력</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="daum.net">daum.net</option>
</select>
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="mgender" value="01" checked="checked" />여자
<input type="radio" name="mgender" value="02" /> 남자
</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" name="mhobby" value="01" />독서
<input type="checkbox" name="mhobby" value="02" />운동
<input type="checkbox" name="mhobby" value="03" />음악감상
<input type="checkbox" name="mhobby" value="04" />여행
</td>
</tr>
<tr>
<td>주소</td>
<td>
<input type="text" name="mzone" id="mzone" placeholder="우편번호" style="width:70px" maxlength="6" >
<input type="button" name="mzone_btn" id="mzone_btn" value="우편번호 찾기"><br>
<input type="text" name="mroad" id="mroad" placeholder="도로명주소" style="width:250px"><br>
<input type="text" name="mroaddetail" id="mroaddetail" placeholder="도로명주소 상세주소" style="width:250px"><br>
<input type="text" name="mjibun" id="mjibun" placeholder="지번주소" style="width:250px">
</td>
</tr>
<tr>
<td>소개글</td>
<td>
<textarea name="mmsg" id="mmsg" rows="5" cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="hidden" id="ISUD_TYPE" name="ISUD_TYPE" value="I">
<input type="button" value="jsp_보내기" id="memInsertBtn" />
<input type="reset" value="취소" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>2교시 (10:30-11:20)
- css_07_position_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 위치 속성</title>
<!--
웹 요소의 위치
--------------------
웹 요소의 위치를 정하는 left, right, top, bottom 속성
기준위치는 position : absolute이다
left 기존 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정
right 기존 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정
top 기존 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정
bottom 기존 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정
배치 방법을 지정하는 position 속성
position 속성은 텍스트나 이미지 요소를 다양하게 배치할 수 있다.
static 문서 흐름에 맞춰 배치 : 기본값
relative 위치값을 지정할 수 있다는 점을 제외하면 static과 같다.
absolute relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
fixed 브라우저 창을 기준으로 위치를 지정해 배치한다.
-->
<style>
* {
margin:0; /* 마진 초기화 */
padding:0; /* 패딩 초기화 */
}
p {
width:300px; /* 너비 - 300px */
border: 1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */
padding: 10px; /* 네 방향 패딩 10px */
}
#pos1 {
position:absolute; /* 포지셔닝 - absolute */
left:50px; /* 왼쪽에서 50px 떨어지게 */
top: 50px; /* 위쪽에서 50px 떨어지게 */
}
#pos2 {
position:absolute; /* 포지셔닝 - absolute */
right:100px; /* 오른쪽에서 100px 떨어지게 */
top:100px; /* 위쪽에서 100px 떨어지게 */
}
#pos3 {
position: absolute; /* 포지셔닝 - absolute */
left:100px; /* 왼쪽에서 50px 떨어지게 */
bottom:100px; /* 아래쪽에서 100px 떨어지게 */
}
</style>
</head>
<body>
<p id="pos1">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<p id="pos2">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
<p id="pos3">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>
- css_07_position_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<style>
p {
width:500px;
height:200px;
background-color:#eee;
border:1px solid #ccc;
line-height:2;
}
#static {
position:static;
}
#relative-1{
position:relative;
}
#relative-2 {
position:relative; /* 포지셔닝 - relative */
left:100px; /* 왼쪽에서 100px 떨어지게 */
top:-50px; /* 위쪽에서 -50px 떨어지게 (위로 이동) */
}
#fixed {
width:100px;
height:100px;
background-color:#222;
position:fixed; /* 포지셔닝 - fixed */
right:30px; /* 오른쪽에서 30px 떨어지게 */
top:30px; /* 위쪽에서 30px 떨어지게 */
}
</style>
</head>
<body>
<p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Pariatur fugiat voluptate ea non amet cupidatat. </p>
<p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud labore cillum non exercitation voluptate. </p>
<p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p>
<p id="fixed"></p>
</body>
</html>
- position-2.css
@charset "UTF-8";
* {
box-sizing: border-box;
margin:0;
padding:0;
}
#contents {
/*
repeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x: 가로 방향으로 반복합니다.
repeat-y: 새로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.
initial : 기본값으로 설정합니다.
inherit :부모 요소의 속성값을 상속받습니다.
*/
background:url("/KosMember/img/img_css/bg.jpg") no re-peat;
/*
cover : 지정한 요소를 다 덮도록 배경이미지를 확대/축소
*/
background-size:cover;
width: 800px;
height: 500px;
margin: 0 auto;
}
h1 {
color:#fff;
font-size:120px;
text-shadow: 2px 3px 0 #000;
}- css_07_position_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS float 속성</title>
<link rel="stylesheet" href="/KosMember/css/position-2.css">
</head>
<body>
<div id="contents">
<h1>CSS3</h1>
</div>
</body>
</html>
3교시 (11:30-12:20)
- position-3.css
@charset "UTF-8";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#contents {
background:url("/KosMember/img/img_css/bg.jpg") no-repeat;
background-size:cover;
width:800px;
height:500px;
margin:0 auto;
position: relative;
}
h1 {
color: #fff;
font-size:120px;
text-shadow: 2px 3px 0 #000;
position: absolute;
right: 100px;
bottom: 100px;
}- css_07_position_4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<link rel="stylesheet" href="/KosMember/css/position-3.css">
</head>
<body>
<div id="contents">
<h1>CSS3</h1>
</div>
</body>
</html>
그림이나 글자 위치를 바꿔보면서 조정해보기
- 부트스트랩 Bootstrap
4교시 (12:30-13:20)
- css_08_table_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
margin: 10px auto;
padding: 5px;
border: 2px solid red;
background-color: cyan;
display: table;
}
table {
margin: 5px;
}
input {
width: 100px;
}
</style>
</head>
<body>
<!--
<div style="background-color:blue; padding:5px;display:table;">
-->
<div>
<table>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
</tr>
<tr>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
</tr>
<tr>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
</tr>
</table>
</div>
</body>
</html>
- css_08_table_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>table2</title>
</head>
<body>
<div class="container">
<table class="table">
<!--
success, danger, info, warning, active, default
-->
<tr class="success">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr class="danger">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr class="info">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<h2>Button Style</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success"> Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
- position-4.css
@charset "UTF-8";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#contents {
/*
repeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
*/
background:url("/KosMember/img/img_mando/Up.gif") repeat;
/*
auto : 원래 배경 이미지 크기만큼 표시(기본 값)
contain : 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 /축소
cover : 지정한 요소를 다 덮도록 배경이미지를 확대/축소
크기 값 : 너비 값과 높이 값을 지정
백분율 : 지정한 요소를 기준으로 백분율 값을 설정
*/
background-size: auto;
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
}
h1 {
color: #fff;
font-size: 120px;
text-shadow: 2px 3px 0 #000;
position: absolute;
right: 100px;
bottom: 100px;
}- css_07_position_5.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<link rel="stylesheet" href="/KosMember/css/position-4.css">
</head>
<body>
<div id="contents">
<h1>CSS3</h1>
</div>
</body>
</html>- css_07_position_5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<link rel="stylesheet" href="/KosMember/css/position-4.css">
</head>
<body>
<div id="contents">
<h1>CSS3</h1>
</div>
</body>
</html>
만두들이 움직임
5교시 (14:30-15:20)
- w3schools에서 bootstrap 페이지 확인하면서 적용해보기
- 문서의 동적 구성
6교시 (15:30-16:20)
- css_08_table_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
margin: 10px auto;
padding: 5px;
border: 2px solid red;
background-color: cyan;
display: table;
}
table {
margin: 5px;
}
input {
width: 100px;
}
</style>
</head>
<body>
<!--
<div style="background-color:blue; padding:5px;display:table;">
-->
<div>
<table>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" style="width:10px; height:10px"/>
</td>
<td>
<input type="text" style="width:30px; height:15px"/>
</td>
<td>
<input type="text" style="width:60px;height:20px"/>
</td>
<td>
<input type="text" style="width:90px;height:25px"/>
</td>
<td>
<input type="text" style="width:150px;height:30px"/>
</td>
</tr>
<tr>
<td>
<input type="text" style="width:50px"/>
</td>
<td>
<input type="text" style="width:100px"/>
</td>
<td>
<input type="text" style="width:150px"/>
</td>
<td>
<input type="text" style="width:200px"/>
</td>
<td>
<input type="text" style="width:250px"/>
</td>
</tr>
<tr>
<td>
<input type="text" style="width:20px"/>
</td>
<td>
<input type="text" style="width:40px"/>
</td>
<td>
<input type="text" style="width:80px"/>
</td>
<td>
<input type="text" style="width:100px"/>
</td>
<td>
<input type="text" style="width:120px"/>
</td>
</tr>
</table>
</div>
</body>
</html>
- css_08_table_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>table2</title>
</head>
<body>
<h2>Button Style</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success"> Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<div class="container">
<table class="table">
<!--
success, danger, info, warning, active, default
-->
<tr class="success">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr class="danger">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr class="info">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</div>
</body>
</html>
- css_09_selector1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Selector</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
css() 함수의 매개변수가 들어오는 괄호 안에
브레이스 블럭을 이용해서
브레이스 블록에 키=밸류(프로퍼티=값)로 값을 세팅하는 것이
자바스크립트 객체를 사용하는 방법 중 하나이다.
이 방법은 json과 동일한 규칙이 적용된다.
*/
$("#btn_1").click(function(){
alert("btn >>> : ");
$("ul li").css({"color":"blue"});
$(".red").css({"color":"red"});
$(".box2").css({"width":"300px", "height":"300px"});
});
$(document).on("click", "button[name='btn_2']", function(){
alert("btn_2 >>> : ");
$(".lime").css({"color":"#00FF00"});
$(".box1").css({"width":"350px", "height":"400px"})
});
});
</script>
<style type="text/css">
ul li {
font-size:20px;
color:#666; /* 회색 */
margin:20px;
}
div {
width:200px;
height:200px;
float:left;
margin:50px;
}
.box1 { background: blue; }
.box2 { background: red; }
</style>
</head>
<body>
<button type="button" id="btn_1">btn_1</button>
<button type="button" id="btn_2" name="btn_2">btn_2</button>
btn_2 버튼을 클릭하면 리스트2 글씨가 라임 #00FF00 으로 변하고 <br>
첫번째 박스가 바탕색이 빨간색, 크기가 350X400이 됩니다.
<hr>
<ul>
<li>리스트1</li>
<li class="lime">리스트2</li>
<li class="red">리스트3</li>
<li>리스트3</li>
</ul>
<hr>
<div class="box1"></div>
<div class="box2"></div>
<div style="background-color:black; color:white; padding:20px;">
<h2>KOSMO</h2>
<p>자바 108기</p>
<p>빅데이터기반 인공지능 융합 서비스 개발자</p>
</div>
</body>
</html>
7교시 (16:30-17:20)
- css_09_selector2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Selector</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").on("click", function(){
$(".frame img").attr({
"src":"/KosMember/img/img_kakaofriends/04 (2).png",
"alt":"카카오프렌즈1"
});
});
$(".btn2").on("click", function(){
$(".frame img").attr({
"src":"/KosMember/img/img_kakaofriends/1__(3).png",
"alt":"카카오프렌즈2"
});
});
});
</script>
<style>
div {
width: 320px;
margin: 10px auto;
}
.frame {
width: 320px;
border: 2px solid red;
margin: 10px auto;
}
.frame img { width: 100% }
</style>
</head>
<body>
<div>
<button class="btn1">이미지 속성 변경하기 1</button>
<button class="btn2">이미지 속성 변경하기 2</button>
</div>
<p class="frame">
<img src="/KosMember/img/img_kakaofriends/08.png" alt="카카오프렌즈1">
</p>
</body>
</html>
'이미지 속성 변경하기 1’ 클릭 시
‘이미지 속성 변경하기 2’ 클릭 시
8교시 (17:30-18:30)
- dom_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 스타일 동적 변경</title>
<script>
function change() {
var span = document.getElementById("mySpan"); // id가 mySpan인 객체 찾기
span.style.color = "green";
span.style.fontsize = "30px";
span.style.display = "block";
span.style.width = "6em";
span.style.border = "3px dotted magenta";
span.style.margin = "20px";
}
</script>
</head>
<body>
<h3>CSS 스타일 동적 변경</h3>
<hr>
<p style="color:blue">이것은
<span id="mySpan" style="color:red">문장입니다. </span>
</p>
<input type="button" value="스타일변경" onclick="change()">
</body>
</html>
‘스타일변경’ 클릭 시
- dom_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML 활용</title>
<script>
function change() {
var p = document.getElementById("firstP");
// innerHTML : XHTML 에서 사용하던 프로퍼티, 태그랑 문자를 같이 사용 할 수 있다, HTML 추가
p.innerHTML= "나의 <img src='/KosMember/img/media/puppy.png'> 강아지";
}
</script>
</head>
<body>
<h3>innerHTML 활용 : 아래 글자에 클릭하면 예쁜 강아지가 보입니다.</h3>
<hr>
<p id="firstP" style="color:blue" onclick="change()">
여기에 <span style="color:red">클릭하세요</span>
</p>
</body>
</html>
- css_09_selector3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>문서의 동적 구성</title>
<script>
function createDIV() {
var obj = document.getElementById("parent");
var newDIV = document.createElement("div");
newDIV.innerHTML = "새로 생성된 DIV입니다.";
newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor = "yellow";
newDIV.onclick = function() {
var p = this.parentElement; // 부모 HTML 태그 요소
p.removeChild(this); // 자신을 부모로부터 제거
};
obj.appendChild(newDIV);
}
</script>
</head>
<body id="parent">
<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
<hr>
<p>
DOM 트리에 동적으로 객체를 삽입할 수 있습니다.<br>
createElemnt(), appendChild(), removeChild() 메소드를<br>
이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.<br>
</p>
<a href="javascript:createDIV()">DIV 생성</a><p>
<p>
</body>
</html>‘DIV 생성’을 누르면 노란 부분이 생성되고, 새로 생성된 DIV를 누르면 사라진다.
Notes
- 내일부터 jsp
728x90
'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글
| 22-04-11(월) 051일차 [HTML, JavaScript] jQuery 페이지 넘어가기, RequestDispatcher (0) | 2022.06.03 |
|---|---|
| 22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요 (0) | 2022.05.24 |
| 22-04-06(수) 048일차 [HTML, CSS] 웹에서 데이터를 가져오기, CSS margin과 float 조절 (0) | 2022.05.24 |
| 22-04-05(화) 047일차 [CSS] CSS 인라인 스타일, 외부 스타일 시트 적용하기 (0) | 2022.05.24 |
| 22-04-04(월) 046일차 [Java, Oracle, HTML] 지난 금요일에 주신 자료 그대로 타이핑하기 (0) | 2022.05.24 |