-
[개발일지] JavaScript & JQuery 기초 수업 Level 1-1Study/Development 2022. 8. 1. 21:33
<코딩애플 온라인강의 수강일지>
Level 1-1 JavaScript & Bootstrap
1. JavaScript로 html 조작하기
document.getElementById('hello').innerHTML = '안녕' document.getElementById('hello').style.color = 'red' document.getElementById('hello').style.fontSize = '16px' //클래스 추가하기 document.getElementsByClassName('list-group')[0].classList.add('show') //클래스 뗐다 붙였다 하기 document.getElementsByClassName('list-group')[0].classList.toggle('show')
2. function
- 가변적인 부분을 파라미터 사용(a)
function alert(a) { document.getElementById('alert').style.display = a } function alert(a, b) { document.getElementById('alert').style.display = a document.getElementById('insert').innerHTML = b }
3. addEventListner
document.getElementById('close').addEventListener('click',function(){ document.getElementById('alert').style.display = 'none })
// addEventListner 콜백함수에 파라미터 넣는 법 function alert(a, b) { document.getElementById('alert').style.display = a document.getElementById('title').innerHTML = b } // 화살표 함수 이용해서 함수 실행을 미뤄줘야 함 document.getElementById('close').addEventListener('click', () => alert('none', ''))
4. querySelector()
//querySelector: 맨 위에 있는것 호출 document.querySelector('.list-group').classList.toggle('show') //querySelector: 전부 호출, 몇번째인지 지정 document.querySelectorAll('.list-group')[0].classList.toggle('show')
5.Bootstrap
-부트스트랩 Quick Start Template
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html>
https://getbootstrap.com/docs/5.2/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
필요한 것들을 검색하여 사용
반응형'Study > Development' 카테고리의 다른 글
[개발일지] JavaScript & JQuery 기초 수업 Level 2-1 (0) 2022.08.02 [개발일지] JavaScript & JQuery 기초 수업 Level 1-2 (0) 2022.08.01 [개발일지] 웹개발 종합반 5주 (0) 2022.07.25 [개발일지] 웹개발 종합반 4주 (0) 2022.07.24 [개발일지] 웹개발 종합반 3주 (0) 2022.07.24