코드 보기 body { height: 3000px; } header { height: 50px; border-bottom: 1px solid #d2d2d2; position: sticky; top:0; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(20px); } h1 { width: 100%; height: 400px; background-color: orange; } sticky는 부모 요소의 범위 안에서만 동작한다.

스크립트 코드 보기 js에서 html을 불러오는 방법은? -> documentElement document에서 가장 최상위 요소인 html을 불러올 수 있다. 검색 포커스 및 값 비우기 코드 보기 transition을 적용했을 때 아직 보이지 않은 요소에 대해 함수를 실행하면 함수가 제대로 동작하지 않을 수 있다. 그럴 때 사용하는 setTimeout()

화살표 박스 만들기 코드 보기 .container { margin: 200px; width: 200px; height: 200px; border: 4px solid; position: relative; } .item { width: 40px; height: 20px; overflow: hidden; position: absolute; top: -20px; right: 20px; } .item::before { content:""; width: 20px; height: 20px; border: 4px solid; position: absolute; top: 0; left: 50%; background-color: #fff; transform: rotate(45deg); transform-origin: 0 ..

코드 보기 웹 접근성을 고려하기 위해 이미지에 대체 텍스트를 넣어야 한다. html에서는 img 태그의 alt 속성을 통해 대체 텍스트를 부여하지만, css에서 background-image: url();을 사용하면 대체 텍스트를 text-indent: -9999px;로 부여하기로 약속한다. Apple 스토어 Mac iPad iPhone Watch Airpods Apple 독점 제공 액세서리 고객지원 검색 장바구니 header ul.menu li.apple-logo a, header ul.menu li.search-starter a, header ul.menu li.basket-starter a { width: 14px; text-indent: -9999px; background-repeat: no-re..

git과 github를 사용하려고 했는데.. 띠용 github가 안들어가짐.. 그렇게 알게 된 새로운 사이트 https://www.githubstatus.com/ https://github.com/iam454/apple-ipad-app GitHub - iam454/apple-ipad-app Contribute to iam454/apple-ipad-app development by creating an account on GitHub. github.com assets.zip 다운로드 word-break 영어는 단어마다 자연스럽게 줄바꿈이 되지만, 한글은 아니다. word-break: keep-all;을 적용하는 것으로 한글도 단어마다 줄바꿈 할 수 있다!

gsap의 화면을 특정 위치로 이동해주는 ScrollToPlugin, 강의의 3.6.0 버전을 사용했다. window.addEventListener( "scroll", _.throttle(function () { if (window.scrollY > 500) { // 뱃지 숨기기 // gsap.to(요소, 지속시간(s), 옵션) gsap.to(badgeEl, 0.6, { opacity: 0, display: "none", }); // 버튼 보이기 gsap.to(toTopEl, 0.2, { x: 0, }); } else { // 뱃지 보이기 gsap.to(badgeEl, 0.6, { opacity: 1, display: "block", }); // 버튼 숨기기 gsap.to(toTopEl, 0.2, { x..

html entities 화면에 라는 문자를 출력하고 싶은데.. 를 태그로 인식해서 출력할 수 없을 때 사용하는 html의 특수 기호! https://tools.w3cub.com/html-entities Character Entity Reference Chart - W3cubTools Character Entity Reference Chart, show you the character entity in one screen. easy to search and copy. tools.w3cub.com

ScrollMagic 현재 스크롤 위치를 계산하는 라이브러리, 강의에서 나온 2.0.8 버전을 사용했다. 특정 위치에 도달하면 애니메이션이 동작하게 만들고 싶을때 유용하다. const spyEls = document.querySelectorAll("section.scroll-spy"); spyEls.forEach(function (spyEl) { new ScrollMagic.Scene({ triggerElement: spyEl, triggerHook: 0.8, }) .setClassToggle(spyEl, "show") .addTo(new ScrollMagic.Controller()); }); Scene : 특정 요소를 감시하는 옵션 지정 triggerElement : 감시할 요소 triggerHook ..