'ChatGPT API로 초간간 AI서비스 만들면 생태계 이해하기'
jQuery를 활용해 alert 기능 만들어보기
jQuery를 활용해 alert 기능 만들어보기 | Notion
jQuery를 활용하면 다양한 기능을 넣을 수 있습니다. 어려운 기능이 아니어도 작성한 코드의 작동 원리를 이해하는 것만으로도 큰 도움이 됩니다. 어려운 코드도 원리는 동일합니다. 다만, 흐름이
legend-palm-1f1.notion.site
jQuery를 활용해 기능을 직접 구현해봅니다. 코드를 작성하면서 jQuery의 작동 방식에 대해 이해합니다.
jQuery를 활용하면 다양한 기능을 넣을 수 있습니다. 어려운 기능이 아니어도 작성한 코드의 작동 원리를 이해하는 것만으로도 큰 도움이 됩니다. 어려운 코드도 원리는 동일합니다. 다만, 흐름이 다소 복잡할 뿐이죠.
완성 화면 예시(완전히 똑같이 만들기 보다는 여러분의 아이디어를 최대한 표현한 결과물을 만들어주세요)
가이드 코드를 이용해서 위에 제시된 영상의 결과물을 만들어보세요.
- 아래 2가지 기능을 jQuery로 작성해 주세요.
- 브랜드 열 제목을 마우스로 클릭하면 "입고된 브랜드 : 슈프림, 칼하트, 팔라스, 아크테릭스”라는 alert가 노출되도록 코드를 작성.
- 카테고리 열 제목을 마우스로 클릭하면 "분류 카테고리 : 후드, 맨투맨, 모자, 바지”라는 alert가 노출되도록 코드를 작성.
(가이드 코드에 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>
// 스크립트(jQuery 코드)를 여기에 작성해 주세요.
</script>
<style>
/* 스타일링을 위한 CSS 코드 */
table {
width: 1000px;
border-collapse: collapse; /* 인접한 셀들 사이의 경계(border)가 합쳐집니다. 이는 테이블의 외곽선과 셀들 사이의 경계가 하나로 병합되어 깔끔하게 보여집니다. */
}
th, td {
padding: 10px;
border: 1px solid #333;
}
th {
background-color: #333;
color: #fff;
}
th:hover {
color: aqua;
}
</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>
<br><br>
<table>
<tr>
<th>브랜드</th> <!-- 이 부분에 추가적인 코드가 필요합니다. -->
<th>카테고리</th> <!-- 이 부분에 추가적인 코드가 필요합니다. -->
<th>제품명</th>
<th>가격</th>
</tr>
<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>
</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>
//스크립트 : // 브랜드 클릭 시 alert 띄위기
$(document).ready(() => {
$("#brand").on("click", () => {
alert("입고된 브랜드: 슈크림, 칼하트, 팔라스,아크테릭스")
})
// 카테고리 클릭 시 alert 띄위기
$("#category").on("click", () => {
alert("분류 카데고리: 스노클링, 백패킹, 트래킹, 힐링, 체험")
})
});
</script>
<style>
/* 스타일링을 위한 CSS 코드- 테이블 스타일 */
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid #ddd;
box-shadow: 0 0 10px #ddd;
}
/* 테이블 헤더 스타일 */
th,
td {
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
border: 1px solid #ddd;
}
/*테이블 바디 스타일 */
th {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
/* 테이블 호버 효과*/
th:hover {
background-color: #f2f2f2;
}
/* 검색창 스타일 */
#searchInput {
width: 200px;
padding: 5px;
border: 1px solid #ddd;
}
/* 검색 버튼 스타일 */
#searchButton {
padding: 5px 10px;
border: 1px solid #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<h1><a href="">백스노쿨링 다이어리</a> 신규 상품 목록</h1>
<select id="categorySelect">
<option value="" disabled selected>카테고리를 선택해주세요</option>
<option value="스노클링">스노클링</option>
<option value="백패킹">백패킹</option>
<option value="트래킹">트래킹</option>
<option value="힐링">힐링</option>
<option value="체험">체험</option>
</select>
<input type="text" id="searchInput" placeholder="상품명을 검색해보세요">
<button id="searchButton">검색</button>
<br><br>
<table>
<tr>
<th id="brand">브랜드</th> <!-- id 추가 -->
<th id="category">카테고리</th> <!-- id 추가 -->
<th>제품명</th>
<th>가격</th>
</tr>
<tr>
<th>브랜드</th>
<th>카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
<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>
</table>
</body>
</html>
- 브랜드 열 제목을 마우스로 클릭하면 "입고된 브랜드 : 슈프림, 칼하트, 팔라스, 아크테릭스”라는 alert가 노출되도록 코드를 작성.
- 카테고리 열 제목을 마우스로 클릭하면 "분류 카테고리 : 후드, 맨투맨, 모자, 바지”라는 alert가 노출되도록 코드를 작성.
정답(참고용으로만 봐주세요)
<!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("입고된 브랜드 : 슈프림, 칼하트, 팔라스, 아크테릭스")
})
// 브랜드 클릭 시 alert 띄우기
$("#category").on("click", () =>{
alert("분류 카테고리 : 후드, 맨투맨, 모자, 바지")
})
// 카테고리 클릭 시 alert 띄우기
});
</script>
<style>
/* 스타일링을 위한 CSS 코드 */
table {
width: 1000px;
border-collapse: collapse; /* 인접한 셀들 사이의 경계(border)가 합쳐집니다. 이는 테이블의 외곽선과 셀들 사이의 경계가 하나로 병합되어 깔끔하게 보여집니다. */
}
th, td {
padding: 10px;
border: 1px solid #333;
}
th {
background-color: #333;
color: #fff;
}
th:hover {
color: aqua;
}
</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>
<br><br>
<table>
<tr>
<th id="brand">브랜드</th> <!-- id 추가 -->
<th id="category">카테고리</th> <!-- id 추가 -->
<th>제품명</th>
<th>가격</th>
</tr>
<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>
</table>
</body>
</html>
과제 제출 방법
이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 mission.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!
셀프 채점 기준
- [ ] jQuery를 사용하기 위해 추가해야하는 코드에 대해 알고 있는지
- [ ] jQuery 코드를 작성하는 위치에 대해 알고 있는지
- [ ] 기능 구현을 위해 함수를 작성할 수 있는지
(선택)다크모드와 라이트모드 만들어보기
jQuery를 활용해 기능을 직접 구현해봅니다. 코드를 작성하면서 jQuery의 작동 방식에 대해 이해합니다.
jQuery를 활용하면 다양한 기능을 넣을 수 있습니다. 어려운 기능이 아니어도 작성한 코드의 작동 원리를 이해하는 것만으로도 큰 도움이 됩니다. 어려운 코드도 원리는 동일합니다. 다만, 흐름이 다소 복잡할 뿐이죠.
완성 화면 예시(완전히 똑같이 만들기 보다는 여러분의 아이디어를 최대한 표현한 결과물을 만들어주세요)
가이드 코드를 이용해서 위에 제시된 영상의 결과물을 만들어보세요.
- 아래 2가지 기능을 jQuery로 작성해 주세요.
- 다크모드 버튼을 만들고 버튼을 누르면 body의 배경 색상과 글자 색을 각각 검은색과 흰색으로 변경하고 추가로 테이블 내-외부를 감싸는 선이 흰색으로 변경되도록 코드를 작성해주세요.
- 라이트모드 버튼을 만들고 버튼을 누르면 body 배경 색상과 글자 색을 각각 흰색과 검은색으로 변경하고 추가로 테이블 내-외부를 감싸는 선이 검은색으로 변경되도록 코드를 작성해주세요.
(가이드 코드에 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("분류 카테고리 : 후드, 맨투맨, 모자, 바지")
})
});
// 이 아래에 jQuery 코드를 추가해주세요.
</script>
<style>
/* 스타일링을 위한 CSS 코드 */
table {
width: 1000px;
border-collapse: collapse; /* 인접한 셀들 사이의 경계(border)가 합쳐집니다. 이는 테이블의 외곽선과 셀들 사이의 경계가 하나로 병합되어 깔끔하게 보여집니다. */
}
th, td {
padding: 10px;
border: 1px solid #333;
}
th {
background-color: #333;
color: #fff;
}
th:hover {
color: aqua;
}
</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>
<br><br>
<table>
<tr>
<th id="brand">브랜드</th>
<th id="category">카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
<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>
</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>
//스크립트 : // 브랜드 클릭 시 alert 띄위기
$(document).ready(() => {
$("#brand").on("click", () => {
alert("입고된 브랜드: 슈크림, 칼하트, 팔라스,아크테릭스")
})
// 카테고리 클릭 시 alert 띄위기
$("#category").on("click", () => {
alert("분류 카데고리: 스노클링, 백패킹, 트래킹, 힐링, 체험")
})
// 추가된 jQuery 코드
$("#dark_mode").on("click", () => {
$("body").css("background", "black"); // body의 배경 색상 black으로 변경
$("body").css("color", "white"); // body의 글자 색을 white로 변경
$("th, td").css("border", "1px solid white"); // 테이블 내-외부를 감싸는 선을 white로 변경
})
$("#light_mode").on("click", () => {
$("body").css("background", "white"); // body의 배경 색상을 white로 변경
$("body").css("color", "black"); // body의 글자 색을 black으로 변경
$("th, td").css("border", "1px solid black"); // 테이블 내-외부를 감싸는 선을 black으로 변경
})
});
</script>
<style>
/* 스타일링을 위한 CSS 코드- 테이블 스타일 */
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid #ddd;
box-shadow: 0 0 10px #ddd;
}
/* 테이블 헤더 스타일 */
th,
td {
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
border: 1px solid #ddd;
}
/*테이블 바디 스타일 */
th {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
/* 테이블 호버 효과*/
th:hover {
background-color: #f2f2f2;
}
/* 검색창 스타일 */
#searchInput {
width: 200px;
padding: 5px;
border: 1px solid #ddd;
}
/* 검색 버튼 스타일 */
#searchButton {
padding: 5px 10px;
border: 1px solid #ddd;
cursor: pointer;
}
</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>
<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>
<table>
<tr>
<th id="brand">브랜드</th> <!-- id 추가 -->
<th id="category">카테고리</th> <!-- id 추가 -->
<th>제품명</th>
<th>가격</th>
</tr>
<tr>
<th>브랜드</th>
<th>카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
<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>
</table>
</body>
</html>
- 다크모드 버튼을 만들고 버튼을 누르면 body의 배경 색상과 글자 색을 각각 검은색과 흰색으로 변경하고 추가로 테이블 내-외부를 감싸는 선이 흰색으로 변경되도록 코드를 작성해주세요.
- 라이트모드 버튼을 만들고 버튼을 누르면 body 배경 색상과 글자 색을 각각 흰색과 검은색으로 변경하고 추가로 테이블 내-외부를 감싸는 선이 검은색으로 변경되도록 코드를 작성해주세요.
정답(참고용으로만 봐주세요)
<!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("분류 카테고리 : 후드, 맨투맨, 모자, 바지");
})
// 추가된 jQuery 코드
$("#dark_mode").on("click", () =>{
$("body").css("background","black"); // body의 배경 색상 black으로 변경
$("body").css("color","white"); // body의 글자 색을 white로 변경
$("th, td").css("border","1px solid white"); // 테이블 내-외부를 감싸는 선을 white로 변경
})
$("#light_mode").on("click", () =>{
$("body").css("background","white"); // body의 배경 색상을 white로 변경
$("body").css("color","black"); // body의 글자 색을 black으로 변경
$("th, td").css("border","1px solid black"); // 테이블 내-외부를 감싸는 선을 black으로 변경
})
});
</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;
}
</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>
<table>
<tr>
<th id="brand">브랜드</th>
<th id="category">카테고리</th>
<th>제품명</th>
<th>가격</th>
</tr>
<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>
</table>
</body>
</html>
과제 제출 방법
이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 mission.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!
셀프 채점 기준
- [ ] jQuery를 사용하기 위해 추가해야하는 코드에 대해 알고 있는지
- [ ] jQuery 코드를 작성하는 위치에 대해 알고 있는지
- [ ] 기능 구현을 위해 함수를 작성할 수 있는지
일일 클래스&학습 도서 리뷰
실습 과제
- 오늘 VOD 강의 및 학습 도서를 통해 배운 내용 중 핵심 개념을 블로그에 정리하여 작성해 주세요.
오늘 학습할 내용: 위치를 지정하는 CSS 속성
1. 디스플레이 속성
1.1 블록과 인라인
- DIV 태그는 기본적으로 디스플레이 속성이 블록으로 설정되어 있어 한 줄을 가득 채웁니다.
- 디스플레이 속성을 인라인으로 설정하면 텍스트 크기만큼만 공간을 차지하게 됩니다.
- 예시:
- display: block; - 블록 요소로 설정
- display: inline; - 인라인 요소로 설정
- display: inline-block; - 블록 요소와 인라인 요소의 특징을 결
div {
display: inline;
}1.2 클래스와 아이디
- 여러 요소에 동일한 스타일을 적용하려면 클래스를 사용합니다.
- 특정 요소만 선택하려면 아이디를 사용합니다.
- 예시:
- .orange { display: inline-block; } - orange 클래스를 가진 모든 요소를 인라인 블록 요소로 설정
- #first { display: block; } - first 아이디를 가진 요소를 블록 요소로 설정
2. 포지션 속성
- 정적 위치 (static): 기본값, 요소의 위치를 변경하지 않음
- 상대 위치 (relative): 요소의 위치를 기본 위치를 기준으로 변경
- 고정 위치 (fixed): 요소의 위치를 화면 전체를 기준으로 변경
- 절대 위치 (absolute): 요소의 위치를 조상 요소의 위치를 기준으로 변경
2.1 정적 위치 (static)
- 기본 위치 지정 방식입니다.
- 요소는 정해진 위치에 그대로 배치됩니다.
2.2 상대 위치 (relative)
- 요소의 위치를 기본 위치를 기준으로 상대적으로 이동합니다.
- top, right, bottom, left 속성을 사용하여 이동 거리를 지정합니다.
- 예시:
- position: relative; left: 30px; - 요소를 기본 위치에서 왼쪽으로 30px 이동
div {
position: relative;
left: 30px;
}
2.3 고정 위치 (fixed)
- 요소의 위치를 화면 전체를 기준으로 고정합니다.
- 스크롤해도 요소의 위치는 변하지 않습니다.
- top, right, bottom, left 속성을 사용하여 위치를 지정합니다.
- 예시:
- position: fixed; top: 50%; left: 50%; - 요소를 화면 중앙에 고정
div {
position: fixed;
top: 10px;
right: 10px;
}
2.4 절대 위치 (absolute)
- 요소의 위치를 가장 가까운 조상 요소의 상대 위치를 기준으로 지정합니다.
- position: absolute; 속성을 사용해야 합니다.
- top, right, bottom, left 속성을 사용하여 위치를 지정합니다.
div {
position: absolute;
top: 10px;
left: 10px;
}
3. 랩 속성
- margin, padding 속성과 유사
- 요소 주변의 여백을 설정
- 예시:
div {
margin: 10px;
padding: 10px;
}4. overflow 속성
- 요소의 내용이 넘칠 때 처리 방식 설정
- visible: 내용을 숨기지 않음
- hidden: 내용을 숨김
- scroll: 스크롤바를 표시
- 예시:
div {
overflow: scroll;
}9. 백그라운드 속성
- 요소의 배경 색상, 이미지, 위치 등을 설정
- 예시:
div {
background-color: red;
background-image: url(image.png);
background-position: center;
}10. 테두리 속성
- 요소의 테두리 스타일, 색상, 너비 등을 설정
- 예시:
div {
border-style: solid;
border-color: black;
border-width: 1px;
}11. 텍스트 속성
- 요소의 텍스트 정렬, 크기, 색상 등을 설정
- 예시:
div {
text-align: center;
font-size: 16px;
color: blue;
}12. 그림자 속성
- 요소의 그림자 효과를 설정
- 예시:
div {
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}13. 애니메이션 속성
- 요소의 애니메이션 효과를 설정
- 예시:
div {
animation: my-animation 2s infinite;
}
@keyframes my-animation {
from {
background-color: red;
}
to {
background-color: blue;
}
}제이쿼리란 무엇인가?
- 웹사이트에서 자바스크립트를 더 쉽게 활용할 수 있도록 도와주는 오픈소스 자바스크립트 라이브러리
- "적게 작성하고, 더 많은 것을 하라"라는 모토를 가지고 있으며, 자바스크립트 코드를 간결하고 효율적으로 만들 수 있도록 도와줌
- 2006년 출시 이후 가장 인기 있는 자바스크립트 라이브러리 중 하나로 자리매김
2. 제이쿼리가 필요한 이유
- 자바스크립트 코드를 단순화하고 압축하여 개발 시간을 단축
- 브라우저 호환성 문제를 해결하여 웹사이트의 안정성을 높여줌
- 다양한 플러그인과 확장 기능을 제공하여 웹 개발을 더욱 효율적으로 만들어줌
3. 제이쿼리 기본 개념
- DOM 선택자( Document Object Model ): HTML 페이지의 모든 요소와 속성을 객체로 표현하며, 이를 통해 웹 페이지의 구조, 스타일, 내용 등을 동적으로 변경할 수 있습니다.
- 이벤트 처리: 사용자의 상호 작용에 대한 응답으로 코드를 실행하는 방법
- AJAX: 페이지를 새로 고침 없이 데이터를 비동기적으로 로드하고 업데이트하는 방법
4. 제이쿼리 학습 방법
- 공식 문서(https://jquery.com/) 및 다양한 온라인 튜토리얼 활용
- 제이쿼리 플러그인 및 확장 기능 활용
- 실제 웹 개발 프로젝트에 적용하며 경험 쌓기
5. 제이쿼리 예시
- HTML 요소 선택: $('div')
- 이벤트 처리: $('button').click(function() { });
- AJAX: $.ajax({ url: 'url', success: function(data) { } });
6. 제이쿼리 활용 분야
- 웹사이트 애니메이션 및 효과
- 웹사이트 상호 작용 및 사용자 경험 개선
- 웹 페이지 로딩 속도 향상
- Ajax를 통한 비동기 데이터 통신
DIV 태그의 중요성:
웹사이트를 만들 때 DIV 태그는 매우 중요한 역할을 합니다. 대부분의 웹사이트는 DIV 태그를 사용하여 레이아웃을 구성하고 콘텐츠를 구분합니다. DIV 태그를 사용하면 다음과 같은 작업을 수행할 수 있습니다.
- 영역 구분: 웹사이트를 헤더, 본문, 푸터 등 여러 영역으로 나눌 수 있습니다.
- 레이아웃 구성: 2단, 3단 레이아웃 등 다양한 레이아웃을 만들 수 있습니다.
- 콘텐츠 정렬: 텍스트, 이미지, 동영상 등을 원하는 위치에 정렬할 수 있습니다.
- 스타일 적용: 배경색, 글꼴, 여백 등 다양한 스타일을 적용하여 웹사이트 디자인을 꾸밀 수 있습니다.
DIV 태그 예시:
다음은 DIV 태그를 사용하여 간단한 웹사이트 레이아웃을 만드는 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DIV 태그 예시</title>
</head>
<body>
<div id="header">
<h1>웹사이트 제목</h1>
</div>
<div id="main">
<p>본문 내용</p>
</div>
<div id="footer">
<p>Copyright 2023</p>
</div>
</body>
</html>
JavaScript와 함께 사용:
JavaScript를 사용하여 DIV 태그를 동적으로 조작할 수 있습니다. 예를 들어, 다음 코드는 버튼 클릭 시 DIV 태그의 배경색을 변경합니다.
<button onclick="changeColor()">색상 변경</button>
<div id="myDiv">
<p>본문 내용</p>
</div>
<script>
function changeColor() {
var div = document.getElementById("myDiv");
div.style.backgroundColor = "red";
}
</script>
스크립트 실행 순서:
HTML 코드는 위에서 아래로 순서대로 실행됩니다. 스크립트 태그는 HTML 코드의 어느 위치에나 삽입할 수 있지만, 일반적으로는 다음 두 가지 위치 중 하나에 삽입됩니다.
- head 태그 안: head 태그 안에 삽입된 스크립트는 페이지가 로드될 때 바로 실행됩니다.
- body 태그 안: body 태그 안에 삽입된 스크립트는 페이지가 로드된 후에 실행됩니다.
예시:
다음 예시에서는 body 태그 안에 스크립트 태그가 삽입되어 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스크립트 실행 순서 예시</title>
</head>
<body>
<h1>웹사이트 제목</h1>
<p>본문 내용</p>
<script>
var div = document.getElementById("myDiv");
div.innerHTML = "Hello World!";
</script>
<div id="myDiv"></div>
</body>
</html>이 예시에서는 스크립트 태그가 body 태그 안에 있기 때문에 페이지가 로드된 후에 실행됩니다. 따라서 "Hello World!" 문구는 DIV 태그 안에 표시됩니다.
문제 해결:
이전 예시에서 스크립트 태그가 head 태그 안에 있었다면 "Hello World!" 문구는 표시되지 않았을 것입니다. 그 이유는 스크립트 태그가 실행될 때 DIV 태그가 아직 존재하지 않기 때문입니다.
결론:
스크립트 태그는 HTML 코드의 어느 위치에나 삽입할 수 있지만, 스크립트 실행 순서를 고려하여 적절한 위치에 삽입해야 합니다. 일반적으로는 head 태그 안에 삽입하면 페이지가 로드될 때 바로 실행되고, body 태그 안에 삽입하면 페이지가 로드된 후에 실행됩니다.
JavaScript의 문제점:
JavaScript는 웹 개발에 매우 유용한 언어이지만, 몇 가지 문제점도 가지고 있습니다.
- 코드가 길어질 수 있다: JavaScript 코드는 기능을 구현하기 위해 많은 코드를 작성해야 하는 경우가 많습니다.
- 코드가 복잡해질 수 있다: JavaScript 코드는 기능이 복잡해지면 코드도 따라서 복잡해질 수 있습니다.
- 코드를 읽기 어려울 수 있다: JavaScript 코드는 다른 사람이 읽기 어려울 수 있습니다.
jQuery의 장점:
jQuery는 JavaScript 코드를 간단하고 직관적으로 작성할 수 있도록 도와주는 JavaScript 라이브러리입니다. jQuery를 사용하면 다음과 같은 장점을 얻을 수 있습니다.
- 코드를 간단하게 만들 수 있다: jQuery는 자주 사용하는 JavaScript 기능을 간단한 함수로 제공합니다.
- 코드를 직관적으로 만들 수 있다: jQuery는 함수 이름이 기능을 명확하게 나타내도록 설계되었습니다.
- 코드를 읽기 쉽게 만들 수 있다: jQuery는 코드를 간단하게 만들어 다른 사람이 읽기 쉽게 해줍니다.
jQuery 예시:
다음은 jQuery를 사용하여 DIV 태그의 배경색을 변경하는 예시입니다.
<div id="myDiv">
<p>본문 내용</p>
</div>
<script>
$(document).ready(function() {
$("#myDiv").css("background-color", "red");
});
</script>
이 예시에서는 다음과 같이 jQuery를 사용했습니다.
- $(document).ready(function() { ... }): DOMContentLoaded 이벤트가 발생했을 때 실행되는 함수를 정의합니다.
- $("#myDiv"): ID가 "myDiv"인 DIV 태그를 선택합니다.
- .css("background-color", "red"): 선택된 DIV 태그의 배경색을 빨간색으로 변경합니다.
결론:
jQuery는 JavaScript 코드를 간단하고 직관적으로 작성할 수 있도록 도와주는 유용한 라이브러리입니다. 웹 개발 경험을 향상시키고 싶다면 jQuery를 사용하는 것을 추천합니다.
참고:
- jQuery 공식 홈페이지: https://jquery.com/
- jQuery API 문서: https://api.jquery.com/
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
외부 스크립트 파일 참조:
HTML 코드에서 외부 스크립트 파일을 참조하려면 <script> 태그의 src 속성을 사용합니다. src 속성에 외부 스크립트 파일의 URL을 지정하면 브라우저는 해당 파일을 다운로드하여 실행합니다.
예시:
다음 예시에서는 jquery.min.js라는 외부 스크립트 파일을 참조합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>jQuery 사용:
jQuery를 사용하려면 먼저 jQuery 라이브러리를 참조해야 합니다. jQuery 라이브러리는 CDN(Content Delivery Network)에서 제공되므로, 다음과 같이 <script> 태그를 사용하여 참조할 수 있습니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// jQuery 코드
});
</script>jQuery 코드 예시:
다음은 jQuery를 사용하여 DIV 태그의 배경색을 변경하는 예시입니다.
<div id="myDiv">
<p>본문 내용</p>
</div>
<script>
$(document).ready(function() {
$("#myDiv").css("background-color", "red");
});
</script>
jQuery의 장점:
jQuery는 JavaScript 코드를 간단하고 직관적으로 작성할 수 있도록 도와주는 유용한 라이브러리입니다. jQuery를 사용하면 다음과 같은 장점을 얻을 수 있습니다.
- 코드를 간단하게 만들 수 있습니다. jQuery는 자주 사용하는 JavaScript 기능을 간단한 함수로 제공합니다.
- 코드를 직관적으로 만들 수 있습니다. jQuery는 함수 이름이 기능을 명확하게 나타내도록 설계되었습니다.
- 코드를 읽기 쉽게 만들 수 있습니다. jQuery는 코드를 간단하게 만들어 다른 사람이 읽기 쉽게 해줍니다.
jQuery 예시:
다음은 jQuery를 사용하여 DIV 태그의 배경색을 변경하는 예시입니다.
<div id="myDiv">
<p>본문 내용</p>
</div>
<script>
$(document).ready(function() {
$("#myDiv").css("background-color", "red");
});
</script>이 예시에서는 다음과 같이 jQuery를 사용했습니다.
- $(document).ready(function() { ... }): DOMContentLoaded 이벤트가 발생했을 때 실행되는 함수를 정의합니다.
- $("#myDiv"): ID가 "myDiv"인 DIV 태그를 선택합니다.
- .css("background-color", "red"): 선택된 DIV 태그의 배경색을 빨간색으로 변경합니다.
jQuery 사용 이유:
jQuery를 사용하는 이유는 다음과 같습니다.
- 코드를 간단하게 만들 수 있습니다. jQuery는 자주 사용하는 JavaScript 기능을 간단한 함수로 제공합니다.
- 코드를 직관적으로 만들 수 있습니다. jQuery는 함수 이름이 기능을 명확하게 나타내도록 설계되었습니다.
- 코드를 읽기 쉽게 만들 수 있습니다. jQuery는 코드를 간단하게 만들어 다른 사람이 읽기 쉽게 해줍니다.
- 교차 브라우저 호환성을 제공합니다. jQuery는 다양한 브라우저에서 동일하게 작동하도록 설계되었습니다.
- 다양한 플러그인을 사용할 수 있습니다. jQuery에는 다양한 기능을 제공하는 플러그인이 많이 있습니다.
결론:
jQuery는 JavaScript 코드를 간단하고 직관적으로 작성할 수 있도록 도와주는 유용한 라이브러리입니다. 웹 개발 경험을 향상시키고 싶다면 jQuery를 사용하는 것을 추천합니다.
버튼 클릭 이벤트 처리
- 버튼 선택:
- 먼저, 스타일을 바꾸고 싶은 버튼을 선택해야 합니다. HTML 코드에서 해당 버튼의 id 또는 class 속성을 확인합니다.
2.JavaScript 코드 추가:
다음으로, HTML 코드의 <script> 태그 안에 JavaScript 코드를 추가합니다.
// 버튼 선택
const button = document.getElementById("button-id");
// 버튼 클릭 이벤트 리스너 등록
button.addEventListener("click", () => {
// 버튼 클릭 시 실행할 코드
});
3.스타일 변경 코드 추가:
click 이벤트 리스너 함수 안에 스타일을 변경하는 코드를 추가합니다. 예를 들어, 다음 코드는 버튼 클릭 시 배경색을 빨간색으로 변경합니다.
button.addEventListener("click", () => {
// 버튼 배경색 변경
button.style.backgroundColor = "red";
});
4.코드 실행 확인
브라우저에서 HTML 파일을 열고 버튼을 클릭합니다. 버튼 스타일이 변경되었는지 확인합니다.
익명 함수 사용
위 코드에서 click 이벤트 리스너 함수는 익명 함수입니다. 익명 함수는 이름이 없는 함수이며, 간단한 코드를 작성할 때 유용합니다.
함수 이름 지정
익명 함수 대신 이름을 지정한 함수를 사용할 수도 있습니다. 예를 들어, 다음 코드는 changeButtonStyle라는 이름의 함수를 사용합니다.
function changeButtonStyle() {
// 버튼 배경색 변경
button.style.backgroundColor = "red";
}
// 버튼 클릭 이벤트 리스너 등록
button.addEventListener("click", changeButtonStyle);
5.함수 실행
이전 강좌에서 함수를 만들고 사용하는 방법을 배웠습니다. 함수를 만들었다고 해서 자동으로 실행되는 것은 아닙니다. 함수를 실행하려면 함수 이름을 호출해야 합니다.
예시
함수 실행
이전 강좌에서 함수를 만들고 사용하는 방법을 배웠습니다. 함수를 만들었다고 해서 자동으로 실행되는 것은 아닙니다. 함수를 실행하려면 함수 이름을 호출해야 합니다.
예시
function test() {
console.log("테스트 함수 실행!");
}
// 함수 실행
test();문제점
위 코드는 함수를 실행하지만, document.ready 이벤트 안에 있지 않습니다. document.ready 이벤트 안에 함수를 넣지 않으면, DOM 요소가 준비되기 전에 함수가 실행되어 오류가 발생할 수 있습니다.
해결 방법
다음과 같이 document.ready 이벤트 안에 함수를 넣어야 합니다.
$(document).ready(function() {
test();
});익명 함수 사용
함수 이름을 지정하지 않고 익명 함수를 사용할 수도 있습니다.
$(document).ready(function() {
console.log("테스트 함수 실행!");
});
함수 이름 지정의 장점
익명 함수는 간단하지만, 함수 이름을 지정하면 코드를 읽고 이해하기 쉬워집니다. 특히, 함수가 복잡하거나 여러 번 사용되는 경우 함수 이름을 지정하는 것이 좋습니다.
함수 이름 지정 예시
function changeColor() {
$("body").css("background-color", "red");
}
$(document).ready(function() {
changeColor();
});
첫 번째 네 개 변수에 "클릭" 매개변수 전달
첫 번째 네 개 변수에 "클릭" 매개변수를 전달하는 것은 버튼 클릭 시 특정 함수를 실행하도록 하기 위한 것입니다. 이는 마치 버튼 클릭 이벤트를 처리하는 것과 유사합니다.
코드 예시:
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const button3 = document.getElementById("button3");
const button4 = document.getElementById("button4");
button1.onclick = function() {
test();
};
button2.onclick = function() {
test();
};
button3.onclick = function() {
test();
};
button4.onclick = function() {
test();
};설명:
- button1, button2, button3, button4는 각 버튼의 ID를 나타냅니다.
- test()는 버튼 클릭 시 실행될 함수입니다.
이 코드는 다음과 같이 작동합니다.
- 사용자가 버튼 1, 2, 3, 4 중 하나를 클릭합니다.
- 해당 버튼의 onclick 함수가 실행됩니다.
- test() 함수가 실행됩니다.
코드 간소화
위 코드는 다소 반복적입니다. 코드를 간소화하기 위해 다음과 같이 작성할 수 있습니다.
const buttons = document.querySelectorAll(".button");
for (const button of buttons) {
button.onclick = function() {
test();
};
}설명:
- buttons는 .button 클래스를 가진 모든 요소를 선택합니다.
- for 루프를 사용하여 각 버튼의 onclick 함수를 설정합니다.
이 코드는 다음과 같이 작동합니다.
- 사용자가 .button 클래스를 가진 버튼 중 하나를 클릭합니다.
- 해당 버튼의 onclick 함수가 실행됩니다.
- test() 함수가 실행됩니다.
함수 이름 변경
"test()" 함수 이름은 임의입니다. 원하는 이름으로 변경할 수 있습니다.
함수 매개변수 추가
"test()" 함수에 필요한 매개변수를 추가할 수 있습니다. 예를 들어, 버튼 ID를 매개변수로 전달하여 다음과 같이 사용할 수 있습니다.
function test(buttonId) {
// buttonId를 사용하여 작업 수행
}
코드 삽입
"test()" 함수 대신 원하는 코드를 직접 삽입할 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다.
button1.onclick = function() {
alert("버튼 1이 클릭되었습니다.");
};
콘솔 사용
콘솔을 사용하여 버튼 클릭 이벤트를 처리할 수도 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다.
button1.addEventListener("click", function() {
console.log("버튼 1이 클릭되었습니다.");
});이 코드는 다음과 같이 작동합니다.
- 사용자가 버튼 1을 클릭합니다.
- "버튼 1이 클릭되었습니다."라는 메시지가 콘솔에 출력됩니다.
결론
버튼 클릭 시 특정 함수를 실행하는 방법은 다양합니다. 상황에 맞는 방법을 선택하여 사용하면 됩니다.
- 주의할 점은 해당 강의를 보지 않은 사람이 이해할 수 있도록 타인에게 가르치듯이 작성해주세요.
- 단순 개념을 정리한 글과 타인에게 정보 전달을 위한 글은 형식 부터 차이가 있습니다.
- 단순 개념 정리 : https://jkkou.tistory.com/42
- 가르치듯 작성된 글 : https://ibks-platform.tistory.com/373
- 단순 개념을 정리한 글과 타인에게 정보 전달을 위한 글은 형식 부터 차이가 있습니다.
- 왜 클래스 리뷰를 하나요?
- 단순 강의를 듣는 것만으로는 절대로 기억할 수 없습니다. 다른 사람을 가르치는 글을 작성하는 것만으로도 기억율을 극단적으로 높힐 수 있습니다.
셀프 채점 기준
- [ ] 단순 개념 정리가 아니라 타인에게 개념을 설명해 주는 형태로 작성되었는지
- [ ] 강의 내용을 그대로 작성한 것이 아니라 본인의 생각이 들어갔는지