자동차견적 - checkbox + defaultValue()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="kor" xml:lang="ko">
<head>
<title> 자동차 견적서 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0; padding:0;}
body{font:12px/1.5 dotum,"돋움", gulim, "굴림", sans-serif;}
li{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
h1{text-align:center;}
#carZone{width:600px; margin:0 auto;}
#estimate{width:100%;}
#estimate th, td{border:1px solid #ccc;height:30px;}
#estimate th{background-color:#333;color:#fff;}
#carZone td{text-align:center;}
tfoot{font-size:15px; font-weight:bold;}
#total{border:none 0;background:none;
font-size:1.5em;font-weight:bold;text-align:center;}
</style>
<script type="text/javascript">
function car(){
//자동차의 기본값을 가져온다.
//체크박스가 체크되어 있으면 추가가격을 누적하고, 해제하면 가격을 차감
var obj1= document.getElementById('opt1');
var obj2= document.getElementById('opt2');
var obj3= document.getElementById('opt3');
var carValue= Number(document.getElementById('total').defaultValue);
for(var i=1;i<=3;i++){
var opt = document.getElementById('opt'+i);
if(opt.checked){
carValue=carValue+Number(opt.value);
}
}
var obj = document.getElementById('total');
obj.value=carValue;
}
</script>
</head>
<body>
<h1>자동차 견적</h1>
<div id="carZone">
<p><img src="images/car1.jpg" alt="자동차" /></p>
<table id="estimate">
<colgroup>
<col width="380px" />
<col width="160px" />
<col width="*" />
</colgroup>
<thead>
<tr>
<th scope="row">옵 션</th>
<th scope="row">추가 가격</th>
<th scope="row">선택</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">(기본)차량가격</th>
<td colspan="2">
<input type="text" name="total" id="total"
value="13450000" readonly="readonly" />
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><label for="opt1">인조가죽시트</label></td><td>250000</td>
<td>
<!-- 옵션 체크박스에 클릭할 때 마다 car()에 저장된
일련의 실행문을 실행합니다. -->
<input type="checkbox" name="opt1" id="opt1"
value="250000" onclick="car();" /></td>
</tr>
<tr>
<td><label for="opt2">내비게이션</label></td><td>250000</td>
<td><input type="checkbox" name="opt2" id="opt2"
value="250000" onclick="car();" /></td>
</tr>
<tr>
<td><label for="opt3">선루프</label></td><td>440000</td>
<td><input type="checkbox" name="opt3" id="opt3"
value="440000" onclick="car();" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>갤러리
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> 사진 갤러리 </title>
<style type="text/css">
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
*/
*{
margin:0;padding:0;
font-family: 'Nanum Gothic', sans-serif;
}
li{list-style:none;}
a{text-decoration:none;color:#000;}
#inlist img{
width:100%;
height:130px;
}
#inlist li{
width:184px;
margin:1px;
padding:1px;
}
#gallery{width:450px;margin:30px auto;padding:20px;
border:1px solid #999;
box-shadow:0 5px 5px rgba(0, 0, 0, 0.3);}
#gallery h1{text-align:center;}
#gallery img{border:1px solid #666;}
#photo{text-align:center;}
#gallery ul{width:800px;margin:0 auto;
overflow:hidden;}
#plist ul li{width:100px;float:left;text-align:center;}
#plist{width:300px;margin:10px auto;
/*border:1px dashed #000;*/overflow:hidden;}
.btn_wrap{text-align:center;}
.btn_wrap a{font-weight:bold;}
</style>
<script type="text/javascript">
window.onload=function(){
//갤러리 기능 구현하기
//[1]사진 목록에 작은 이미지를 클릭하면 큰 이미지를 바꾼다.
//[2]작은 사진 이미지에 클릭 이벤트를 등록하기 위해 <a>태그를 모두 선택=>document.getElementsByTagName('a')
//[3]a태그 노드리스트 만큼 반복 돌면서 onclick처리
//[4]a태그를 클릭하면 큰 이미지 객체 참조 얻어서 이미지 소스 변경
//[5]다음 버튼을 클릭할 때 마다 <ul> 100px만큼 증가(우측으로 이동),
//이전버튼을 클릭할 때 마다 <ul> 100px만큼 감소(좌측으로 이동)
//[참고]obj1.style.marginLeft=-100px;
//a태그에 onclick이벤트를 처리하면 클릭이벤트가 적용된 후에 href로 페이지 이동하려고 한다.
var aList=document.getElementById('inlist').getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
aList[i].onclick=function(evt){
evt.preventDefault();//기본동작을 막는다. href로 이동하려는 것을 막는다.
var ahref=this.href;
big.src=ahref;
}
}
var ulObj = document.getElementById('inlist');
var cnt= 0;
next_btn.onclick=function(){
if(cnt==aList.length-2){
alert("마지막 사진");
cnt--;
return;
}
big.src=aList[cnt].href;
ulObj.style.marginLeft=cnt*-100+"px";
cnt++;
}
before_btn.onclick=function(){
if(cnt==-1){
alert("처음 사진");
cnt++;
return;
}
big.src=aList[cnt].href;
ulObj.style.marginLeft=cnt*-100+"px";
cnt--;
}
}
</script>
</head>
<body>
<div id="gallery">
<h1>갤러리</h1>
<p id="photo">
<img id="big" src="./images/car1.JPG" width="320" alt="" />
</p>
<div id="plist">
<ul id="inlist">
<li><a href="./images/car1.JPG">
<img src="./images/car1.JPG" alt="사진1"/></a></li>
<li><a href="./images/car2.JPG">
<img src="./images/car2.JPG" alt="사진2" /></a></li>
<li><a href="./images/car3.JPG">
<img src="./images/car3.JPG" alt="사진3" /></a></li>
<li><a href="./images/car4.JPG">
<img src="./images/car4.JPG" alt="사진4" /></a></li>
<li><a href="./images/car5.JPG">
<img src="./images/car5.JPG" alt="사진5" /></a></li>
</ul>
</div>
<p class="btn_wrap">
<a href="#" id="before_btn">◀</a>
<a href="#" id="next_btn">▶</a>
</p>
</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Bootstrap / jQuery 시작
Bootstrap은 CSS framework이다.
class에 대한 설명은 https://www.w3schools.com/bootstrap4/default.asp에서 확인가능하다.
https://getbootstrap.com/docs/4.5/getting-started/download/ 에서 css와 js를 다운로드하고 시작
https://jquery.com/download/
.container : 고정폭 레이아웃을 만들 때 사용
.container-fluid : 좌우로 꽉찬 레이아웃 만들 때 사용
다운로드 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="text-primary">Hello Bootstrap</h1>
<p class="text-danger">My First Bootstrap</p>
<p class="text-success">안녕 부트스트랩</p>
<p class="text-info">안녕 부트스트랩</p>
<p class="text-warning">안녕 부트스트랩</p>
</div>
</div>
</body>
</html>CDN방식 (Content Delivery Network)
순서도 중요하다
GridLayout
col-sm-숫자
xs: x-smal (576미만)
sm: small (576px)
md:medium
lg: large
xl: x-large
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
border: 1px solid red;
padding: 10px;
}
.row{
margin-bottom: 4px;
margin-top: 4px;
}
</style>
</head>
<body>
<div class="container">
<ht1 class="text-success">BootStrap GridLayout</ht1>
<!--1번째 행-->
<div class="row">
<div class="col-md-1">
<span>span1</span>
</div>
<div class="col-md-1">
<span>span2</span>
</div>
<div class="col-md-1">
<span>span3</span>
</div>
<div class="col-md-1">
<span>span4</span>
</div>
<div class="col-md-1">
<span>span5</span>
</div>
<div class="col-md-1">
<span>span6</span>
</div>
<div class="col-md-1">
<span>span7</span>
</div>
<div class="col-md-1">
<span>span8</span>
</div>
<div class="col-md-1">
<span>span9</span>
</div>
<div class="col-md-1">
<span>span10</span>
</div>
<div class="col-md-1">
<span>span11</span>
</div>
<div class="col-md-1">
<span>span12</span>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-3">col-md-6</div>
<div class="col-md-6 col-sm-3">col-md-6</div>
</div>
</div>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 55일차 - Bootstrap Layout, Color, Card, Table, dropdown (0) | 2020.07.01 |
|---|---|
| 국비지원 54일차 - Servlet Memo 수정 예시 (0) | 2020.06.30 |
| 국비지원 52일차 - HTTP, POST방식, memo예시 (0) | 2020.06.26 |
| 국비지원 51일차 - JavaScript String객체, 함수, 정규식(RegExp)객체 (1) | 2020.06.25 |
| 국비지원 50일차 - JSP(Tomcat) 환경설정, server에서 class파일, GET방식 (0) | 2020.06.24 |