Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS (v)
06. 미니프로젝트-2W (v)

08. SpringFramework , SrpingBoot
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)

---

JS(Java Script)

DOM & BOM

DOM(Document Object Model)

노드 CSS 변경

노드.style.css속성 = "값"

• style속성을 이용하고 css의 속성은 카멜표기법을 따름
• 노드의 style에 전달되는 값은 문자열로 작성

노드 생성/추가

함수	설명
createElement()	요소를 생성
createTextNode()	텍스트를 생성
appendChild()	요소를 부모 자식 관계로 넣어줌
innerHTML =	요소를 문자방식으로 생성
insertBefore(삽입노드 , 기준노드)	기준노드 앞에 삽입노드 추가

<div class="box"> </div>
<button type="button" id="btn1">innerHTML로 추가하기</button>
<script>
    var btn1 = document.getElementById('btn1');
    var box = document.querySelector('.box');
    btn1.addEventListener('click',function(){
        box.innerHTML = '<strong><i></i>생성!</strong>';
    })
</script>

<hr>
<h3>태그 생성하기 </h3>
<input type="text" class="phone" placeholder="번호 작성">
<button type="button" id="add">추가하기</button>
<ul class="list">
</ul>
<script>
     var add = document.getElementById('add');
     var phone = document.querySelector('.phone');
     var list = document.querySelector('.list');
     add.onclick=function(){
         var li = document.createElement("li");
         var a = document.createElement("a");
         a.href='https://www.naver.com';
         a.innerHTML = phone.value;
         li.appendChild(a);
         list.appendChild(li);
     }
</script>