728x90
☑️ 요소접근
DOM (Document Object Model) : 문서객체모델
- HTML 문서의 태그들을 객체로 처리 방식
- 객체 조화방식
- 조회할 태그가 반드시 스크립트 실행전에 먼저 인식되어야함
- 함수내에서의 DOM처리는 가능함.
✅ document.getElementById ("id속성값") : 요소리턴
아이디 속성을 이용하여 조회하기
*Id 속성은 유일함을 의미함. 한개의 객체만 찾아서 조회함
<div class="area" id="area1" style="background-color: red;"></div>
<button onclick="accessId()">아이디로 접근</button>
<script>
function accessId(){
//divEL = <div id="area1">...</div> 태그 객체. 요소 Element
const divEL = document.getElementById("area1");
divEL.innerHTML += "아이디로 완료<br/>";
divEL.style.color = "blue";
//현재 배경색이 red인 경우 yellow로, yellow 인 경우 red인 변경
//backgroundColor : css background-color
if(divEL.style.backgroundColor == "red"){
divEL.style.backgroundColor = "yellow";
} else {
divEL.style.backgroundColor = "red";
}
// divEl태그의 크기 변경
divEL.style.width = "200px";
divEL.style.height = "200px";
}
</script>
✅ document.getElementsByTagName ("name속성값") : 배열리턴
태그 이름을 이용하여 조회하기
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName()">태그로 접근</button>
<script>
function accessTagName(){
const liEL = document.getElementsByTagName("li");
// 오류발생. 배열로 조회됨. 배열에는 innerHTML 속성이 없음
// liEL.innerHTML = "Hello";
liEL[0].innerHTML = "Hello";
console.log(liEL, typeof(liEL));
console.log("li 요소의 갯수:", liEL.length);
let blueColor = 30;
for(let i = 0; i<liEL.length; i++){
liEL[i].innerHTML = "안녕하세요";
liEL[i].style.backgroundColor = "rgb(200,125," + blueColor + ")";
blueColor += 50;
}
}
</script>
✅ document.getElementsByName ("name속성값") : 배열리턴
name 속성값을 이용하여 조회하기
<form action="">
<fieldset>
<legend>취미</legend>
<input type="checkbox" id="game" value="game" name="hobby" >
<label for="game">게임</label>
<input type="checkbox" id="movie" value="movie" name="hobby" >
<label for="movie">영화</label>
<input type="checkbox" id="redding" value="redding" name="hobby" >
<label for="redding">독서</label>
<input type="checkbox" id="sports" value="sports" name="hobby" >
<label for="sports">운동</label>
</fieldset>
</form><br/>
<button onclick="accessName();">name으로 접근</button>
<div class="area" id="area3"></div>
<script>
function accessName(){
// name="속성값" : name 속성의 값으로 요소 조회 : getElementsByName
// 현재페이지에서 name 속성값을 가진 모든 요소 조회. => 배열
const hobby = document.getElementsByName("hobby"); // 배열
const divEL = document.getElementById("area3"); // 요소객체
divEL.innerHTML = "";
for(let i = 0; i<hobby.length; i++){
// hobby[i].checked : 체크박스 선택 여부 리턴
if(hobby[i].checked){
divEL.innerHTML += hobby[i].value + "<br/>";
}
}
}
</script>
✅ document.getElementsByClassName ("class속성값") : 배열리턴
class 속성값을 이용하여 조회하기
*ul, div 같은 요소는 하위 요소 태그도 모두 조회가능
<div class="test">
<p class="test"></p>
<ul class="test">
<li></li>
<li></li>
</ul>
<pre class="test test1"></pre>
<button onclick="accessClass();">class로 접근</button>
</div>
<script>
function accessClass(){
const arr = document.getElementsByClassName("test");
for(let i =0; i< arr.length;i++){
console.log(arr[i]);
}
}
</script>
✅ document.querySelector ("선택자") : 요소리턴
선택자를 이용하여 요소 조회하기
✅ doucoment.querySelectorAll ("선택자") : 배열리턴
<div id="test1">테스트입니다.</div>
<div class="test">
<h2>안녕</h2>
<h2>잘가</h2>
<span>ㅎㅎㅎ</span>
</div>
<span>ㅋㅋㅋ</span>
<h2>빠이</h2>
<button onclick="accessSelector();">클릭</button>
<script>
function accessSelector(){
const divEL = document.querySelector("#test1"); // 요소
console.log(divEL.innerHTML);
const h2E1 = document.querySelectorAll(".test > h2"); // 배열
for(let i =0; i < h2E1.length; i++){
console.log(h2E1[i].innerHTML);
}
}
</script>☑️ 문자열 처리 메소드
✅ 백틱 : ` ES6 이후 가능
divEL.innerHTML = `str1 : ${str1}<br/>`;
divEL.innerHTML += `toUpperCase() : ${str1.toUpperCase()}<br/>`;
divEL.innerHTML += `toLowerCase() : ${str1.toLowerCase()}<br/>`;
divEL.innerHTML += `문자열의 길이() : ${str1.length}<br/>`;
--
str1 : Hello World
toUpperCase() : HELLO WORLD
toLowerCase() : hello world
문자열의 길이() : 11
✅ indexOf : 문자의 위치 리턴
for(let i = 0; i < str1.length; i++){
divEL.innerHTML += `${i}번째 인덱스 : ${str1.charAt(i)}<br/>`;
}
// indexOf : 문자의 위치 리턴
divEL.innerHTML += `앞에서부터 첫 l의 위치 : ${str1.indexOf('l')}<br/>`;
divEL.innerHTML += `뒷뒷에서부터 첫 l의 위치 : ${str1.lastIndexOf('l')}<br/>`;
divEL.innerHTML += `5번 인덱스 부터 첫 l의 위치 : ${str1.indexOf('l',5)}<br/>`;
divEL.innerHTML += `a문자의 위치 : ${str1.indexOf('a')}<br/>`;
// substring(시작인덱스, 종료인덱스+1) : 부문 문자열
// substr(시작인덱스, 글자수)
divEL.innerHTML += `substring(시작인덱스) : ${str1.substring(6)}<br/>`;
divEL.innerHTML += `substring(시작인덱스, 종료인덱스+1) : ${str1.substring(0,2)}<br/>`;
divEL.innerHTML += `substr(시작인덱스) : ${str1.substr(6)}<br/>`;
divEL.innerHTML += `substr(시작인덱스, 글자수) : ${str1.substr(1,4)}<br/>`;
// startWith, endsWith (true/false)
divEL.innerHTML += `startWith(시작문자)로 시작? : ${str1.startsWith('H')}<br/>`;
divEL.innerHTML += `endsWith(끝문자)로 끝? : ${str1.endsWith('d')}<br/>`;
--
0번째 인덱스 : H
1번째 인덱스 : e
2번째 인덱스 : l
3번째 인덱스 : l
4번째 인덱스 : o
5번째 인덱스 :
6번째 인덱스 : W
7번째 인덱스 : o
8번째 인덱스 : r
9번째 인덱스 : l
10번째 인덱스 : d
앞에서부터 첫 l의 위치 : 2
뒷뒷에서부터 첫 l의 위치 : 9
5번 인덱스 부터 첫 l의 위치 : 9
a문자의 위치 : -1
substring(시작인덱스) : World
substring(시작인덱스, 종료인덱스+1) : He
substr(시작인덱스) : World
substr(시작인덱스, 글자수) : ello
startWith(시작문자)로 시작? : true
endsWith(끝문자)로 끝? : true
✅ 문자의 치환
let str2 = "JavaJavaJavaJavaJavaJava";
divEL.innerHTML += `replace(원본문자, 치환문자) : ${str2.replace('Java','자바')}<br/>`;
divEL.innerHTML += `replaceAll(원본문자, 치환문자) : ${str2.replaceAll('Java','자바')}<br/>`;
--
replace(원본문자, 치환문자) : 자바JavaJavaJavaJavaJava
replaceAll(원본문자, 치환문자) : 자바자바자바자바자바자바
✅ 문자열 분리
let str3 = "사과,바나나,복숭아,키위,";
let fruits = str3.split(","); // 배열
divEL.innerHTML += `fruits : ${fruits}<br/>`;
divEL.innerHTML += `fruits의 자료형 : ${typeof(fruits)}<br/>`;
divEL.innerHTML += `fruits의 크기 : ${fruits.length}<br/>`;
divEL.innerHTML += `배열요소를 하나의 문자열로 : ${fruits.join("-")}<br/>`;
--
fruits : 사과,바나나,복숭아,키위,
fruits의 자료형 : object
fruits의 크기 : 5
배열요소를 하나의 문자열로 : 사과-바나나-복숭아-키위-☑️ 문자열 관련 html 메소드
function stringHtmlTest(){
const divEL = document.querySelector("#area2");
let str = "javascript";
divEL.innerHTML = `str : ${str}<br/>`;
<!-- 볼드 -->
divEL.innerHTML += `bold() : ${str.bold()}<br/>`;
<!-- 기울기 -->
divEL.innerHTML += `italices() : ${str.italics()}<br/>`;
<!-- 상위/하위올림 -->
divEL.innerHTML += `sub(),sup() : ${str.sub()}, ${str.sup()}<br/>`;
<!-- 링크 -->
divEL.innerHTML += `link() : ${str.link("https://www.naver.com")}<br/>`;
}☑️ 숫자(수학) 관련 메소드
function mathTest(){
const divEL = document.getElementById("area1");
divEL.innerHTML = `절대값 : ${Math.abs(-123)}<br/>`;
divEL.innerHTML += `랜덤값 : ${Math.random()}<br/>`;
divEL.innerHTML += `반올림 : ${Math.round(123.658)}<br/>`;
<!-- 반올림은 무조건 정수로 -->
divEL.innerHTML += `반올림(위치지정가능? => x) : ${Math.round(123.658 , 3)}<br/>`;
divEL.innerHTML += `버림 : ${Math.floor(123.678)}<br/>`;
divEL.innerHTML += `올림 : ${Math.ceil(123.001)}<br/>`;
}
--
절대값 : 123
랜덤값 : 0.9421060482531691
반올림 : 124
반올림(위치지정가능? => x) : 124
버림 : 123
올림 : 124☑️ 문자열과 숫자간의 산술연산 / 형변환
덧셈 외의 산술연산 가능
문자열이 자동형변환된 후 산술연산함.
문자열내의 문자는 숫자들로만 존재해야함
덧셈연산 => 문자열 연결
const divEL = document.getElementById("area2");
divEL.innerHTML = `test1: ${7 + 7}<br/>`;
divEL.innerHTML += `test2: ${7 + "7"}<br/>`;
divEL.innerHTML += `test3: ${"7" + 7}<br/>`;
divEL.innerHTML += `test4: ${"7" + 7 + 7}<br/>`;
divEL.innerHTML += `test5: ${"7" - 7}<br/>`;
divEL.innerHTML += `test6: ${"7"/ 7}<br>`;
divEL.innerHTML += `test7: ${"7" * "7"}<br/>`;
--
test1: 14
test2: 77
test3: 77
test4: 777
test5: 0
test6: 1
test7: 49
✅ 형변환 함수
숫자 <= Number(문자열)
숫자형이 아닌경우 NaN(Not a Number) 리턴
정수형숫자 <= parseInt(문자열)
숫자가 아닌 문자 무시. 숫자만 리턴
실수형숫자 <= parseFloat(문자열)
숫자가 아닌 문자 무시. 숫자만 리턴
divEL.innerHTML += `test8: ${7 + Number("7")}<br/>` ;
divEL.innerHTML += `test9: ${7 + parseInt("7")}<br/>` ;
divEL.innerHTML += `test10: ${7 + parseFloat("7")}<br/>` ;
divEL.innerHTML += `test11: ${7 + parseFloat("7.5")}<br/>` ;
divEL.innerHTML += `test12: ${7 + "1.234원"}<br/>` ;
divEL.innerHTML += `test13: ${7 + Number("1.234원")}<br/>` ;
divEL.innerHTML += `test14: ${7 + parseInt("1.234원")}<br/>` ;
divEL.innerHTML += `test15: ${7 + parseFloat("1.234원")}<br/>` ;
--
test8: 14
test9: 14
test10: 14
test11: 14.5
test12: 71.234원
test13: NaN
test14: 8
test15: 8.234
✅ eval 함수 : 사용하지 않는 것을 권장
문자열을 수식으로 인식. 결과 리턴
let str = "100 + 20 * 3"; // 160
divEL.innerHTML += `test16: ${eval(str)}<br>`;
--
160 <p>
0~9사이의 임의의 수를 2개 선택하여 연산의 결과를 출력하기<br/>
연산의 종류는 +,-,*,/,% 중 한개를 임의의 선택 <br/>
결과값을 prompt 창을 이용하여 입력받고, <br/>
정답인 경우 : 정답입니다. <br/>
정답이 아닌 경우 : 틀렸습니다. 정답:0, 입력값: 1<br/>
</p>
<script>
let op = ['+','-','*','/','%']; //배열
let str = getNumber() + getOp() + getNumber(); // 수식
let ans = prompt(`숫자를 입력하세요 : ${str} =`,0);
let result = eval(str);
if(ans == result){
document.write("<div style='color:blue; font-size:20px;'>정답입니다.</div>");
} else{5
document.write("<div style='color:red; font-size:20px;'>오답입니다.</div>");
document.write(`입력한 값: ${ans}<br/>`);
document.write(`정답: ${result}<br/>`);
}
function getNumber(){
return Math.floor(Math.random() * 10) ; // 0~9사이의 임의의 정수
}
function getOp(){
return op[Math.floor(Math.random() * op.length)];
}
</script>☑️ 조건/반복문
✅ if / else if문
<script>
let kor = document.querySelector("#kor").textContent;
let eng = document.querySelector("#eng").textContent;
let math = document.querySelector("#math").textContent;
let avg = ( Number(kor)+Number(eng)+Number(math))/3;
document.querySelector("#avg").textContent = avg;
let grade;
if(avg >= 90){
grade = 'A';
}else if(avg >= 80){
grade = 'B';
}else if(avg >= 70){
grade = 'C';
}else if(avg >= 60){
grade = 'D';
}else {
grade = 'F';
}
document.querySelector("#grade").textContent = grade;
</script>
✅ switch() 문
javascript에서는 case 구분에 비교연산 가능함
switch(true){
case avg >= 90 : grade = 'A'; break;
case avg >= 80 : grade = 'B'; break;
case avg >= 70 : grade = 'C'; break;
case avg >= 60 : grade = 'D'; break;
default : grade = 'F';
}
✅ 반복문 연습
let n = 1;
while(n <= 5){
document.querySelector("#box1").innerHTML += (n + " ");
n++;
}
for(n = 1; n <= 5; n++){
document.querySelector("#box2").innerHTML += (n + " ");
}
n=1;
do{
document.querySelector("#box3").innerHTML += (n + " ");
n++;
}while(n <= 5);
--
while :
1 2 3 4 5
for :
1 2 3 4 5
do while :
1 2 3 4 5
✅ select 태그 만들기
<p>
<select name='mont'><br/>
<option value='1' > 1월</option><br/>
<option value='2' > 2월</option><br/>
...<br/>
<option value='12' > 12월</option><br/>
위와 같은 select 태그를 구현하여 box1에 저장하기
</p>
<div id="box1"></div>
<script>
let ans = `<select name='month' style="width:30%; height:50px;">`;
for(let i = 1; i<=12; i++){
ans += `<option value ${i}'> ${i}월</option>`;
}
ans += `</select>`;
document.getElementById("box1").innerHTML = ans;
</script>
✅ 이미지 정렬
<p>
nums 폴더의 이미지 num0.jpg ~ num9.jpg 이미지를 화면에 출력하기 <br/>
위와 같은 img 태그를 구현하여 box1에 출력하기
</p>
<div id="box1"></div>
<script>
let str = ``;
for(let i = 0; i <= 9; i++){
str += `<img src="images/num${i}.jpg">`
}
console.log(str);
document.getElementById("box1").innerHTML = str;
</script>
✅ 3행 3열 테이블 만들기
let str = `<table border=1>`
let num = 1;
for(let i = 0; i<3; i++){
str += `<tr>`
for(let j = 0; j< 3; j++){
str += `<td>${num++}</td>`;
}
str += `</tr>`
}
str += `</table>`;
document.getElementById("box1").innerHTML = str;☑️ Date
let box1 = document.querySelector("#box");
// 오늘날짜
let now = new Date();
box1.innerHTML += now + "<br/>";
// 날짜표기방식
let data1 = new Date(2025,(3-1),20,15,20,0) // 2025-03-20 15:20
box1.innerHTML += data1 + "<br/>";
let data2 = new Date(2025,2,20); // 2025-03-20 00:00:00
box1.innerHTML += data2 + "<br/>";
let data3 = new Date("2025-03-20 15:30:00"); // 2025-03-20 15:30:00
box1.innerHTML += data3 + "<br/>";
✅ 로컬타임기준
let year = now.getFullYear(); // 년도 : 2025
let Month = now.getMonth(); // 월 : 3월:2 (0~11)
let day = now.getDate(); // 일
let weekNo = now.getDay(); // 요일 : 일(0), 월(1), 화(2) ~ 토(6)
let hour = now.getHours(); // 시
let minute = now.getMinutes();// 분
let second = now.getSeconds();// 초
box1.innerHTML +=
`${year},${Month},${day},${weekNo},${hour},${minute},${second}<br>`;
✅ UTC 타임기준
year = now.getUTCFullYear(); // 년도 : 2025
Month = now.getUTCMonth(); // 월 : 3월:2 (0~11)
day = now.getUTCDate(); // 일
weekNo = now.getUTCDay(); // 요일 : 일(0), 월(1), 화(2) ~ 토(6)
hour = now.getUTCHours(); // 시
minute = now.getUTCMinutes();// 분
second = now.getUTCSeconds();// 초
box1.innerHTML +=
`${year},${Month},${day},${weekNo},${hour},${minute},${second}<br>`;
✅ 오늘의 요일 출력
let arr = ['일','월','화','수','목','금','토'];
let weekname = arr[now.getDay()];
box1.innerHTML += `2025-03-30 ${weekname}요일`;☑️ TEST
✅ Math.floor((Math.random() * 10) + 1);
Math.random() * 10) + 1 : 1~10까지의 랜덤 한 숫자
Math.floor : 소수점 이하 버림
<!--
저축할 금액을 랜덤하게 1~10만원까지 할려고 함.
6만원이상이면 '저축을 많이 하셨습니다. 잘하셨습니다.' 화면에 메세지를 출력하고
6만원 미만이면 '좀더 많이 하세요' 화면에 메세지를 출력하기
전체 저축금액이 100만원이 넘으면 저축이 만료 되었습니다. 메세지를 화면에 출력하기
[화면 결과]
1. 저축을 많이 하셨습니다. 잘하셨습니다.:8만원, 잔액:8
2. 저축을 많이 하셨습니다. 잘하셨습니다.:10만원, 잔액:18
3. 좀더 많이 하세요.:2만원, 잔액:20
4. 좀더 많이 하세요.:2만원, 잔액:22
5. 좀더 많이 하세요.:2만원, 잔액:24
6. 좀더 많이 하세요.:5만원, 잔액:29
7. 저축을 많이 하셨습니다. 잘하셨습니다.:8만원, 잔액:37
.....
20. 저축을 많이 하셨습니다. 잘하셨습니다.:7만원, 잔액:104
저축이 만료되었습니다. 잔액:104
-->
<script>
let sum = 0;
while(sum <= 100){
let num = getNum();
if(num >= 6){
sum += num;
document.write(`<p>저축을 많이 하셨습니다. 잘하셨습니다. : ${num}만원, 잔액 : ${sum}만원</p>`);
} else{
sum += num;
document.write(`<p>좀 더 많이 하세요. : ${num}만원, 잔액 : ${sum}만원</p>`);
}
}
document.write(`<p>저축이 만료되었습니다., 잔액 : ${sum}만원</p>`);
function getNum(){
return Math.floor((Math.random() * 10) + 1);
}
</script>
✅ 2중 for문을 사용하여 row.value, col.value 만큼 행과열 생성
<h1> 행 열 갯수 각각 입력받아 테이블 만들기 </h1>
<P>
행:<input type="text" id="row">
열:<input type="text" id="col">
</P>
<button onclick="makeTable();">테이블 생성</button>
<div id="box"></div>
<script>
function makeTable(){
let row = document.getElementById("row").value;
let col = document.getElementById("col").value;
let num = 1;
let table = '<table border="1">';
for(let i = 0; i < row; i++){
table += `<tr>`
for(let j = 0; j < col; j++){
table += `<td>${num++}</td>`;
}
table += `</tr>`
}
table += `</table>`;
document.getElementById("box").innerHTML = table;
}
</script>
✅ divEL.style() : 스타일 설정
divEL.style.width = "100px" - 넓이값 수정
divEL.style.height="100px" - 높이값 수정
divEL.style.backgroundColor = "#ffffff" - 배경색상값 수정
<h3>문제 1. 색상 선택후 변경 버튼을 클릭하면 색상이 변경되도록 만들어 보시오</h3>
<div id="div1"></div>
<input type="color" id="selectColor">
<button onclick="changeColor();">변경</button>
<hr>
<br><br>
<script>
function changeColor(){
let color = document.getElementById("selectColor").value;
const divEL = document.getElementById("div1");
divEL.style.backgroundColor = color;
}
</script>
<h3>문제 2. 버튼에 따른 크기 조절이 가능하게 만들어 보시오</h3>
<div id="div2"></div>
<button onclick="setHalfSize();">50x50</button>
<button onclick="setDefaultSize();">원본(100x100)</button>
<button onclick="setDoubleSize();">200x200</button>
<script>
function setHalfSize(){
let s50 = document.getElementById("div2");
s50.style.width = "50px";
s50.style.height = "50px";
}
function setDefaultSize(){
let s50 = document.getElementById("div2");
s50.style.width = "100px";
s50.style.height = "100px";
}
function setDoubleSize(){
let s50 = document.getElementById("div2");
s50.style.width = "200px";
s50.style.height = "200px";
}
</script>
✅ 태그 접근방식
<h2>HTML 태그에 접근 테스트</h2>
단, 구매자는 태그 이름으로 접근, 상품명은 아이디로 접근, 구매가격은 name값으로 접근할 것 <br><br>
구매자 : <input type="text" placeholder="구매자의 이름을 입력하세요.">
<br><br>
상품명 : <input type="text" id="pname" placeholder="구매 상품명을 입력하세요">
<br><br>
가격 : <input type="text" name="price" placeholder="구매 가격을 입력하세요.">
<br><br>
<button onclick="printValue();">입력값 출력하기</button>
<br><br>
<div id="area"></div>
<script>
function printValue(){
let name = document.getElementsByTagName("input");
let pname = document.getElementById("pname").value;
let price = document.getElementsByName("price");
let area =`구입자 : ${name[0].value}<br/>`;
area += `구입상품 : ${pname}<br/>`;
area += `구매가격 : ${price[0].value}`;
document.getElementById("area").innerHTML = area;
}
</script>
✅ textContent
textContent는 'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이
해상 노드가 가지고 있는 텍스트 값을 그대로 읽습니다.
*display:none' 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력
<h1>기본 문법 문제</h1>
문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오
<fieldset>
<legend>보기</legend>
<input type="text" placeholder="글자를 작성해보세요" size="100" id="text1">
</fieldset>
<br>
<div id="result1"></div>
<button onclick="stringLength();"> 확인하기</button>
<script>
function stringLength(){
let leg = document.getElementsByTagName("input");
let result1 = document.getElementById("result1");
result1.innerHTML = `보기의 문자열 길이는 ${leg[0].value.length} 글자 입니다.`;
}
</script>
<br><br>
문제2. 다음 보기에 있는 문자열을 ,(콤마) 를 기준으로 잘라내어 하나하나 출력하시오
<fieldset>
<legend>보기</legend>
<label id="la1">콜라,사이다,햄버거,피자,한약</label>
</fieldset>
<br>
<div id="result2"> </div>
<button onclick="stringSplit();"> 확인하기</button>
<script>
function stringSplit(){
let divTC = document.querySelector("#la1").textContent;
let arr = divTC.split(",");
let ans = "";
for(let i = 0; i < arr.length; i++){
ans += `${i+1}.${arr[i]}<br/>`;
}
let result2 = document.getElementById("result2");
result2.innerHTML = ans;
}
</script>728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] forEach/each/append/appendChild 총 정리 (0) | 2025.03.23 |
|---|---|
| [BCGD] 비전공자 백엔드 개발 도전기 (34) (0) | 2025.03.22 |
| [BCGD] 비전공자 백엔드 개발 도전기 (32) (0) | 2025.03.19 |
| [JS] 숫자 카운터 스크립트 (1) | 2024.09.13 |
| [JS] Tab 메뉴 만들기(forEach, Id) (0) | 2024.08.11 |