웹 개발 종합반 2주차 - 1주차의 HTML, CSS, Bootstrap 복습
2주차 배울 것 💡 1주차에는 HTML 웹의 뼈대를 만들고 꾸몄다면 2주차에는 자바스크립트를 이용해 움직임을 추가해보자 클릭으로 사진이 바뀐다거나 스크롤을 내리면 사진이 변경되게 !
taejudevlog.tistory.com
웹 개발 종합반 2주차 - 자바스크립트 개요와 기초 문법
Javascript 에 대해 ✅ 자바스크립트 : 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어 ⁉️ 왜 브라우저를 움직이게 하려면 Javascript 를 사용해야 하는지? A. 브라우저가 Javascri
taejudevlog.tistory.com
☝️위의 글을 읽어보고 읽으면 이해가 됩니다!
JQuery
제이쿼리 : HTML의 요소를 조작하는 Javascript 만으로도 기능을 구현할 수 있지만 코드가 복잡하고 브라우저 간 호환성 문제도 고려해야 해서 Jquery가 탄생하게 되었다
자바스크립트에서 복잡하게 써야하는 코드
document.getElementById('hello').innerHTML = '안녕';
Jquery 로 간단하고 직관적으로 사용 가능
$('#hello').html('안녕');
제이쿼리 사용방법
- 미리 작성된 Javascript 코드를 가져오는 것을 임포트(import) 라고 부름
- <head> 와 </head> 사이에 아래를 넣으면 끝!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Jquery 다뤄보기
function checkResult() {
// 제이쿼리로 넣을 변수 선언
let a = '사과'
// 제이쿼리로 넣을 리스트 선언
let b = ['사과', '배', '감', '귤']
// 제이쿼리로 변수 넣기
$('#q1').text(a)
// 제이쿼리로 리스트 요소 넣기
$('#q1').text(a[1])
// 제이쿼리로 리스트의 요소를 HTML 태그처럼 붙이기
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
<div id="q1"></div>
1주차 추억앨범 프로젝트에 제이쿼리 적용
💕 지난 1주차, 2주차에 Javascript, Javascript를 더 쉽게 조작 가능한 Jquery 를 배웠다.
이번에는 프로젝트에 Jquery를 적용해보자
버튼을 클릭해서 포스트 박스를 열고 닫아보고 포스팅 박스에 값을 넣어서 새로운 앨범 카드 만들기 !!
<script>
function openclose() {
$('#postingbox').toggle();
}
function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
</script>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button onclick="openclose()">추억 저장하기</button>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="content" placeholder="name@example.com">
<label for="floatingTextarea">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
전체 코드 👇
728x90
'내배캠_Java 6기 > 웹개발 종합반 강의' 카테고리의 다른 글
| 웹 개발 종합반 2주차 - 자바스크립트 개요와 기초 문법 (0) | 2024.07.05 |
|---|---|
| 웹 개발 종합반 2주차 - 1주차의 HTML, CSS, Bootstrap 복습 (0) | 2024.07.04 |
| 웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 2 (0) | 2024.07.04 |
| 웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 1 (0) | 2024.07.03 |
| 웹 개발 종합반 1주차 TIL - 구글 폰트와 부트스트랩 잘 가져다 사용하기 (0) | 2024.07.03 |