p 620 light box 예제
사용자 정의 속성 : 사용자(개발자)가 어떤 목적으로 사용하기 위해 임의의 이름으로 작성한 속성. 자바스크립트, CSS에서 활용할 수 있다. 라이트박스 예제에서는 썸네일 이미지와 연결할 본 이미지의 정보를 저장하기 위해 'data-src'라는 임의의 이름으로 작성하였다. html 5에서 새로 생긴 일종의 메타 데이터 속성
data-XXX 사용자 정의 속성은 CSS 부트스트랩을 사용할 때 자바스크립크과 같이 많이 사용된다.
이벤트에서의 this
이벤트가 발생된 html 요소 .
html 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>light box</title>
<link rel="stylesheet" href="css/1.lightbox_style.css">
</head>
<body>
<!--작은 그림은 썸네일, 큰 이미지는 라이트박스 용 이미지
data-src 개발자가 임의로 작성한 문자열(커스텀 속성) style css 부트스트랩에서 많이 사용하는 값-->
<div class="row">
<ul>
<li><img src="images/tree-1-thumb.jpg" data-src="images/tree-1.jpg" class="pic"></li>
<li><img src="images/tree-2-thumb.jpg" data-src="images/tree-2.jpg" class="pic"></li>
<li><img src="images/tree-3-thumb.jpg" data-src="images/tree-3.jpg" class="pic"></li>
<li><img src="images/tree-4-thumb.jpg" data-src="images/tree-4.jpg" class="pic"></li>
<li><img src="images/tree-5-thumb.jpg" data-src="images/tree-5.jpg" class="pic"></li>
<li><img src="images/tree-6-thumb.jpg" data-src="images/tree-6.jpg" class="pic"></li>
</ul>
</div>
<div id="lightbox">
<img src="images/tree-1.jpg" alt="" id="lightboxImage">
</div>
</body>
<script>
// 썸네일, div, 이미지 박스 가져오기
const pics = document.getElementsByClassName("pic");
const lightbox = document.getElementById("lightbox");
const lgtImg = document.getElementById("lightboxImage");
for(let i = 0; i < pics.length; i++) {
// 클릭을 하면 함수 showLightbox를 실행해라
pics[i].addEventListener("click", showLightbox);
}
function showLightbox() {
// 첫번째 버튼인지 세번째 버튼인지 요소를 구별하기 위한 명령어, 이벤트를 발생하기 위한 요소 this
// 큰 이미지를 bigLocation에 저장해줌
let bigLocation = this.getAttribute("data-src");
lgtImg.setAttribute("src", bigLocation);
lightbox.style.display = "block";
}
lightbox.onclick = () => {
lightbox.style.display = "none";
}
</script>
</html>CSS 문서
@charset "UTF-8";
.row {
width: 420px;
margin: 0 auto;
}
.row ul {
list-style: none;
margin: 0;
padding: 0;
}
.row ul li {
display: inline-table;
}
#lightbox {
/* 확인 작업하고 숨기기 */
display: none;
position: fixed;
/*썸네일 위에 덮어 씌워서 화면 전체를 사용한다.*/
width: 100%;
height: 100%;
/*투명도 조정*/
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
}
#lightbox img {
position: absolute;
/* 우측 하단에 위치 */
top: 50%;
left: 50%;
/* 가운데로 이동 */
transform: translate(-50%, -50%);
border: 5px solid #eee;
}
아코디언 메뉴 만들기
악기 아코디언의 형태를 빌어서 만든 메뉴 형식
요소 클릭 시 하위 요소를 보이거나 숨기는 형태.
this : 이벤트가 발생한 요소 자체를 의미한다. 화살표 함수에서는 사용할 수 없다. 이 때는 function 키워드를 사용하여 함수를 작성한다. 표준문법 ES6에 나와 있다.
논리형의 실제 데이터 값의 구분
false == 0
true != 0, 0이 아닌 값을 말한다.
html 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아코디언 메뉴 만들기</title>
<style>
.nav {
width: 300px;
}
.abtn {
/* 300px */
box-sizing: border-box;
width: 100%;
background-color: azure;
color: teal;
/* 마우스 커서 */
cursor: pointer;
/* 메뉴버튼 너비 조정 */
padding: 18px;
font-size: 20px;
transition: 0.4s;
}
.active,
.abtn:hover {
/* 마우스 올렸을 때 색 변화 */
background-color: rgb(215, 236, 236);
}
.pcontent {
padding: 0 10px;
background-color: beige;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<div class="nav">
<div class="abtn">Section 1</div>
<div class="pcontent">
<p>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<div class="abtn">Section 2</div>
<div class="pcontent">
<p>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<div class="abtn">Section 3</div>
<div class="pcontent">
<p>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
</div>
</body>
<script>
const abtn = document.getElementsByClassName("abtn");
// for of 사용 가능, 화살표 함수는 this를 쓰지 못한다.
for (let i = 0; i < abtn.length; i++) {
abtn[i].onclick = function () {
// 클릭한 부분을 선택해서 색의 변화를 주는 용도
this.classList.toggle("active");
// 클릭 이벤트가 발생한 요소의 다음 형제 요소, 현재 화면에서는 버튼 아래의 p 컨텐츠를 의미
let panel = this.nextElementSibling;
// 값이 있으면 true 열려 있으면 닫자 - 닫혀 있으면 열자
if(panel.style.maxHeight) {
panel.style.maxHeight = null; // null은 0과 같다.
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
//컨텐츠의 크기 만큼 늘어나게
}
}
}
</script>
</html>
jQuery
자바스크립트를 쓰기 쉽게 만든 서드파티 라이브러리
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
+ 웹에서 자주 사용하는 자바스트크립트 라이브러리
웹개발에 자주 쓰는 자바스크립트 라이브러리들 - 코딩애플 온라인 강좌
자바스크립트로 UI를 직접 만들 필요는 없습니다. 최상의 퍼포먼스를 위해선 당연히 UI를 직접 만들어야하겠지만 요즘의 개발 메타는 '개발자가 편한 개발'입니다. 어떤 도구를 쓰든간에 개발
codingapple.com
사용방법
1. jQuery 사이트에서 라이브러리 다운로드 후 (다른 이름으로 링크저장), 연결시킬 폴더 안에 넣어주어야 한다.
<script src="다운로드한 파일"></script>
시작 태그와 종료 태그 사이에는 아무것도 쓰지 않는다.
2. CND(Content Delvery Network) 이용 방식
라이브러리 파일을 다운로드하지 않고, 사용하는 방식.
<script src="다운로드사이트주소"></script>
CND(Content Delvery Network)
지리적 제약 없이 전 세계 사용자에게 빠르게 콘텐츠를 전송하는 기술
클라우드
라우터 - 경로를 수립해 주는 장치
min을 빼면 일반버전으로 사용가능하다. 숫자는 현재 버전으로 바꾸어서 사용 3-6-4
1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
2. 구글 CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3. MS CDN : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4. CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5. jsDelivr CDN : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
문법 - 이벤트에 특화된 라이브러리
$(선택자).동작함수();
<p id="con"></p>
->
const p = $("#con");
const p = document.getElementById("con");
p.click(function(){});
p.addEventLIstener("click", function(){});
jQuery에서 이벤트처리하는 문장
$("#con").click(function(){});
요소선택 - CSS의 선택자와 동일한 방식을 사용.
1) 태그명 : 태그이름만 작성
2) 클래스 : . + 클래스 속성값
3) id : # + 아이디 속성값
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) (0) | 2023.03.21 |
|---|---|
| 3월 20일 (2) JavaScript - jQuery event, effect (0) | 2023.03.20 |
| 3월 17일 (2) JavaScript - locatoin, history (0) | 2023.03.17 |
| 3월 17일 (1) JavaScript - Screen (0) | 2023.03.17 |
| 3월 16일 (2) JavaScript - 브라우저 객체 모델 (0) | 2023.03.16 |