Hero 콘텐츠 사이트에서 가장 먼저 보이는 특정한 영역을 의미한다. 가장 먼저 보이고 가장 중요하면서, 사용자에게 페이지에 대한 전반적인 내용을 함축적으로 전달할 수 있는 콘텐츠가 들어있다. 이미지 선택 및 드래그 방지 코드 보기 user-select로 선택을 제어하고 user-drag로 드래그를 제어할 수 있다. 그러나 user-drag는 실험적인 속성으로 vendor prefix(공급 업체 접두사)를 사용해야 값이 적용된다. 비교적 최신/실험적인 기술은 웹 표준 기술과 구분하기 위하여 -webkit-과 같은 vendor prefix를 사용한다. 브라우저마다 지원 여부가 다르므로 https://caniuse.com/에서 확인하자.

코드 보기 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