closest, masonry, scrollTrigger, imagesLoaded, niceScroll, svg

closest

closest(selectors);

closest는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회하는 메서드이다.

HTML

<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

JS

const el = document.getElementById("div-03");

// ID가 "div-02"인 가장 가까운 조상
console.log(el.closest("#div-02")); // <div id="div-02">

// div 안에 놓인 div인 가장 가까운 조상
console.log(el.closest("div div")); // <div id="div-03">

// div면서 article을 부모로 둔 가장 가까운 조상
console.log(el.closest("article > div")); // <div id="div-01">

// div가 아닌 가장 가까운 조상
console.log(el.closest(":not(div)")); // <article>

---

44강, 로딩 화면 구현, masonry, imagesLoaded

참고 사이트

Pinterest/새 탭에서 열기
(마스터리 레이아웃의 대표적인 사이트)

Masonry : 벽돌이나 돌을 쌓아 올린 형태

masonry : (웹 디자인에서의 마스너리는) 불규칙적인 크기를 가지는 요소들을 정렬하여 배치하는 레이아웃 형태

imagesLoaded : 이미지가 로딩되었는지 알려주는 jquery 플러그인

이 두가지 기능은 외부에서 스타일시트를 가져와 사용하는데
안쪽에서 jquery를 사용하기 때문에
jquery가 항상 먼저 작성되어야 한다.

접기/펼치기 HTML

//폰트어썸
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
//tailwind css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">
//jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
//imagesloaded
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
//masonry 스타일시트
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

---

45강, scrollTrigger, imagesLoaded

---

46강, niceScroll

참고 사이트

webgradients/새 탭에서 열기

---

47강, svg

참고 사이트

Graphics ARIA Guidebook-SVG 패스 도형 그리기/새 탭에서 열기

figma/새 탭에서 열기

svg(Scalable Vector Graphics)

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

간단히 말하면 코드로 그린 그림이다.

svg의 장점

• 픽셀 기반의 이미지(JPEG, PNG, GIF)는 확대하면 깨지거나 흐릿해지는 등 사진이 망가지는 경우가 있지만
  SVG는 그림 요소(점, 선, 곡선)를 코드로 담고 있는 방식이라서 확대해도 선명하다.

• 파일 크기가 훨씬 작을 수 있음

• 쉬운 애니메이션 및 상호작용 (CSS나 JS를 이용)

• 태그를 사용하여 설명 제공 가능

• 스타일링 용이 (CSS 태그로 조작 가능)

• DOM 조작 가능

---