자바스크립트 - jQuery
# jQuery로 제어할 수 있는 요소별 명령
- style
- `$(선택자).css(항목, 값)` - 특정 스타일 항목을 특정 값으로 변경
- `$(선택자).css(항목)` - 특정 스타일 항목을 확인(반환)
- value
- `$(선택자).val(값)` - value 설정
- `$(선택자).val()` - value 반환
- textContent
- `$(선택자).text(값)` - textContent 설정
- `$(선택자).text()` - textContent 반환
- innerHTML
- `$(선택자).html(값)` - innerHTML 설정
- `$(선택자).html()` - innerHTML 반환
- attribute
- `.attr(항목, 값)` - 대상 태그에 작성된 항목 속성 글자를 설정
- `.attr(항목)` - 대상 태그에 작성된 항목 속성 글자를 반환
- `.prop(항목, 값)` - 대상 태그가 가지고 있는 항목에 대한 상태를 설정
- `.prop(항목)` - 대상 태그가 가지고 있는 항목에 대한 상태를 반환
- `.prop(항목)` - 대상 태그가 가지고 있는 항목에 대한 상태를 반환
- class
- `.addClass(이름)` - 클래스 추가
- `.hasClass(이름)` - 클래스 검사
- `.removeClass(이름)` - 클래스 제거
- `.toggleClass(이름)` - 클래스 토글
- visibility
- `show()` , `slideDown()` , `fadeIn()` - 표시 명령
- `hide()` , `slideUp()` , `fadeOut()` - 숨김 명령
- `toggle()` , `slideToggle()` , `fadeToggle()` - 토글 명령
jQuery 기초 및 기본 사용법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 기본 형식</title>
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성-->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>
ex) jQuery 기초 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$("h1").css("border","2px solid red")
.css("textDecorationLine","underline")
.css("font-size","25px")
.css("margin","10px 0px")
});
</script>
</head>
<body>
<h1>Hello jQuery</h1>
<h1>Hello jQuery</h1>
<h1>Hello jQuery</h1>
<h1>Hello jQuery</h1>
<h1>Hello jQuery</h1>
</body>
</html>
ex) jQuery 기초 클릭 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 문제</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//클래스를 사용하여 선택할 수 있다.
$(".color-red").click(function(){
$("#target").css("color", "red");
});
$(".color-blue").click(function(){
$("#target").css("color", "blue");
});
$(".bgcolor-yellow").click(function(){
$("#target").css("background-color", "yellow");
});
$(".border-black").click(function(){
console.log("현재 border : " + $("#target").css("border"));
//$("#target").css("border", "1px solid black");
$("#target").css("border-color", "black")
.css("border-width", "1px")
.css("border-style", "solid");
});
});
</script>
</head>
<body>
<h1 id="target">스타일 바꾸기</h1>
<button class="color-red">글자 빨강</button>
<button class="color-blue">글자 파랑</button>
<button class="bgcolor-yellow">배경 노랑</button>
<button class="border-black">테두리 검정</button>
</body>
</html>
ex) jQuery 글자 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개서</title>
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#answer").on("input", function(){
//입력값을 answer라는 변수에 저장
var answer = $(this).val();
var len = answer.length;
//만약 1000글자가 넘어간다면 넘어간 만큼 글자를 제거
while(len > 1000){
//textarea.value = textarea.value.substring(0, textarea.value.length-1);
$(this).val($(this).val().substring(0, $(this).val().length - 1));
len--;
}
$("#answer-length").text(len);
});
});
</script>
</head>
<body>
<div class="container-700 container-center">
<div class="row center">
<h1>글자수</h1>
</div>
<div class="row">
<h2>글자수제한하기</h2>
</div>
<div class="row">
<textarea id="answer" rows="10" class="form-input"></textarea>
</div>
<div class="row right">
<span id="answer-length">0</span> / 1000
</div>
</div>
</body>
</html>
ex) jQuery 정규 표현식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정규표현식</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//document.querySelector("input[name=memberNick]").addEventListener("input", function(){});
$("input[name=memberNick]").on("input", function(){
var regex = /^[가-힣]{2,10}$/;
var nickname = $(this).val();
//JS의 .nextElementSibling 은 jQuery의 .next()와 같다.(CSS에서 +와 같다)
//JS의 .previousElementSibling 은 jQuery의 .prev()와 같다.(CSS에서는 불가능)
//var span = document.querySelector("input[name=memberNick]").nextElementSibling;//VanillaJS
//var span = this.nextElementSibing;//VanillaJS
//var span = $("input[name=memberNick] + span");//jquery
//var span = $("input[name=memberNick]").next();//jquery
var span = $(this).next();//jquery
if(regex.test(nickname)){
span.text("올바른 닉네임 형식입니다");
}
else{
span.text("닉네임은 한글 2~10자 이내로 작성하세요");
}
});
});
</script>
</head>
<body>
<input type="text" name="memberNick">
<span></span>
</body>
</html>
ex) jQuery 속성 제어 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애트리뷰트(Attribute) 제어</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//체크박스의 체크 여부를 확인
//.prop() - 태그 상태를 가져오는 명령
//.attr() - 태그에 작성(표시)된 글자를 가져오는 명령(String)
console.log($(".agree").prop("checked"));//.agree의 checked 상태가 어때요?
console.log($(".agree").attr("checked"));//.agree의 checked 속성의 글자값이 뭐에요?
console.log($(".sample-image").prop("width"));//.sample-image의 width 상태가 어때요?
console.log($(".sample-image").attr("width"));//.sample-image의 width 속성의 글자값이 뭐에요?
console.log($(".agree").prop("disabled"));//.agree의 disabled 상태가 어때요?
console.log($(".agree").attr("disabled"));//.agree의 disabled 속성의 글자값이 뭐에요?
console.log($(".price").prop("data-price"));//.price의 data-price 상태가 어때요?
console.log($(".price").attr("data-price"));//.price의 data-price 속성의 글자값이 뭐에요?
});
</script>
</head>
<body>
<input type="checkbox" class="agree" checked="checked">
<span>동의합니다</span>
<hr>
<img src="image/loading.gif" width="200" height="200" class="sample-image">
<hr>
<span class="price" data-price="700"></span>
</body>
</html>
ex) jQuery 속성 제어를 이용해 비밀번호 입력창 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 입력창</title>
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$(".show-password").on("input", function(){
//this == .show-password
//체크여부 : this.checked 또는 $(this).prop()
if($(this).prop("checked")){//체크가 되었다면... if(this.checked){}
//$("input[name=memberPw]").attr("type", "text");
$("input[name=memberPw]").prop("type", "text");
}
else{
//$("input[name=memberPw]").attr("type", "password");
$("input[name=memberPw]").prop("type", "password");
}
});
});
</script>
</head>
<body>
<input type="password" name="memberPw">
<label>
<input type="checkbox" class="show-password">
<span>비밀번호 표시</span>
</label>
</body>
</html>
ex) jQuery 속성 제어를 이용해 선택, 전체 선택 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택</title>
<style>
label {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$(".check-all").on("input", function(){
//주인공 : 선택된 .check-all
//주인공의 상태 : this.checked 또는 $(this).prop("checked")
var isChecked = $(this).prop("checked");
//$("input[type=checkbox]:not(.check-all)").prop("checked", isChecked);
//$(".check-all").prop("checked", isChecked);
$("input[type=checkbox]").prop("checked", isChecked);
});
});
</script>
</head>
<body>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
<hr>
<label><input type="checkbox" oninput="check2();"><span>딸기</span></label>
<label><input type="checkbox" oninput="check2();"><span>포도</span></label>
<label><input type="checkbox" oninput="check2();"><span>람부탄</span></label>
<label><input type="checkbox" oninput="check2();"><span>홍시</span></label>
<label><input type="checkbox" oninput="check2();"><span>두리안</span></label>
<label><input type="checkbox" oninput="check2();"><span>오렌지</span></label>
<label><input type="checkbox" oninput="check2();"><span>망고</span></label>
<label><input type="checkbox" oninput="check2();"><span>파인애플</span></label>
<label><input type="checkbox" oninput="check2();"><span>용과</span></label>
<label><input type="checkbox" oninput="check2();"><span>샤인머스켓</span></label>
<label><input type="checkbox" oninput="check2();"><span>스타후르츠</span></label>
<hr>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
</body>
</html>
ex) jQuery 클래스 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class 제어</title>
<style>
.sample-class {
box-shadow: 0px 0px 10px 10px yellow;
}
</style>
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#add-btn").click(function(){
$("#sample-image").addClass("sample-class");
});
$("#remove-btn").click(function(){
$("#sample-image").removeClass("sample-class");
});
$("#toggle-btn").click(function(){
$("#sample-image").toggleClass("sample-class");
});
});
</script>
</head>
<body>
<button id="add-btn">추가</button>
<button id="remove-btn">제거</button>
<button id="toggle-btn">토글</button>
<hr>
<img src="./image/loading.gif" width="200" height="200" id="sample-image">
</body>
</html>
ex) jQuery 클래스 제어를 이용해 입력창 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현란한 입력창</title>
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<style>
.form-input {
outline: none;
background-repeat: no-repeat; /* 배경이 반복되는 것을 방지 */
background-size: contain; /* 배경의 크기를 작은 쪽에 맞춤 */
background-position: right; /* 배경을 오른쪽으로 붙임 */
/* 입력창에 더 맞도록 사이즈, 위치 재정의 */
background-size: 25px;
background-position: right 10px top 50%;
}
.form-input.success {
border-color: green;
background-image: url("./image/success.jpg"); /* 배경 이미지 경로 설정(폰트와 동일) */
}
.form-input.fail {
border-color: red;
background-image: url("./image/fail.jpg"); /* 배경 이미지 경로 설정(폰트와 동일) */
}
span.success {
color:green;
display: none;
}
span.fail {
color:red;
display: none;
}
.form-input.success ~ span.success {
display:block;
}
.form-input.fail ~ span.fail {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$("input[name=memberId]").on("input", function(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
var id = $(this).val();
$(this).removeClass("success").removeClass("fail");
if(regex.test(id)){//원하는 형식
$(this).addClass("success");
}
else{//원치않는 형식
$(this).addClass("fail");
}
});
});
</script>
</head>
<body>
<form>
<div class="container-500 container-center">
<div class="row">
<label>아이디</label>
<input type="text" name="memberId" class="form-input" autocomplete="off">
<span class="success">멋진 아이디네요!</span>
<span class="fail">아이디는 8~20자 이내 영문 소문자 + 숫자로 작성하세요!</span>
</div>
</div>
</form>
</body>
</html>
ex) jQuery each 반복
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 반복문</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//.total-btn을 클릭하면 합계를 구하여 화면에 출력
$(".total-btn").click(function(){
//var total = $(".number-input").eq(0).val() + $(".number-input").eq(1).val() + ...
//통합하여 처리할 수 없는 상황에 대한 jQuery의 해결책
//.each() 명령을 사용
//[1] $.each($(선택자), 코드); - 선택된 태그 수만큼 코드가 실행됨
//[2] $(선택자).each(코드); - 선택된 태그 수만큼 코드가 실행됨
var total = 0;
$(".number-input").each(function(index, element){
//this == .number-input 중 현재 순서인 태그 == element
//console.log($(this).val());
//console.log(index + " , " + element);
total += parseInt($(this).val());
});
//console.log(total);
$(".result > span").text(total);
});
});
</script>
</head>
<body>
<input type="number" class="number-input" value="0"><br><br>
<input type="number" class="number-input" value="0"><br><br>
<input type="number" class="number-input" value="0"><br><br>
<input type="number" class="number-input" value="0"><br><br>
<input type="number" class="number-input" value="0"><br><br>
<button class="total-btn">합계 구하기</button>
<hr>
<div class="result">
합계는 <span>0</span>입니다
</div>
</body>
</html>
ex) jQuery each 반복 을 이용하여 체크박스 선택항목 표시하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>each 퀴즈</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//.check-item에 입력이 발생하면 선택된 항목을 계산
//[1] 체크된 항목의 체크여부를 가려 추가 또는 삭제 후 출력
//[2] 전체 체크항목을 계산하여 출력
$(".check-item").on("input", function(){
//this == 체크된 체크박스
var selectedValue = "";
$(".check-item").each(function(){
//this == 현재 차례의 체크박스
if($(this).prop("checked")){
var name = $(this).next().text();
selectedValue += name;
selectedValue += " ";
}
});
//console.log(selectedValue);
$(".result > span").text(selectedValue);
});
});
</script>
</head>
<body>
<label><input type="checkbox" class="check-item"><span>딸기</span></label>
<label><input type="checkbox" class="check-item"><span>포도</span></label>
<label><input type="checkbox" class="check-item"><span>사과</span></label>
<label><input type="checkbox" class="check-item"><span>귤</span></label>
<label><input type="checkbox" class="check-item"><span>바나나</span></label>
<label><input type="checkbox" class="check-item"><span>파인애플</span></label>
<hr>
<div class="result">선택된 항목 : <span></span></div>
</body>
</html>
ex) jQuery 기본 이벤트 제어
.confirm-link를 클릭하면 확인창 띄운 뒤 이동하도록 처리
1. jQuery에서는 return false를 이용한 기본 이벤트 방지가 가능
2. jQuery에서는 이벤트 객체(e)를 이용한 방지 명령이 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 이벤트 제어</title>
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$(".confirm-link").click(function(){
return false;
});
});
</script>
</head>
<body>
<a href="https://www.google.com" class="confirm-link">구글로 이동</a>
</body>
</html>
ex) jQuery 표시 또는 숨김
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표시 또는 숨김</title>
<style>
.hide {
display:none;
}
</style>
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$(".hide-btn").click(function(){
$(".target").hide();
});
$(".show-btn").click(function(){
$(".target").show();
});
$(".toggle-btn").click(function(){
$(".target").toggle();
});
});
</script>
</head>
<body>
<button class="hide-btn">숨김</button>
<button class="show-btn">표시</button>
<button class="toggle-btn">토글</button>
<hr>
<img src="./image/lion.gif" width="200" height="200" class="target">
</body>
</html>
추가) 애니메이션 기능이 들어있는 코드
<script>
$(function(){
$(".hide-btn").click(function(){
$(".target").fadeOut();
});
$(".show-btn").click(function(){
$(".target").fadeIn();
});
$(".toggle-btn").click(function(){
$(".target").fadeToggle();
});
});
$(function(){
$(".hide-btn").click(function(){
$(".target").slideUp();
});
$(".show-btn").click(function(){
$(".target").slideDown();
});
$(".toggle-btn").click(function(){
$(".target").slideToggle();
});
});
</script>
ex) jQuery 를 이용한 멀티 페이지 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 기본 형식</title>
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//[1] 1페이지 빼고 다 숨김
//= 다 숨기고 1페이지만 표시
$(".page").hide();
$(".page").eq(0).show();
//[2] 페이지 번호 관리 변수 생성
var p = 0;
//[3] 다음 단계로 버튼에 대한 이벤트 처리
//= p를 1 증가시키고 해당하는 페이지를 표시
//= form 안의 버튼은 submit 효과가 자동 부여되므로 이를 방지해야 한다.
$(".btn-next").click(function(e){
e.preventDefault();
p++;
$(".page").hide();
$(".page").eq(p).show();
});
//[4] 이전 단계로 버튼에 대한 이벤트 처리
$(".btn-prev").click(function(e){
e.preventDefault();
p--;
$(".page").hide();
$(".page").eq(p).show();
});
});
</script>
</head>
<body>
<form>
<div class="page">
<div class="container-700 container-center">
<div class="row center">
<h1>1단계 : 로그인 정보</h1>
</div>
<div class="row">
<label>아이디</label>
<input type="text" name="??" class="form-input">
</div>
<div class="row">
<label>비밀번호</label>
<input type="password" name="??" class="form-input">
</div>
<div class="row">
<button class="btn btn-next form-btn">다음 단계로</button>
</div>
</div>
</div>
<div class="page">
<div class="container-700 container-center">
<div class="row center">
<h1>2단계 : 개인 정보</h1>
</div>
<div class="row">
<label>이름</label>
<input type="text" name="??" class="form-input">
</div>
<div class="row">
<label>전화번호</label>
<input type="text" name="??" class="form-input">
</div>
<div class="row">
<label>이메일</label>
<input type="text" name="??" class="form-input">
</div>
<div class="row">
<button class="btn btn-next form-btn">다음 단계로</button>
</div>
<div class="row">
<button class="btn btn-prev form-btn">이전 단계로</button>
</div>
</div>
</div>
<div class="page">
<div class="container-700 container-center">
<div class="row center">
<h1>3단계 : 이용자 정보</h1>
</div>
<div class="row">
<label>닉네임</label>
<input type="text" name="??" class="form-input">
</div>
<div class="row">
<label>프로필</label>
<input type="file" name="??" class="form-input">
</div>
<div class="row">
<button class="btn btn-prev form-btn">이전 단계로</button>
</div>
<div class="row">
<button class="btn btn-submit form-btn">회원 가입하기</button>
</div>
</div>
</div>
</form>
</body>
</html>
ex) jQuery 를 이용한 슬라이드 컨텐츠 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목차 화면</title>
<!-- jquery cdn 또는 보유한 파일을 불러오는 코드를 작성 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//.contents 안의 a태그를 누르면 이동을 중지하고 하위 메뉴를 토글한다.
/*
$(".contents a").click(function(e){
e.preventDefault();
//$(this).next().toggle();
$(this).next().slideToggle();
});
*/
/*
$(".contents").find("a").click(function(e){
e.preventDefault();
$(this).next().slideToggle();
});
*/
$(".contents").find("li").click(function(e){
e.preventDefault();
$(this).children("ol").slideToggle();
});
});
</script>
</head>
<body>
<ol class="contents">
<li>
<a href="#">자바</a>
<ol>
<li><a href="#">변수</a></li>
<li><a href="#">입출력</a></li>
<li><a href="#">조건</a></li>
<li><a href="#">반복</a></li>
</ol>
</li>
<li>
<a href="#">데이터베이스</a>
<ol>
<li><a href="#">변수</a></li>
<li><a href="#">입출력</a></li>
<li><a href="#">조건</a></li>
<li><a href="#">반복</a></li>
</ol>
</li>
</ol>
</body>
</html>
'Java 웹 개발' 카테고리의 다른 글
| 21.11.12 - 웹 개발 입문 65일차 (0) | 2021.11.15 |
|---|---|
| 21.11.10 - 웹 개발 입문 63일차 (0) | 2021.11.11 |
| 21.11.09 - 웹 개발 입문 62일차 (0) | 2021.11.09 |
| 21.11.08 - 웹 개발 입문 61일차 (0) | 2021.11.08 |
| 21.11.05 - 웹 개발 입문 60일차 (0) | 2021.11.06 |
