제29차_사업개발캠프 블로그( jQuery심화, Bootstrap탬플릿 활용, Boostrap 심화: 26강~28강)
jQuery를 활용해 최신 데이터 추가 및 삭제해보기
jQuery를 활용해서 앞서 배운 테이블의 마지막 행에 데이터를 넣고 삭제하는 기능을 만들어 봅니다.
jQuery를 활용하면 다양한 기능을 넣을 수 있습니다. 어려운 기능이 아니어도 작성한 코드의 작동 원리를 이해하는 것만으로도 큰 도움이 됩니다. 어려운 코드도 원리는 동일합니다. 다만, 흐름이 다소 복잡할 뿐이죠.
jQuery를 활용해 최신 데이터 추가 및 삭제해보기 | Notion
jQuery를 활용하면 다양한 기능을 넣을 수 있습니다. 어려운 기능이 아니어도 작성한 코드의 작동 원리를 이해하는 것만으로도 큰 도움이 됩니다. 어려운 코드도 원리는 동일합니다. 다만, 흐름이
legend-palm-1f1.notion.site
완성 화면 예시(완전히 똑같이 만들기 보다는 여러분의 아이디어를 최대한 표현한 결과물을 만들어주세요)
가이드 코드를 이용해서 위에 제시된 영상의 결과물을 만들어보세요.
- (-------) 또는 -------으로 되어 있는 곳에 선택자 또는 코드를 작성해주세요
- 테이블 마지막 위치에 ‘새로운 데이터를 넣는 기능’을 구현해주세요
- 테이블 마지막 위치에 ‘데이터(행) 삭제 기능’을 구현해주세요
(가이드 코드에 jQuery를 추가해서 기능을 구현해주세요)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>제품 목록</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// 스크립트
$(document).ready(() => {
$("#brand").on("click", () => {
alert("입고된 브랜드 : 슈프림, 칼하트, 팔라스, 아크테릭스");
});
$("#category").on("click", () => {
alert("분류 카테고리 : 후드, 맨투맨, 모자, 바지");
});
$("#dark_mode").on("click", () => {
$("body").css("background", "black");
$("body").css("color", "white");
$("th, td").css("border", "1px solid white");
$(".product_input").css("border", "1px solid white");
});
$("#light_mode").on("click", () => {
$("body").css("background", "white");
$("body").css("color", "black");
$("th, td").css("border", "1px solid black");
$(".product_input").css("border", "1px solid black");
});
// 작성해야될 코드 시작점
// 1. 테이블 마지막 위치에 ‘새로운 데이터를 넣는 기능’ 구현
$("#submit_data").on(-------, () => {
let (-------) = $(--------).val(); // .val() 는 선택한 양식의 값을 가져옴. 예: let fruit_data = $("#fruit_data").val(); 는 id가 fruit_data인 요소의 값을 변수 fruit_data에 저장함. 여기서는 차례대로 브랜드, 카테고리, 제품명, 가격을 저장하면 됨.
let (-------) = $(--------).val();
let (-------) = $(--------).val();
let (-------) = $(--------).val();
$(".info_table > tbody:last").append( // .info_table 클래스를 가진 요소의 자식 중 마지막(:last) tbody(테이블의 본문) 요소를 선택한다. 그리고 .append() 는 선택된 요소의 마지막 부분에 새로운 내용을 추가한다.
"<tr><td>" + (-------) + "</td><td>" + (-------) + "</td><td>" + (-------) + "</td><td>" + (-------) + "</td></tr>"
);
});
// 2. 테이블 마지막 위치에 ‘데이터(행) 삭제 기능’ 구현
$(-------).on(-------, () => {
$(".info_table > tbody:last > tr:last").remove(); // .info_table 클래스를 가진 테이블의 마지막 tbody의 마지막(:last) 행(tr)이 .remove() 메서드를 통해 삭제된다.
});
});
</script>
<style>
/* 스타일링을 위한 CSS 코드 */
table {
width: 1000px;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #333;
}
th {
background-color: #333;
color: #fff;
}
th:hover {
color: aqua;
}
.product_input {
border: 1px solid black;
width: 300px;
height: 200px;
}
.btn_input {
margin-top: 10px;
text-align: center;
}
.title_input {
text-align: center;
}
.data_input {
padding-left: 20px;
}
</style>
</head>
<body>
<h1><a href="https://kream.co.kr/">KREAM</a> 신규 상품 목록</h1>
<!-- 카테고리 선택을 위한 select 태그 -->
<select id="categorySelect">
<option value="" disabled selected>카테고리를 선택해주세요</option>
<option value="후드">후드</option>
<option value="맨투맨">맨투맨</option>
<option value="모자">모자</option>
<option value="바지">바지</option>
</select>
<!-- 검색 기능을 위한 input 태그 -->
<input type="text" id="searchInput" placeholder="제품명을 입력하세요..." />
<button>검색</button>
<button id="dark_mode">다크모드</button>
<button id="light_mode">라이트모드</button>
<br />
<br />
<div class="product_input">
<div class="title_input">
<h3>입력할 제품 정보를 적어주세요</h3>
</div>
<div class="data_input">
<span>브랜드 : </span>
<input type="text" id="brand_data" placeholder="브랜드를 입력해주세요"/><br />
<span>카테고리 : </span>
<input type="text" id="category_data" placeholder="카테고리를 선택해주세요"/><br />
<span>제품명 : </span>
<input type="text" id="product_data"placeholder="제품명을 적어주세요"/>
<br />
<span>가격 : </span>
<input type="text" id="price_data" placeholder="가격을 적어주세요" />
</div>
<div class="btn_input">
<button id="(-------)">정보 입력</button> <!-- 버튼의 아이디 설정 -->
</div>
</div>
<br />
<button id="remove_data">최신정보 삭제</button>
<br />
<table class="(-------)"> <!-- 테이블의 클래스 설정 -->
<thead>
<tr>
<th id="brand">브랜드</th>
<th id="category">카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>브랜드 A</td>
<td>후드</td>
<td>상품 A</td>
<td>100,000원</td>
</tr>
<tr>
<td>브랜드 B</td>
<td>맨투맨</td>
<td>상품 B</td>
<td>200,000원</td>
</tr>
<tr>
<td>브랜드 C</td>
<td>모자</td>
<td>상품 C</td>
<td>300,000원</td>
</tr>
<tr>
<td>브랜드 D</td>
<td>바지</td>
<td>상품 D</td>
<td>150,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
나의 과제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="제주도,여행,스마트 관광,빅데이터,인공진능, MBTI,백패킹,트래킹,스노쿨링,힐링,치유,체험,숙박,교통,관광지,여행일정" />
<meta name="description" content="스마트 관광, 힐링, 체험,백스노쿨링은 백스노쿨링 다이어리에서!" />
<title>백스노쿨링 신규 상품 목록</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// 스크립트
$(document).ready(() => {
$("#brand").on("click", () => {
alert("입고된 브랜드 : 브랜드 A, 브랜드 B, 브랜드 C, 브랜드 D, 브랜드 E");
});
$("#category").on("click", () => {
alert("분류 카테고리 : 스노클링, 백패킹, 트래킹, 힐링, 체험");
});
$("#dark_mode").on("click", () => {
$("body").css("background", "black");
$("body").css("color", "white");
$("th, td").css("border", "1px solid white");
$(".product_input").css("border", "1px solid white");
});
$("#light_mode").on("click", () => {
$("body").css("background", "white");
$("body").css("color", "black");
$("th, td").css("border", "1px solid black");
$(".product_input").css("border", "1px solid black");
});
// 작성해야될 코드 시작점
// 1. 테이블 마지막 위치에 ‘새로운 데이터를 넣는 기능’ 구현
$("#submit_data").on("click", () => {
let brand_data = $("#brand_data").val(); // .val() 는 선택한 양식의 값을 가져옴. 예: let fruit_data = $("#fruit_data").val(); 는 id가 fruit_data인 요소의 값을 변수 fruit_data에 저장함. 여기서는 차례대로 브랜드, 카테고리, 제품명, 가격을 저장하면 됨.
let category_data = $("#category_data").val();
let product_data = $("#product_data").val();
let price_data = $("#price_data").val();
$(".info_table > tbody:last").append( // .info_table 클래스를 가진 요소의 자식 중 마지막(:last) tbody(테이블의 본문) 요소를 선택한다. 그리고 .append() 는 선택된 요소의 마지막 부분에 새로운 내용을 추가한다.
"<tr><td>" + brand_data + "</td><td>" + category_data + "</td><td>" + product_data + "</td><td>" + price_data + "</td></tr>"
);
});
// 2. 테이블 마지막 위치에 ‘데이터(행) 삭제 기능’ 구현
$("#remove_data").on("click", () => {
$(".info_table > tbody:last > tr:last").remove(); // .info_table 클래스를 가진 테이블의 마지막 tbody의 마지막(:last) 행이 .remove() 메서드를 통해 삭제된다.
});
});
</script>
<style>
/* 스타일링을 위한 CSS 코드 */
table {
width: 1000px;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #333;
}
th {
background-color: #333;
color: #fff;
}
th:hover {
color: aqua;
}
.product_input {
border: 1px solid black;
width: 300px;
height: 200px;
}
.btn_input {
margin-top: 10px;
text-align: center;
}
.title_input {
text-align: center;
}
.data_input {
padding-left: 20px;
}
</style>
</head>
<body>
<h1><a href="">백스노쿨링 다이어리</a> 신규 상품 목록</h1>
<!-- 카테고리 선택을 위한 select 태그 -->
<select id="categorySelect">
<option value="" disabled selected>카테고리를 선택해주세요</option>
<option value="스노쿨링">스노쿨링</option>
<option value="백패킹">백패킹</option>
<option value="트래킹">트래킹</option>
<option value="체험">체험</option>
</select>
<!-- 검색 기능을 위한 input 태그 -->
<input type="text" id="searchInput" placeholder="제품명을 입력하세요..." />
<button>검색</button>
<button id="dark_mode">다크모드</button>
<button id="light_mode">라이트모드</button>
<br />
<br />
<div class="product_input">
<div class="title_input">
<h3>입력할 제품 정보를 적어주세요</h3>
</div>
<div class="data_input">
<span>브랜드 : </span>
<input type="text" id="brand_data" placeholder="브랜드를 입력해주세요" /><br />
<span>카테고리 : </span>
<input type="text" id="category_data" placeholder="카테고리를 선택해주세요" /><br />
<span>제품명 : </span>
<input type="text" id="product_data" placeholder="제품명을 적어주세요" />
<br />
<span>가격 : </span>
<input type="text" id="price_data" placeholder="가격을 적어주세요" />
</div>
<div class="btn_input">
<button id="submit_data">정보 입력</button>
</div>
</div>
<br />
<button id="remove_data">최신정보 삭제</button>
<br />
<table class="info_table">
<thead>
<tr>
<th id="brand">브랜드</th>
<th id="category">카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>브랜드 A</td>
<td>스노쿨링</td>
<td>상품 A</td>
<td>100,000원</td>
</tr>
<tr>
<td>브랜드 B</td>
<td>백패킹</td>
<td>상품 B</td>
<td>200,000원</td>
</tr>
<tr>
<td>브랜드 C</td>
<td>트래킹</td>
<td>상품 C</td>
<td>300,000원</td>
</tr>
<tr>
<td>브랜드 D</td>
<td>힐링</td>
<td>상품 D</td>
<td>150,000원</td>
</tr>
<tr>
<td>브랜드 E</td>
<td>체험</td>
<td>상품 E</td>
<td>150,000원</td>
</tr>
</tbody>
</table>
</body>
</html>1.완성된 구현 화면
2.최신 정보 삭제 클릭 후 삭제 과정
3.새롭게 입력할 제품 정보를 실행
정답(참고용으로만 봐주세요)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>제품 목록</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// 스크립트
$(document).ready(() => {
$("#brand").on("click", () => {
alert("입고된 브랜드 : 슈프림, 칼하트, 팔라스, 아크테릭스");
});
$("#category").on("click", () => {
alert("분류 카테고리 : 후드, 맨투맨, 모자, 바지");
});
$("#dark_mode").on("click", () => {
$("body").css("background", "black");
$("body").css("color", "white");
$("th, td").css("border", "1px solid white");
$(".product_input").css("border", "1px solid white");
});
$("#light_mode").on("click", () => {
$("body").css("background", "white");
$("body").css("color", "black");
$("th, td").css("border", "1px solid black");
$(".product_input").css("border", "1px solid black");
});
// 작성해야될 코드 시작점
// 1. 테이블 마지막 위치에 ‘새로운 데이터를 넣는 기능’ 구현
$("#submit_data").on("click", () => {
let brand_data = $("#brand_data").val(); // .val() 는 선택한 양식의 값을 가져옴. 예: let fruit_data = $("#fruit_data").val(); 는 id가 fruit_data인 요소의 값을 변수 fruit_data에 저장함. 여기서는 차례대로 브랜드, 카테고리, 제품명, 가격을 저장하면 됨.
let category_data = $("#category_data").val();
let product_data = $("#product_data").val();
let price_data = $("#price_data").val();
$(".info_table > tbody:last").append( // .info_table 클래스를 가진 요소의 자식 중 마지막(:last) tbody(테이블의 본문) 요소를 선택한다. 그리고 .append() 는 선택된 요소의 마지막 부분에 새로운 내용을 추가한다.
"<tr><td>" + brand_data + "</td><td>" + category_data + "</td><td>" + product_data + "</td><td>" + price_data + "</td></tr>"
);
});
// 2. 테이블 마지막 위치에 ‘데이터(행) 삭제 기능’ 구현
$("#remove_data").on("click", () => {
$(".info_table > tbody:last > tr:last").remove(); // .info_table 클래스를 가진 테이블의 마지막 tbody의 마지막(:last) 행이 .remove() 메서드를 통해 삭제된다.
});
});
</script>
<style>
/* 스타일링을 위한 CSS 코드 */
table {
width: 1000px;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #333;
}
th {
background-color: #333;
color: #fff;
}
th:hover {
color: aqua;
}
.product_input {
border: 1px solid black;
width: 300px;
height: 200px;
}
.btn_input {
margin-top: 10px;
text-align: center;
}
.title_input {
text-align: center;
}
.data_input {
padding-left: 20px;
}
</style>
</head>
<body>
<h1><a href="https://kream.co.kr/">KREAM</a> 신규 상품 목록</h1>
<!-- 카테고리 선택을 위한 select 태그 -->
<select id="categorySelect">
<option value="" disabled selected>카테고리를 선택해주세요</option>
<option value="후드">후드</option>
<option value="맨투맨">맨투맨</option>
<option value="모자">모자</option>
<option value="바지">바지</option>
</select>
<!-- 검색 기능을 위한 input 태그 -->
<input type="text" id="searchInput" placeholder="제품명을 입력하세요..." />
<button>검색</button>
<button id="dark_mode">다크모드</button>
<button id="light_mode">라이트모드</button>
<br />
<br />
<div class="product_input">
<div class="title_input">
<h3>입력할 제품 정보를 적어주세요</h3>
</div>
<div class="data_input">
<span>브랜드 : </span>
<input type="text" id="brand_data" placeholder="브랜드를 입력해주세요"/><br />
<span>카테고리 : </span>
<input type="text" id="category_data" placeholder="카테고리를 선택해주세요"/><br />
<span>제품명 : </span>
<input type="text" id="product_data"placeholder="제품명을 적어주세요"/>
<br />
<span>가격 : </span>
<input type="text" id="price_data" placeholder="가격을 적어주세요" />
</div>
<div class="btn_input">
<button id="submit_data">정보 입력</button>
</div>
</div>
<br />
<button id="remove_data">최신정보 삭제</button>
<br />
<table class="info_table">
<thead>
<tr>
<th id="brand">브랜드</th>
<th id="category">카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>브랜드 A</td>
<td>후드</td>
<td>상품 A</td>
<td>100,000원</td>
</tr>
<tr>
<td>브랜드 B</td>
<td>맨투맨</td>
<td>상품 B</td>
<td>200,000원</td>
</tr>
<tr>
<td>브랜드 C</td>
<td>모자</td>
<td>상품 C</td>
<td>300,000원</td>
</tr>
<tr>
<td>브랜드 D</td>
<td>바지</td>
<td>상품 D</td>
<td>150,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
과제 제출 방법
이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 mission.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!
셀프 채점 기준
- [ ] jQuery를 사용하기 위해 추가해야하는 코드에 대해 알고 있는지
- [ ] jQuery 코드를 작성하는 위치에 대해 알고 있는지
- [ ] 기능 구현을 위해 함수를 작성할 수 있는지
(선택) 부트스트랩을 이용해 기존 사이트 개선해보기
기존에 코드작성을 통해 구현한 페이지를 Bootstrap을 이용해 구현해 봅니다.
HTML, CSS, JS로 어렵게 구현했던 기능들을 Bootstrap으로 쉽게 구현할 수 있습니다. Bootstrap을 이용해 기존에 만들었던 페이지를 구현해보고 기능도 추가해봅니다.
완성 전 화면
완성 화면 예시(완전히 똑같이 만들기 보다는 여러분의 아이디어를 최대한 표현한 결과물을 만들어주세요)
가이드 코드를 이용해서 위에 제시된 그림의 결과물을 만들어보세요.
- 카테고리(셀렉트)를 클릭하면 ‘상의, 하의, 신발, 패션잡화 메뉴가 나오게’ 코드를 작성해주세요.
- 입력 버튼 안에 “제품명을 입력해주세요”가 나오게 코드를 작성해주세요.
- 조회 버튼이 ‘입력창 옆에 붙어 있도록’ 코드를 작성해주세요.
- 테이블을 이용해 “최상단에는 속성 값을 넣고 하단에는 데이터가 입력되도록” 코드를 작성해주세요.
- “최하단에는 페이지 네이션 기능이 나타나도록” 코드를 작성해주세요.
기능 구현을 위한 참고 사이트 : https://getbootstrap.kr/docs/5.3/getting-started/introduction/
Bootstrap 시작하기
Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.
getbootstrap.kr
가이드 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Admin Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<h3 class="mt-5 mb-3">신규 등록 상품</h3>
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<!-- 카테고리 셀렉트 코드를 넣어주세요-->
</select>
</div>
<div class="col-3">
<!-- input 입력창 코드를 넣어주세요 -->
</div>
<div class="col-auto">
<!-- 조회버튼 코드를 넣어주세요 -->
</div>
</form>
<div class="container mt-3">
<table class="table table-sm">
<thead>
<!-- 열의 속성값을 나타내는 코드를 작성해주세요 (예 : 카테고리, 브랜드, 상품명, 가격) -->
</thead>
<tbody id="data-table">
</tbody>
</table>
</div>
<!-- 페이지 네이션 코드를 넣어주세요 -->
<script>
const data = [
{ category: "상의", brand: 'Supreme', product: '슈프림 박스로고 후드티', price: '390,000' },
{ category: "하의", brand: 'DIESEL', product: '디젤 트랙 팬츠', price: '188,000' },
{ category: "신발", brand: 'Nike', product: '에어포스 1', price: '137,000' },
{ category: "패션잡화", brand: 'Music&Goods', product: '빵빵이 키링', price: '29,000' },
// ...
];
const dataTable = document.getElementById('data-table');
data.forEach((item) => {
const row = dataTable.insertRow();
row.insertCell(0).innerHTML = item.category;
row.insertCell(1).innerHTML = item.brand;
row.insertCell(2).innerHTML = item.product;
row.insertCell(3).innerHTML = item.price;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
■나의 과제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Admin Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<h3 class="mt-5 mb-3">신규 등록 상품</h3>
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<!-- 카테고리 셀렉트 코드를 넣어주세요-->
<select class="form-select" id="inlineFormSelectPref">
<option value="1">카테고리</option>
<option value="1">스노쿨링</option>
<option value="2">백패킹</option>
<option value="3">트래킹</option>
<option value="3">힐링</option>
<option value="3">체험</option>
</select>
</div>
<div class="col-3">
<!-- input 입력창 코드를 넣어주세요 -->
<input class="form-control form-control-lg" type="text" placeholder="입력해주세요"
aria-label=".form-control-lg example">
</div>
<div class="col-auto">
<!-- 조회버튼 코드를 넣어주세요 -->
<button type="button" class="btn btn-primary btn-sm">조회</button>
</div>
</form>
<div class="container mt-3">
<table class="table table-sm">
<thead>
<!-- 열의 속성값을 나타내는 코드를 작성해주세요 (예 : 카테고리, 브랜드, 상품명, 가격) -->
<table class="table">
<thead>
<tr>
<th scope="col">카테고리</th>
<th scope="col">브랜드</th>
<th scope="col">제품명</th>
<th scope="col">가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>스노쿨링</td>
<td>브랜드 A</td>
<td>상품 A</td>
<td>100,000</td>
</tr>
<tr>
<td>백패킹</td>
<td>브랜드 B</td>
<td>상품 B</td>
<td>200,000</td>
</tr>
<tr>
<td>트래킹</td>
<td>브랜드 C</td>
<td>상품 C</td>
<td>300,000</td>
</tr>
<tr>
<td>힐링</td>
<td>브랜드 D</td>
<td>상품 D</td>
<td>150,000</td>
</tr>
<tr>
<td>체험</td>
<td>브랜드 E</td>
<td>상품 E</td>
<td>150,000</td>
</tr>
</tbody>
</table>
</thead>
<tbody id="data-table">
</tbody>
</table>
</div>
<!-- 페이지 네이션 코드를 넣어주세요 -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<script>
const data = [
{ category: "상의", brand: 'Supreme', product: '슈프림 박스로고 후드티', price: '390,000' },
{ category: "하의", brand: 'DIESEL', product: '디젤 트랙 팬츠', price: '188,000' },
{ category: "신발", brand: 'Nike', product: '에어포스 1', price: '137,000' },
{ category: "패션잡화", brand: 'Music&Goods', product: '빵빵이 키링', price: '29,000' },
// ...
];
const dataTable = document.getElementById('data-table');
data.forEach((item) => {
const row = dataTable.insertRow();
row.insertCell(0).innerHTML = item.category;
row.insertCell(1).innerHTML = item.brand;
row.insertCell(2).innerHTML = item.product;
row.insertCell(3).innerHTML = item.price;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
</body>
</html>
1.완성된 과제_전체
2.카테고리
정답(참고용으로만 봐주세요)
1. 카테고리(셀렉트)를 클릭하면 ‘상의, 하의, 신발, 패션잡화 메뉴가 나오게’ 코드를 작성해주세요.
(선택) 부트스트랩을 이용해 기존 사이트 개선해보기 | Notion
HTML, CSS, JS로 어렵게 구현했던 기능들을 Bootstrap으로 쉽게 구현할 수 있습니다. Bootstrap을 이용해 기존에 만들었던 페이지를 구현해보고 기능도 추가해봅니다.
legend-palm-1f1.notion.site
2, 입력 버튼 안에 “제품명을 입력해주세요”가 나오게 코드를 작성해주세요.
(선택) 부트스트랩을 이용해 기존 사이트 개선해보기 | Notion
HTML, CSS, JS로 어렵게 구현했던 기능들을 Bootstrap으로 쉽게 구현할 수 있습니다. Bootstrap을 이용해 기존에 만들었던 페이지를 구현해보고 기능도 추가해봅니다.
legend-palm-1f1.notion.site
3. 조회 버튼이 ‘입력창 옆에 붙어 있도록’ 코드를 작성해주세요.
(선택) 부트스트랩을 이용해 기존 사이트 개선해보기 | Notion
HTML, CSS, JS로 어렵게 구현했던 기능들을 Bootstrap으로 쉽게 구현할 수 있습니다. Bootstrap을 이용해 기존에 만들었던 페이지를 구현해보고 기능도 추가해봅니다.
legend-palm-1f1.notion.site
4. 테이블을 이용해 “최상단에는 속성 값을 넣고 하단에는 데이터가 입력되도록” 코드를 작성해주세요.
(선택) 부트스트랩을 이용해 기존 사이트 개선해보기 | Notion
HTML, CSS, JS로 어렵게 구현했던 기능들을 Bootstrap으로 쉽게 구현할 수 있습니다. Bootstrap을 이용해 기존에 만들었던 페이지를 구현해보고 기능도 추가해봅니다.
legend-palm-1f1.notion.site
5. “최하단에는 페이지 네이션 기능이 나타나도록” 코드를 작성해주세요.
(선택) 부트스트랩을 이용해 기존 사이트 개선해보기 | Notion
HTML, CSS, JS로 어렵게 구현했던 기능들을 Bootstrap으로 쉽게 구현할 수 있습니다. Bootstrap을 이용해 기존에 만들었던 페이지를 구현해보고 기능도 추가해봅니다.
legend-palm-1f1.notion.site
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<title>Admin Page</title>
</head>
<body>
<div class="container mt-3">
<h3 class="mt-5 mb-3">신규 등록 상품</h3>
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<!-- 카테고리 셀렉트 코드 넣기-->
<option selected>카테고리</option>
<option value="outer">아우터</option>
<option value="top">상의</option>
<option value="bottom">하의</option>
<option value="accessory">악세사리</option>
</select>
</div>
<div class="col-3">
<!-- input 입력창 코드 넣기 -->
<label class="visually-hidden" for="autoSizingInput">product name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="제품명을 입력해주세요">
</div>
<div class="col-auto">
<!-- 조회 버튼 코드 넣기 -->
<button type="button" class="btn btn-primary">검색</button>
</div>
</form>
<div class="container mt-3">
<table class="table table-sm">
<thead>
<!-- 열의 속성값을 나타내는 코드를 작성 (예 : 카테고리, 브랜드, 상품명, 가격) -->
<tr>
<th scope="col">카테고리</th>
<th scope="col">브랜드</th>
<th scope="col">상품명</th>
<th scope="col">가격</th>
</tr>
</thead>
<tbody id="data-table">
</tbody>
</table>
</div>
<!-- 페이지 네이션 코드 넣기 -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<script>
const data = [
{ category: "상의", brand: 'Supreme', product: '슈프림 박스로고 후드티', price: '390,000' },
{ category: "하의", brand: 'DIESEL', product: '디젤 트랙 팬츠', price: '188,000' },
{ category: "신발", brand: 'Nike', product: '에어포스 1', price: '137,000' },
{ category: "패션잡화", brand: 'Music&Goods', product: '빵빵이 키링', price: '29,000' },
// ...
];
const dataTable = document.getElementById('data-table');
data.forEach((item) => {
const row = dataTable.insertRow();
row.insertCell(0).innerHTML = item.category;
row.insertCell(1).innerHTML = item.brand;
row.insertCell(2).innerHTML = item.product;
row.insertCell(3).innerHTML = item.price;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
과제 제출 방법
이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 mission.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!
셀프 채점 기준
- [ ] Bootstrap의 장점과 단점을 알고 있는지
- [ ] Bootstrap을 사용하기 위해 설정해야될 기본 코드에 대해 알고 있는지
- [ ] Bootstrap 공식 사이트에서 제공하는 기능의 코드를 가져와 사용할 수 있는지
일일 클래스&학습 도서 리뷰
개념을 명확하게 이해하기 위해서는 타인에게 가르치는 것이 가장 효율적입니다. 글쓰기 또한 그 방법 중 하나입니다.
실습 과제
1.오늘 VOD 강의 및 학습 도서를 통해 배운 내용 중 핵심 개념을 블로그에 정리하여 작성해 주세요
jQuery 선택자 및 기본 함수
- 선택자: CSS 선택자와 동일한 방식으로 요소를 선택
- ID 선택자: # + 아이디
- 클래스 선택자: . + 클래스명
- 태그 선택자: 태그명
- 기본 함수:
- text(): 선택된 요소의 텍스트 내용 가져오기
- html(): 선택된 요소의 HTML 코드 가져오기
- click(): 선택된 요소에 클릭 이벤트 발생
- getter 및 setter 함수
- 게터 함수: 선택된 요소의 값을 가져오는 함수 (인수 없이 호출)
- 세터 함수: 선택된 요소의 값을 설정하는 함수 (인수를 전달하여 호출)
- text() 및 html() 함수는 게터 함수 또는 세터 함수로 사용 가능
1. jQuery 선택자
- CSS 선택자와 동일한 방식으로 요소를 선택합니다.
- ID, 클래스, 태그 이름 등을 사용하여 선택할 수 있습니다.
- 예시:
- $("#btn"): ID가 "btn"인 버튼 선택
- $(".class-name"): 클래스가 "class-name"인 모든 요소 선택
- $("div"): 모든div` 태그 선택
2. 버튼 클릭 이벤트
- click() 메서드를 사용하여 버튼 클릭 이벤트를 처리합니다.
- 버튼 클릭 시 실행할 코드를 메서드 내에 작성합니다.
- 예시:
$("#btn").click(function() {
// 버튼 클릭 시 실행할 코드
});
jQuery 메소드
- text() 메서드: 선택된 요소의 텍스트를 가져오거나 설정합니다.
- html() 메서드: 선택된 요소의 HTML 코드를 가져오거나 설정합니다.
- append() 메서드: 선택된 요소의 마지막에 새로운 요소를 추가합니다.
- 예시:
// 선택된 버튼의 텍스트 가져오기
var text = $("#btn").text();
// 선택된 div의 HTML 코드 설정하기
$("#div").html("<p>Hello World!</p>");
// 선택된 ul에 새 li 요소 추가하기
$("#ul").append("<li>New Item</li>");
채팅 앱 예시
- append() 메서드를 사용하여 채팅 메시지를 추가합니다.
- 새로운 메시지 입력 시 click() 이벤트를 통해 메시지 추가 기능을 구현합니다.
- 예시
$("#send-btn").click(function() {
var message = $("#message").val();
$("#chat-list").append("<li>" + message + "</li>");
});
부트스트랩 템플릿 활용 가이드
1. 부트스트랩이란 무엇인가?
부트스트랩은 웹사이트 개발을 위한 오픈 소스 프레임워크입니다. HTML, CSS, JavaScript를 기반으로 다양한 UI 컴포넌트와 기능을 제공하여 빠르고 쉽게 웹사이트를 제작할 수 있도록 도와줍니다. 디자인 경험이 없는 개발자도 쉽게 사용할 수 있다는 장점이 있습니다.
2. 부트스트랩 템플릿 활용
부트스트랩 템플릿은 미리 디자인되고 코딩된 웹사이트雛形입니다. 다양한 무료 및 유료 템플릿이 제공되어 있으며, 원하는 디자인을 선택하여 빠르게 웹사이트 제작을 시작할 수 있습니다.
1. 부트스트랩 템플릿 소개
- 웹사이트 제작 시간을 단축하고 디자인 및 기능 구현을 용이하게 하는 미리 디자인된 레이아웃
- 다양한 기능과 디자인 제공, 무료/유료 옵션 선택 가능
- 코딩 경험이 부족하거나 시간이 부족한 경우 유용
- 디자인, 기능, 반응형 디자인 등을 고려하여 선택
2. 스타트 부트스트랩 사이트 활용
- 다양한 무료/유료 템플릿 제공
- 검색 기능으로 원하는 템플릿 찾기 가능
- 프리 다운로드 옵션을 통한 템플릿 다운로드 및 압축 해제
- 템플릿 파일 구조 및 코드 확인
- 기본적인 HTML/CSS 지식 필요
3. 템플릿 커스터마이징
- 이미지 변경: 검사 도구 활용하여 이미지 태그 찾고 원하는 이미지로 변경
- 색상 변경: CSS 파일에서 클래스명 검색 후 원하는 색상으로 변경
- 텍스트 변경: HTML 코드에서 원하는 텍스트 찾고 변경
- 기본적인 HTML/CSS 지식 필요
4. 추가 활용 및 고려 사항
- 회사 사이트, 포트폴리오, 블로그 등 다양한 사이트 제작에 활용 가능
- 다양한 템플릿 비교 후 자신에게 맞는 템플릿 선택
- 템플릿을 기반으로 추가 기능 및 디자인 개발 가능
- Bootstrap 공식 문서 및 커뮤니티 활용
5.실습: 반응형 컨테이너 및 로우 레이아웃
- 스타터 템플릿 코드 가져오기
- 컨테이너(container) 클래스를 이용한 컨테이너 생성
- 로우(row) 클래스를 이용한 로우 생성
- 컬럼(col) 클래스를 이용한 컬럼 생성
- 테두리 속성을 이용한 디자인 설정
- 반응형 디자인 확인: 브라우저 크기 조절
템플릿 활용 방법
- 템플릿 선택: 스타트 부트스트랩( https://startbootstrap.com) 같은 사이트에서 원하는 디자인의 템플릿을 선택합니다.
- 다운로드: 선택한 템플릿을 다운로드 받습니다.
- 압축 해제: 다운로드 받은 압축 파일을 압축 해제합니다.
- 코드 확인: 압축 해제된 폴더에는 HTML, CSS, JavaScript 파일들이 포함되어 있습니다. 코드를 확인하고 원하는 부분을 수정합니다.
- 로컬 서버 실행: 압축 해제된 폴더를 로컬 서버에 실행하여 웹사이트를 확인합니다.
- 수정 및 배포: 원하는 디자인과 기능에 맞춰 웹사이트를 수정하고, 완성된 웹사이트를 서버에 배포합니다.
Bootstrap 템플릿 활용의 장점
- 시간 절약: 디자인 및 코딩 시간 단축
- 비용 절감: 개발 비용 감소
- 반응형 디자인: 다양한 기기에서 적절하게 보여짐
- 초보자 친화적: 코딩 경험 없이도 웹사이트 제작 가능
Bootstrap 템플릿 활용의 단점
- 디자인 선택 제한: 기존 템플릿 중 선택해야 함
- 커스터마이징 제한: 코딩 지식 필요
- 모든 기능 구현 불가: 추가 기능 개발 필요
템플릿 활용 시 주의 사항
- 템플릿은 디자인만 제공하는 것이므로, 기능 구현은 직접 코딩해야 합니다.
- 템플릿에 사용된 코드를 이해하고 수정할 수 있어야 합니다.
- 무료 템플릿은 상업적 용도로 사용할 수 없는 경우가 있습니다.
3. 부트스트랩 템플릿 활용 예시
- 포트폴리오 사이트
- 블로그
- 비즈니스 사이트
- 온라인 상점
4. 결론
- Bootstrap 템플릿은 웹사이트 제작을 빠르고 쉽게 해주는 유용한 도구
- 다양한 장점이 있지만, 단점도 고려하여 선택
- 기본적인 HTML/CSS 지식 습득 필요
- 템플릿을 활용하여 자신만의 웹사이트 제작 가능
5. 부트스트랩 학습 자료
- 부트스트랩 공식 문서: https://getbootstrap.com/docs/5.2/
- 스타트 부트스트랩: https://startbootstrap.com/
https://getbootstrap.com/docs/5.2/getting-started/introduction/
getbootstrap.com
Start Bootstrap
startbootstrap.com
2.주의할 점은 해당 강의를 보지 않은 사람이 이해할 수 있도록 타인에게 가르치듯이 작성해주세요.
- 단순 개념을 정리한 글과 타인에게 정보 전달을 위한 글은 형식 부터 차이가 있습니다.
- 단순 개념 정리 : https://jkkou.tistory.com/42
19. Pretotype (Pretotyping)
안녕하세요, 꾸우._. 입니다. 오늘은 프로토타입 이전에 만들어지는 프리토타입에 대해 알아보고 정리해보겠습니다. 📌 Pretotype (Pretotyping) 프리토타입 (Pretotype)은 프로토타입에서 파생된 용어로
jkkou.tistory.com
- 가르치듯 작성된 글 : https://ibks-platform.tistory.com/373
프리토타입 (pretotype) - 비즈니스 아이디어 검증 방법론
막대한 비용과 시간을 들여서 제품을 개발하고 시장에서 정면으로 부딪쳐 결과를 알기 전에, 간단하고 효과적으로 아이디어만 검증할 수 있는 방법이 없을까..? 해서 구글이나 실리콘밸리에서
ibks-platform.tistory.com
왜 클래스 리뷰를 하나요?
단순 강의를 듣는 것만으로는 절대로 기억할 수 없습니다. 다른 사람을 가르치는 글을 작성하는 것만으로도 기억율을 극단적으로 높힐 수 있습니다.
셀프 채점 기준
- [ ] 단순 개념 정리가 아니라 타인에게 개념을 설명해 주는 형태로 작성되었는지
- [ ] 강의 내용을 그대로 작성한 것이 아니라 본인의 생각이 들어갔는지